How to create your own skin by editing the CSS file

If you have some knowledge about using the CSS descriptive language and if want to create a new CSS skin (or change a little one of the default ones), you can do it by editing the corresponding .css file (and not by using the CSS Skin Editor, as shown here).

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 displayed Property Inspector, change the menu skin to corporate_red - this is the source skin from which you want to start when creating your own CSS skin. Notice in the \includes\cssmenus2\skins site folder the corporate_red folder automatically generated as a result of your skin selection.

Before creating a new skin starting from this one, check out the menu in browser:

Back in the Dreamweaver page, click inside the menu translator, and then the Edit CSS Skin button in the Property Inspector. In the CSS Skin Editor dialog box that opens click the Save As button on the right to save the skin under a new name and to alter it from there. Configure the Create New CSS Skin dialog box that pops-up as shown below:

1. In the New skin name text box enter pretty_red.

2. Click OK to create the new skin. When asked if to use the skin for your menu, click Yes.

Notice the generated pretty_red folder in \includes\cssmenus2\skins. Open the horizontal.css file from the \includes\cssmenus2\skins\pretty_red folder, and perform the following changes (in bold):

• Change the border for the items on the first menu level:
  
  .pretty_red li
  {
  background-color: #FFFFFF;
  border-left: solid 2px #757575;
  border-bottom: solid 2px #757575;
  margin-right: 30px;
  width: auto;
  }
                                

• Change the border style for items on the 2nd, 3rd, etc. levels:
  
  .pretty_red ul li
  {
  border-bottom: dotted 1px #757575;
  border-left: dotted 1px #757575;
  margin: 0px;
  width: 168px;
  }
                                 

• Change the background color for hovered items on other-than-first levels:
  
  .pretty_red ul li.hover {
  background-color: #E6E6E6;
  }
                                 

• Change the border width, style, and color for selected menu items (on any level):
  
  .pretty_red li.selected {
  border-left: solid 2px #DD001A;
  border-bottom: solid 2px #DD001A;
  }

This is how the menu should look when using the pretty_red skin:

If you then try to edit the new skin with the CSS Skin Editor, you will see that some of these options are not visible in the interface controls there (e.g. border-left). If you enter new values in the editor (e.g. you will see the border text box blank), they will "overwrite" (cancel) the values set in the .css file.

You can try more colors, border styles, font properties etc. to obtain the perfect skin for your CSS menu!