PVII Pop Menu Magic

User Guide Home :

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:

The default Frosty Blue menu

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

Locating the Frosty Blue image

-Drag the p7PM_frost.jpg onto your page and into a table cell or DIV.

Inserting the Blue image into your table cell

-Right-click (Control-Click Mac) the image and choose Edit with Fireworks.

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:

Fireworks 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.

The Fireworks - Dreamweaver edit window

-Select the image and click the plus (+) sign above the Effects panel on your Property Inspector.

-Choose Adjust Color > Hue/Saturation...

Opening the Hue/Saturation dialog

The Hue/Saturation window will open.

-Set the Hue value to -120.

Changing the Hue value

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.

Click Done to apply your changes

-Frosty Blue is now Minty Green.

Menu is now 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.

Locating the target rule in CSS panel

-With the rule still selected, click the edit icon along the bottom of the CSS Panel to open Dreamweaver's CSS Editor.

Invoking the 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.

Picking color with eyedropper

-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

Selecting the Frost image in Files panel

-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.

The PMM Modify UI

-Simply Click OK without making any changes.

Your menu is now blue again.

The image reverts to default blue

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