Changing the Colours of a Horizontal Spry Menu Bar
There are three stages to adjusting the colours for a horizontal menu bar:
-
Changing the normal background and font colours
-
Changing the colour for menu items when moused over
-
Adding borders to the menu items to make them look like buttons
The following instructions use the colours shown in the examples of styled menu bars. Use your own choice of colours if you're incorporating the menu bar into your own design.
Changing the normal background and font colours
-
Scroll down to the Design Information section in the style sheet. All the changes are made here.
-
In the
ul.MenuBarHorizontal astyle rule, change the value ofbackground-colorfrom#EEE(light grey) to#A3AAC6(light mauve). -
In the same style rule, change the value of color from
#333(dark grey) to#FFF(white).
Changing the colour for menu items when moused over
-
The next two style rules use the same colours, so it makes sense to combine them. The default rules look like this:
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus { background-color: #33C; color: #FFF; } /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible { background-color: #33C; color: #FFF; } -
Type a comma after
a:focusat the end of the first line, and delete from the opening curly brace to the end of the comment. The result should look like this:ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus, ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible { background-color: #33C; color: #FFF; } -
Change the value of
background-colorfrom#33C(royal blue) to#7A85AD(dark mauve). -
Change the value of
colorfrom#FFF(white) to#333(dark grey).
Adding borders to the menu items
-
The default style rules put a light grey border on the submenus with the following style rule:
ul.MenuBarHorizontal ul { border: 1px solid #CCC; } -
This border won't be needed when you add your own. Rather than deleting this rule, it's a good idea to comment it out. This will remind you how to reapply the border to the submenus if you decide to change the design at a later stage. Surround the style rule with CSS comment tags like this:
/* ul.MenuBarHorizontal ul { border: 1px solid #CCC; } */ -
To make the menu items look like buttons, you need to add the different coloured borders to the rule that styles the links,
ul.MenuBarHorizontal a. The border needs to be the same width and style on all sides, so add the following property to theul.MenuBarHorizontal astyle rule:border: 2px solid; -
Use the
border-top-color,border-right-color,border-bottom-color, andborder-left-colorproperties to add the colours. The top and left values should be a lighter colour than the background-color. The right and bottom values should be darker. After the changes, the complete style rule should look like this:ul.MenuBarHorizontal a { display: block; cursor: pointer; background-color: #A3AAC6; padding: 0.5em 0.75em; color: #FFF; text-decoration: none; border:2px solid; border-top-color:#C4C9DB; border-right-color:#565968; border-bottom-color:#565968; border-left-color:#C4C9DB; }
Changing the spacing inside the menu items
The ul.MenuBarHorizontal a style rule adds 0.5em of padding at the top and bottom of each menu item, and 0.75em on each side. This creates a space between the text and the edge of the menu item. If you want to reduce the height of the menu items, adjust the padding property by changing 0.5em to something like 2px.
That completes the styling of a horizontal menu bar. There's a separate tutorial that shows you how to centre the menu bar. The next page shows how to change the styles in a vertical menu bar.
Back
