If you want to visually edit the currently skin used for your menu, you can do so by using the CSS Skin Editor. Consider the menu you created in the Generate a CSS menu into an HTML site built with Dreamweaver templates tutorial. Open the html_tmp.dwt template file from the site you built. Click inside the menu translator, and in the Property Inspector that displays, click the Edit CSS Skin button to open the skin editor. Notice how the menu translator behind the CSS Skin Editor dialog box changes, displaying the second level as well (sub-items for the first parent item on the first level):
Follow the instructions below to customize the arktic_orange skin used for the menu (notice the live updates in the menu translator behind the skin editor dialog box):
Change the font family and font size for the first level items, in the normal state:
In the First level tab, the Items option on the left, configure the following properties:
Select the Arial, Helvetica, sans-serif font in the Family drop-down menu.
Enter 11 (pixels) in the font Size editable drop-down menu.
Change the font size, weight and color for the first level items, in the selected state (there is no live preview for the selected state):
In the First level tab, the Items selected option on the left, configure the following properties:
Enter 13 (pixels) in the font Size editable drop-down menu.
Select the bold option in the Weight drop-down menu.
Enter #F0970E in the font Color text box.
Set a dotted brown border for the sub-menus container:
In the Other levels tab, the Container option on the left, configure the following properties:
Set the border width to 2 pixels.
Select the dotted option in the border Style drop-down menu.
Enter #532D11 in the border Color text box.
Change the background color for other-than-first level items, in the hovered state:
In the Other levels tab, the Items hover option on the left, configure the following properties:
Enter #FFBF80 in the Background color text box.
You can click the Apply Changes button on the right to update the arktic_orange skin. You will be asked for confirmation to overwrite/alter the default skin, but it is better not to alter it - you don't know when you'll need it later on, then again, you can always generate the default .css files in the includes folder (by creating a CSS menu using that default skin). So click the Save As button to save the customized skin under a new name.
In the Create New CSS Skin dialog box that opens, name the new skin - my_orange_skin:
To apply the new skin to the menu, click Yes in the dialog box that pops-up after clicking OK in the Create New CSS Skin one:
Notice how the menu translator is updated in page. Close the CSS Skin Editor dialog box, save the page, upload it to the server, and preview the CSS menu in browser:
The font size for the selected menu items on other-than-first menu levels is bigger than you wanted (see ImpAKT, MX Send E-mail), and the font weight is more intense as well. This happened because the font size (13) and weight (bold) for selected items on the first level (these properties were set above) were inherited for other levels. To make the size smaller and the weight lighter, open the CSS Skin Editor dialog box, and in the Other levels tab, the Items selected option on the left, configure the following properties:
Enter 11 (pixels) in the font Size editable drop-down menu.
Select the lighter option in the Weight drop-down menu.
Click the Apply Changes button on the right, then the Close one to close the editor dialog box.
After saving and uploading the page to the server, the CSS menu should look like this in browser:
To make it look more elegant, change the offset for sub-menus on the 3rd level (and higher levels, of the case). Click the Edit Menu Items button in the Property Inspector, and in the Sub-items tab of the dialog box that opens, configure the following options:
Set the Horizontal offset for sub-menus on the 3rd and higher levels to -17 pixels.
Set the Vertical offset for sub-menus on the 3rd and higher levels to 9 pixels.
After following all the steps above, the CSS menu should look like this in browser (select the Home item on the first level so that you can see its font color set above):
Compare the edited/new skin with the original one here, and notice the differences and how easy it was to get there!