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:
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:
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.
-With the #p7PMnav a rule still selected, click the edit icon along the bottom of the CSS Panel to open Dreamweaver's CSS Editor.
The CSS Editor will open and the Type Category screen will be active.
-Change the color code from #666666 to #FFFFFF.
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.
-Click OK to apply your change and close the Editor.
Your menu item text is now white and the background is orange.
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.
-With the rule still selected, click the edit icon along the bottom of the CSS Panel to open Dreamweaver's CSS Editor.
The CSS Editor will open and the Type Category will be active.
-Change the color code from #FFFFFF to #FF6600.
-Switch to the Background Category.
-Change the Background color code from #0066FF to #FFFFFF.
-Click OK to apply your change and close the Editor.
-Preview in a browser to see the changes:
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