Answer:

Universal CSS Navigation Menu comes with a complete range of CSS designs to style its look and feel. Select one of the preinstalled designs to make the Menu fit into your site better.
Would you like to create a whole new design and also save it for future use, just follow the tutorial below.

The creation of a new design should be done in 3 steps:

1. Copy existing design
2. Edit new design
3. Save and place new design
   
   

1. Copy existing design

The easiest way to create a new design and save it for future use, is to start by editing an existing design. First have a look at the designs that are already integrated in Universal CSS Navigation Menu. Find the one that comes the closest to what you would like to create.
Next use Windows Explorer to go the the location where all of the standard designs are saved. Here is a list of locations depending on DW version and OS:

• For Dreamweaver CS4:
  
  
• Vista: C:\Users\<username>\AppData\Roaming\Adobe\Dreamweaver CS4\<language>\Configuration\Shared\DMXzone\CSS Navigation Menu\Styles\
• XP: C:\Documents and Settings\<username>\Application Data\Adobe\Dreamweaver CS4\<language>\Configuration\Shared\DMXzone\CSS Navigation Menu\Styles\
• MAC: MacHD : Users : <username> : Library : Application Support : Adobe : Dreamweaver CS4 : <language> : Configuration : Shared : DMXzone : CSS Navigation Menu : Styles :

• For Dreamweaver CS3:
  
  
• Vista: C:\Users\<username>\AppData\Roaming\Adobe\Dreamweaver 9\Configuration\Shared\DMXzone\CSS Navigation Menu\Styles\
• XP: C:\Documents and Settings\<username>\Application Data\Adobe\Dreamweaver 9\Configuration\Shared\DMXzone\CSS Navigation Menu\Styles\
• MAC: MacHD : Users : <username> : Library : Application Support : Adobe : Dreamweaver 9 : Configuration : Shared : DMXzone : CSS Navigation Menu : Styles :

• For Dreamweaver 8 and below:
  
  
• Vista: C:\Users\<username>\AppData\Roaming\Macromedia\Dreamweaver <version>\Configuration\Shared\DMXzone\CSS Navigation Menu\Styles\\
• XP: C:\Documents and Settings\<username>\Application Data\Macromedia\Dreamweaver <version>\Configuration\Shared\DMXzone\CSS Navigation Menu\Styles\
• MAC: MacHD : Users : <username> : Library : Application Support : Macromedia : Dreamweaver <version> : Configuration : Shared : DMXzone : CSS Navigation Menu : Styles :

Be aware that folders AppData in Vista and Application Data in Win XP are normally hidden. These need to be made unhidden.

In this Styles folder every standard design is in a seperate folder. Copy the folder of the design that will be the startingpoint for the new design. Paste it in the same Styles folder. Now rename the folder to describe the new design. Make sure the name does not contain any spaces or special characters. Open the folder and rename the CSS file inside the folder. This name should be exactly the same as the name of the folder. Next, open the CSS file in Dreamweaver. Every style that is in this CSS file, contains the stylename. Again, this name is exactly the same as the name of the folder and the CSS file. Do a search and replace to rename all the existing stylenames with your new name. After that is done, save the CSS file.

2. Edit new design

To get the new design looking exactly like it should be, the CSS styles should be changed. The best way to do this, is by applying the new design to a Menu, change the styles and see what effect they have.

To start, create a new page, save it and add a Navigation Menu to it. In the Design dropdown menu on the Advanced tab, the new design should appear. Select it and close the extension window. All the files for the new style will be copied to a new folder in the Styles\dmxNavigationMenu\ folder. This folder will have the name that was previously set. Browse to that folder, and open the CSS file that is inside.

With the page holding the Menu and the CSS file being open, it is now easy to edit the CSS file. This can be done best by using Dreamweaver's CSS Styles floater.

After editing a specific style, see what it looks like in the Menu within Dreamweaver or using a Live View. If editing the style was done with complete satisfaction, save the CSS file.
At the moment, this design can only be used within the current website.

3. Save and place new design

To be able to use this design in other (future) websites as well, it needs to be copied to the general Styles folder, as seen in step 1. Use Windows Explorer to go to the location of the new design. This should be in the root of your website in the Styles\dmxNavigationMenu\ folder. Copy the complete folder and paste it into the general Styles folder. Overwrite the folder and files with the same name, as this was only used to create the new design.

With this new design in place, it is now available to use in all websites that will be created with Dreamweaver.

Patrick Julicher

Patrick started developing websites at the age of 25, only using HTML and building simple websites. Through the years his passion for designing and developing grew, and his career moved in that direction in the year 2004, when he decided to try and get a job in ICT and Web Development.
He got this chance at WE ICT, based in Nijmegen, The Netherlands. For the first couple of years he combined network management for customers with creating database-driven websites in ASP. Since 2008 his main work is on the developing part.
While ASP is still his favorite language, he's slowly trying to dive into ASP.NET and discover all of the possibilities.

See All Postings From Patrick Julicher >>