Create New CSS Skin

With MX CSS Menus you can create new CSS skins for your menu starting from one of the 23 default skins, and then altering it. The steps you have to take to do this are the following:

1. Generate a CSS menu in page, either static or dynamic, and set for it the skin that you want to change.

2. Access the CSS Skin Editor from the corresponding Property Inspector or from the Database-driven CSS Menu server behavior interface (depending on the menu type).

3. By clicking the Save As button on the right, the Create New CSS Skin dialog box opens. Configure its user interface as shown below:
   
   
                                        

4. • The Source skin display item informs you of the default skin that you will alter in order to create a new one.

   • In the New skin name text box enter the name for the new skin.

   • The three buttons on the right offer the next functionalities:

   • • Click OK when you are done configuring the dialog box.

     • Click Cancel to exit without the new settings to be applied.

     • The Help button brings you to this help page.

4. After clicking OK, if you had accessed the CSS Skin Editor from the:

5. • Property Inspector (static menu), you will be asked if you want to use the new skin for the your menu:
     
     
                                         
     If you click Yes, you can see the changes made in the  CSS Skin Editor in the live translator preview.

   • Database-driven CSS Menu server behavior (dynamic menu), you will not be asked if to use the new skin for the menu. You will have to edit the server behavior and select the new skin. Only after clicking OK in the server behavior interface will the skin be applied to the menu and you will be able to see the updated translator.

You will notice the new skin among the options in the Skin drop-down menu from the wizards/server behavior/property inspector dialog boxes.

Consult the How to customize your menu by using the CSS Skin Editor and How to create your own skin by editing the CSS file tutorials to learn how to edit the default CSS skins or how to create new CSS skins.