PVII Pop Menu Magic

User Guide Home :

editing colors and borders - part 1

Menu item colors and borders apply to all links in your menu and are controlled with CSS. This tutorial will teach you how to change the menu item text and background colors for an existing Vertical menu that uses the Basic menu style.

The Basic menu style produces a white menu, with medium gray text:

The default Basic menu

When you roll over a menu item (in a browser), its background color changes to blue and the text color changes to white - as depicted here:

Hovering over the menu in a browser

What changes will you make?

You'll edit the colors so that the menu items start out with a deep orange background and white text, then change to a white background and orange text on hover (rollover).

Changing the default state menu item colors

You'll use Dreamweaver's built-in CSS editor to edit the default state menu item colors.

Note: Default state colors apply to links as they display in the absence of any user interaction.

The CSS rule you will need to edit is named #p7PMnav a and is contained in the p7pmv0.css CSS file.

-Choose Window: CSS Styles (Shift + F11) to open Dreamweaver's CSS Styles panel.

-Find the #p7PMnav a rule and click once to select it.

The CSS Panel with target rule selected

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

Invoking the CSS Editor

The CSS Editor will open and the Type Category screen will be active.

-Change the color code from #666666 to #FFFFFF.

Changing color value in Editor

Note: Line height must remain set to 1 as it is important to the proper functioning of the menu in some browsers. Decoration value should remain set to none.

-Switch to the Background Category.

-Change the Background color code from #FFFFFF to #FF6600.

Changing Background Color in Editor

-Click OK to apply your change and close the Editor.

Your menu item text is now white and the background is orange.

Basic menu after editing color

Changing the hover, active, focus menu item colors

You'll use Dreamweaver's CSS editor to edit the hover, active, and focus state menu item colors.

Note: Hover state colors apply to links while your mouse is hovered over them. Active state colors appear when you click a link and persist until you release your mouse button. Focus state colors apply to links that have been reached when you use your keyboard's tab key.

The CSS rule you will need to edit is a compound selector rule named:
#p7PMnav a:hover, #p7PMnav a:active, #p7PMnav a:focus

Note: Compound selectors group together multiple selectors separated by commas. This is an efficient way to write a rule when multiple selectors are to share the same values.

-Choose Window: CSS Styles (Shift + F11) to open Dreamweaver's CSS Styles panel.

-Find #p7PMnav a:hover, #p7PMnav a:active, #p7PMnav a:focus and click once to select it.

The CSS Panel with target rule selected

-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

The CSS Editor will open and the Type Category will be active.

-Change the color code from #FFFFFF to #FF6600.

Changing text color value in Editor

-Switch to the Background Category.

-Change the Background color code from #0066FF to #FFFFFF.

New Color value in Editor

-Click OK to apply your change and close the Editor.

-Preview in a browser to see the changes:

Basic menu in browser preview after editing color

The changes look good - except that when you hover over the Trigger link, it turns blue, with gray text and remains that way while its sub-menu is visible. In Part 2 of this tutorial, you'll learn how to edit the Trigger colors to better match your new color scheme.

Next: Home