The CSS Skin Editor allows you to modify the skin used in the current CSS menu or to create a new skin starting from the default one. Depending on the menu type (static or dynamic), the CSS Skin Editor is accessed from different locations:
If you applied the CSS Menu Wizard to create a menu, you can access the CSS Skin Editor by clicking the Edit CSS Skin button in the corresponding Property Inspector.
If you applied the Database-driven CSS Menu Wizard or Database-driven CSS Menu server behavior to create a menu, you can access the CSS Skin Editor by double-clicking the Database-driven CSS Menu server behavior in the Server Behaviors tab of the Application panel, and clicking the Edit Skin button in the Layout tab.
The dialog box that pops-up has two tabs (First level, Other levels). A list with four elements (Container, Items, Items hover, Items selected) is displayed on the left and it is visible from each of the two tabs. A different set of controls is displayed on the right for each of the four elements in the list. The four sets of controls are identical for the two tabs, but the way they are configured obviously differs. What you will read below is the description of the interface controls assuming that the First level tab is active.
Before that though, you first need to understand what the menu container and menu items are, in order to set their CSS properties. Check out the image below to see a visual representation for the menu container and items:
When the CSS Skin Editor is first opened, it displays the interface controls in the First level tab corresponding to the Container option (selected by default) from the list on the left. This set of controls allows you to set properties for the container that holds the first level menu items.
To configure the interface controls for the Container option in the First level tab, follow the instructions below:
In the Width drop-down menu specify the container border width for the first menu level: select one of the predefined values or enter a specific value. In the drop-down menu on the right, select the measurement unit in which the container border width is expressed.
From the Style drop-down menu select one of the available border styles for the first menu level container.
In the Color text box specify the container border color for the first menu level. Enter the hexadecimal code in the text box or select a color using the Color Picker button.
Note: When editing the container border properties, make sure to specify a value for each of the three attributes (width, style, color). Otherwise, if there is at least one attribute with no value set, the specified values for the other attribute(s) will not be considered either.
Click the Items option in the list on the left to continue editing the skin. This set of controls allows you to set properties for the first level menu items, when they are not mouse-hovered, nor when they are selected (normal state).
To configure the interface controls for the Items option in the First level tab, follow the instructions below:
In the Width drop-down menu specify the items width for the first menu level. In the drop-down menu on the right, select the measurement unit in which the items width is expressed.
In the Height drop-down menu specify the items height for the first menu level. In the drop-down menu on the right, select the measurement unit in which the items height is expressed.
In the Margin drop-down menu specify the items margin for the first menu level. You can enter 1 (top=bottom=right=left), 2 (top=bottom, right=left), or 4 (top, right, bottom, left) values separated by space. In the drop-down menu on the right, select the measurement unit in which the items margin is expressed.
For example, if you enter 2 5 2 10, then:
margin-top = 2px
margin-right = 5px
margin-bottom = 2px
margin-left = 10px
In the Padding drop-down menu specify the items padding for the first menu level. You can enter 1 (top=bottom=right=left), 2 (top=bottom, right=left), or 4 (top, right, bottom, left) values separated by space. In the drop-down menu on the right, select the measurement unit in which the items padding is expressed.
From the Family editable drop-down menu select the font family for the items on the first menu level. You can edit the font list and add your preferred font family.
In the Size editable drop-down menu specify the font size for the items on the first menu level: select one of the predefined values or enter a specific value. In the drop-down menu on the right, select the measurement unit in which the items font size is expressed.
From the Weight drop-down menu select the font weight for the items on the first menu level.
In the Color text box specify the font color for the items on the first menu level. Enter the hexadecimal code in the text box or select a color using the Color Picker button.
In the Width editable drop-down menu specify the border width for the items on the first menu level: select one of the predefined values or enter a specific value. In the drop-down menu on the right, select the measurement unit in which the items border width is expressed.
From the Style editable drop-down menu select one of the available border styles for the first menu level items.
In the Color text box specify the border color for the items on the first menu level. Enter the hexadecimal code in the text box or select a color using the Color Picker button.
Note: When editing the items border properties, make sure to specify a value for each of the three attributes (width, style, color). Otherwise, if there is at least one attribute with no value set, the specified values for the other attribute(s) will not be considered either.
In the Background color text box specify the background color for the items on the first menu level. Enter the hexadecimal code in the text box or select a color using the Color Picker button.
In the Background image text box specify the background image for the items on the first menu level. Enter the site relative path to the image or use the Browse button to locate it in the site structure.
Click the Items hover option in the list on the left to continue editing the skin. This set of controls allows you to set properties for the first level menu items, when they are mouse-hovered (hovered state).
To configure the interface controls for the Items hover option in the First level tab, follow the instructions below:
In the Margin drop-down menu specify the margin for the mouse-hovered items on the first menu level. You can enter 1 (top=bottom=right=left), 2 (top=bottom, right=left), or 4 (top, right, bottom, left) values separated by space. In the drop-down menu on the right, select the measurement unit in which the mouse-hovered items margin is expressed.
In the Padding drop-down menu specify the padding for the mouse-hovered items on the first menu level. You can enter 1 (top=bottom=right=left), 2 (top=bottom, right=left), or 4 (top, right, bottom, left) values separated by space. In the drop-down menu on the right, select the measurement unit in which the mouse-hovered items padding is expressed.
In the Size drop-down menu specify the font size for the mouse-hovered items on the first menu level: select one of the predefined values or enter a specific value. In the drop-down menu on the right, select the measurement unit in which the mouse-hovered items font size is expressed.
From the Weight drop-down menu select the font weight for the mouse-hovered items on the first menu level.
In the Color text box specify the font color for the mouse-hovered items on the first menu level. Enter the hexadecimal code in the text box or select a color using the Color Picker button.
In the Background color text box specify the background color for the mouse-hovered items on the first menu level. Enter the hexadecimal code in the text box or select a color using the Color Picker button.
In the Background image text box specify the background image for the mouse-hovered items on the first menu level. Enter the site relative path to the image or use the Browse button to locate it in the site structure.
Click the Items selected option in the list on the left to continue editing the skin. This set of controls allows you to set properties for the first level menu items, when they are selected (selected state).
To configure the interface controls for the Items selected option in the First level tab, follow the instructions below:
In the Margin drop-down menu specify the margin for the selected items on the first menu level. You can enter 1 (top=bottom=right=left), 2 (top=bottom, right=left), or 4 (top, right, bottom, left) values separated by space. In the drop-down menu on the right, select the measurement unit in which the selected items margin is expressed.
In the Padding drop-down menu specify the padding for the selected items on the first menu level. You can enter 1 (top=bottom=right=left), 2 (top=bottom, right=left), or 4 (top, right, bottom, left) values separated by space. In the drop-down menu on the right, select the measurement unit in which the selected items padding is expressed.
In the Size drop-down menu specify the font size for the selected items on the first menu level: select one of the predefined values or enter a specific value. In the drop-down menu on the right, select the measurement unit in which the selected items font size is expressed.
From the Weight drop-down menu select the font weight for the selected items on the first menu level.
In the Color text box specify the font color for the selected items on the first menu level. Enter the hexadecimal code in the text box or select a color using the Color Picker button.
In the Background color text box specify the background color for the selected items on the first menu level. Enter the hexadecimal code in the text box or select a color using the Color Picker button.
In the Background image text box specify the background image for the selected items on the first menu level. Enter the site relative path to the image or use the Browse button to locate it in the site structure.
As you can notice, there is another set of controls in the CSS Skin Editor interface that is displayed no matter which tab and which option in the list are selected. These controls offer the next functionalities:
The Skin name display item indicates the skin that you are currently editing.
The Layout display item indicates the layout currently applied to your menu.
Click the Apply Changes button if you want to make the changes you performed in the editor available for the current skin. You will be asked for confirmation if you really want to change the default skin:
Click the Save As button if you want to create a new skin starting from the current one. Configure the dialog box that pops-up as explained here, and then continue editing the new skin you just named.
Click Close to exit the skin editor dialog box. If there are changes you haven't saved, you will prompted about this:
The Help button brings you to this help page.
Check out the How to customize your menu by using the CSS Skin Editor tutorial to learn how to visually edit the menu CSS skin using the CSS Skin Editor.
Note: If you manually modify the .css file, some of the changes might not be recognized by the CSS Skin Editor, but using the editor will not automatically overwrite those changes unless you specify it to (by entering other/new values). Say in the .css file you set the left-border for items on the first level to a 2-pixel width (and there is no border on the other three sides). If in the editor you set the items border to 1 pixel, you will now have a border on all four sides, having a 1-pixel width. Check out the How to create your own skin by editing the CSS file tutorial to learn how to create your own skin by editing the .css file.