Create a new Menu design and save for future use
Customize the Universal CSS Navigation Menu to fit your website perfectly!
Question:
How can I add my own style for Universal CSS Navigation Menu to the list of designs?
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:
- Copy existing design
- Edit new design
- 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.
Comments
Be the first to write a comment
You must me logged in to write a comment.