Print
Themes Tab Different menu types have different style requirements. Here you can select the type of menu and menu level whose style you want to work with.
Select a theme for maintenance.
You may define different font settings for each menu level.
Menukit automatically changes the set of input fields that are displayed
to match the type of menu item that is being defined. Here you can see
how 2 additional input fields are shown when the Parent item button
is pressed.
The CSS menus can be given a three dimensional appearance by using different colors on the side and top borders. Use the 3-D Borders button to switch the user interface to show individual borders.
Use the colorbutton control to set the background color of the preview area so you can preview the button colors and settings against different background colors.
Note. Once the background color of the preview area
has been set, the colorizers (see Theme Colors in this manual) are
also shown against the same background color. 
About Themes A 'theme' in Menukit is simply a named set of style settings (eg. fonts, button dimensions, text colors, background colors, borders, etc.) that define the look of a menu. When you select a specific theme to style a menu, Menukit creates a stylesheet for the menu based on that theme. Menukit comes with a set of predefined themes. You can also define and maintain your own themes.
- Themes tab
Start the definition of a new theme by copying an existing theme.Use the Themes tab to define a new theme or to modify an existing theme.
Whenever you bring it forward, the Themes tab initially displays the theme of the current menu. You may select a different theme for display and even select a different type of menu on the Themes tab without affecting the type and theme settings of the current menu.
You can only change the type and theme of the current menu on the Menu tab.
Any changes that you make to themes while on the Themes tab will be saved when you press Menukit's Save button. In order to guard against making unintended changes while experimenting with themes you may lock a theme with the Lock button
.
The input fields are disabled when a theme is locked.
The preset themes that come with Menukit are permanently locked. These are shown with a locked red padlock
that
cannot be unlocked.
Tip! If you would like to use a modified version of a system theme you can use the Clone theme button
to
make a copy of it and modify the copy.
- Separation of Themes and Menus Themes are maintained independently of menus. This means that a single theme can be used to style different types of menu. Below is an example of how 3 different types of CSS menus can each be styled with the same theme.
- It takes just a couple of keystrokes in Menukit to change a menu's theme. Here are the same menus styled with different themes.
- Previewing Themes
Refer to the Theme Colors section of this manual to see the range of colors that are available among the preset themes in color chart format. Tip! If you set the background color of the preview area, the color charts will be displayed with the same background color.The bottom area of the Themes tab contains a preview of the currently selected theme. Treat this as an approximation only; always check the final result in a browser.Use the color select button in the top right corner of the preview area to set the background color so you can preview your chosen theme colors against the background color of your web page.
Use the Set Label button
to
open a dialog box that allows you to change the text that is displayed
in menu items in the preview area. This helps you decide the size of
the menu items you will need to accommodate your menu labels.
- Multi-level Themes.
More precisely, if no theme is defined for a particular menu level then it inherits the theme settings of its nearest ancestor.The built-in preset themes are defined for only one level. Whenever a single level theme is used with a multi-level menu, all the submenus use the same theme as the main menu.If you want to use different style settings at different levels of menu then you can assemble your own theme. To assemble a theme you can use the Import Level button
to
copy the settings of a level in another (or the same) theme.
- LEDs
A LED is an image (optional) that is used for highlighting parent menu items (i.e. items that open a submenu). When the cursor is moved over a parent menu item the LED changes color. This is achieved by having 2 image files corresponding to the normal and highlighted states of the LED.Although Menukit can provide a pair of default image files, you will probably want to supply your own images that match your chosen theme colors.
You can import your own image files into a theme using the 2 browse buttons. These are visible on the Themes tab only when the Preview Parent button is in the Down position:
Use the 'Preview parent' button
to
toggle LED's on/off in the preview area.
- Create a Multi-level Theme
To create a new theme, start by making a copy of an existing theme.While on the Themes Tab, select theme Red16.Press the Save As... button
and
type over the text "Red16(1)" to give the new theme whatever name you
want.
At this stage you may, if you want to, make changes to the dimensions, colors, etc.
Press
to
create a new level. Enter 1 and press OK.
Make sure the new level, Level 1, is selected in the "Level" drop-down menu. By default, the new level inherits the settings of the level above it. Again, you may make any changes you want to the settings.
In this case, we will copy the settings from a different theme. Press
Select "Vertical Flyout" for Type and "Main menu" for Level in the dialog that opens and then select "Blue7" from the list of themes. Press Import.
You now have a theme with 2 levels. If you use this to style a menu that has more than 2 levels then the submenus at level 1 and below will have the settings that you defined here for Level 1.
You can continue as above to define more levels for this theme.
