editing menu background images
This tutorial will teach you how to edit the gradient background image for an existing Pop Menu Magic vertical menu set to the Frosty Blue Menu Style. You'll change the gradient background image from blue to green - then back to the original blue.
A default Frosty Blue Vertical menu looks like this:
Insert the Frosty Blue gradient image on your page
-Open your Files panel (F8) and locate the p7pm folder in the same folder that contains the page you are currently working on.
-Expand the p7pm folder, then expand the img folder inside it.
-Locate and select p7PM_frost.jpg
-Drag the p7PM_frost.jpg onto your page and into a table cell or DIV.
-Right-click (Control-Click Mac) the image and choose Edit with Fireworks.
Note: If you do not have Fireworks, choose Edit With and then browse to your preferred image editing application.
Fireworks may present you with a confirmation window:
-Click the button labeled Use This File.
-Fireworks will load the image into a new document that contains a special toolbar with a Done button at the top and a Dreamweaver logo next to it.
-Select the image and click the plus (+) sign above the Effects panel on your Property Inspector.
-Choose Adjust Color > Hue/Saturation...
The Hue/Saturation window will open.
-Set the Hue value to -120.
Note:To see your changes previewed, you will need to toggle the Preview checkbox. If you use the slider controls you will see a preview only when you release the slider control.
-Click OK
-Click the Done button at the top of your Fireworks document to apply your changes and return to Dreamweaver.
-Frosty Blue is now Minty Green.
Edit background colors to match new image hue
Whenever we use image backgrounds on menus, we set the background color of the menu to a shade that closely matches the image. Why? On slower connections there may be a delay between the time the menu appears on the page and the time it takes for the browser to download the background image. During this brief span, the menu will be close to its eventual color and any perceived changes will be subtle.
The CSS rule you will need to edit is named #p7PMnav, #p7PMnav ul
-Choose Window: CSS Styles (Shift + F11) to open Dreamweaver's CSS Styles panel.
-Find the #p7PMnav, #p7PMnav ul rule and click once to select it.
-With the rule still selected, click the edit icon along the bottom of the CSS Panel to open Dreamweaver's CSS Editor.
-Switch to the Background Category.
-Click the color square to the left of the Background color box.
Your cursor will change to an eyedropper.
-Click the eyedropper towards the middle of your menu to select a shade of green.
-Click OK to apply your changes and close the CSS Editor.
Reverting back to the original Frosty Blue gradient
If you don't like your new gradient, you can revert back to the original quite easily.
-Open your Files panel again and locate the p7pm folder in the same folder that contains the page you are currently working on.
-Expand the p7pm folder, then expand the img folder.
-Locate and select p7PM_frost.jpg
-Press the Delete key on your keyboard to delete the image file.
-Choose Modify > Studio VII > Modify Pop Menu Magic by PVII to open the PMM UI in Modify mode.
The Modify PVII Pop Menu Magic UI will open.
-Simply Click OK without making any changes.
Your menu is now blue again.
Don't forget to Find the #p7PMnav, #p7PMnav ul rule again and change the background color back to a blue shade that matched the default blue gradient image.
Next: Home