Creating the new skin based on a template

If you want to create your own skin, you do not have to reinvent the wheel. The approach to use is to duplicate an existing, working skin, and alter it to suit your own needs. This is possible, as all the elements that define how the menu looks like are stored in image files and the CSS file. The process is called creating the skin from a base template.

When using this method, you have to follow the steps:

1. Make a copy of the folder into which the original skin is stored. Name the folder with the new skin name.
2. Replace all occurences of the old skin name in the CSS file.

Doing all this by hand can lead to mistakes, an occurence of the old skin name can be forgotten, and besides it takes time. That's why you'll use the second method: the Create new Skin server behavior offered by MX CSS Dynamic Menus. This method is used in what follows to create a new skin based on the arktic_blue included one.

This way, to create the new skin, you'll have to follow the next steps:

1. Open Macromedia Dreamweaver and load a file, so that the Server Behaviors tab becomes active.
2. Click the Plus (+) button in the Server Behaviors tab. If the tab is not visible, open it from Window-> Server Behaviors.
3. In the pop-up menu, select the InterAKT menu entry, and then the Create new skin option.
4. Configure the dialog box that opens as follows:
   • In the Select skin to copy drop-down menu, select arktic_blue
   • In the New skin name enter tutorial_skin.
5. The completed dialog box should now look as follows:
   
   
                             
6. Click on the OK button to apply the server behavior and create the tutorial_skin skin.

Now, after applying the server behavior, you have the new skin's folder created automatically, and also, all occurences in the CSS file have been changed to match the new name.

The new skin has already been copied in your site's local folder, as you can see in the next image. If the new skin does not appear in the folder list, click the refresh button on the File tab toolbar:

If you decide to use another name instead of the tutorial_skin used here, you will have to keep changing it everywhere where it is mentioned in this tutorial.

In the skin folder (tutorial_skin), you will find the following components:

• the images used in the menu; since the skin duplicated is rather complex, there are more images then the ones we need. The images are stored in the img folder ;
• the menus.css file - this stores the characteristics for the horizontal, vertical and tab menu layout, for this particular skin. This is the file which will get edited later in this tutorial.

In what follows, you will replace some of the images in the img folder with new ones, so that the skin will look different, and you'll also alter the menus.css files. This way, all other menu elements (borders, alignement, margins, colors) will match the new skin.

Also, since when applying the extension in dreamweaver a translator will be placed in page, you'll have to create/copy a representative image in the preview_skins folder. This folder can be found inside your local site, in the includes/cssmenus/skins folder.

The next step to take when creating the skin, is to cut the original image into the pieces to be used.