View Full Version : Spry menu text color

11-07-2007, 01:07 PM
I have built a spry menu successfully but want to customize it as follows: I want the text for the menu item corresponding to the current page to be a different color to the other items. I have tried applying a class style to the text but it seems to have no effect.

Can anyone please help?

11-07-2007, 02:08 PM
You're doing something wrong. Setting a class to the nav should work.

Any more info>?

11-07-2007, 04:12 PM
Hi and thanks for responding. What I did was to select the word (in this case 'Home', default color blue)), go to the Properties Inspector and choose a color (red) from the picker. DW then created a style with default name Style 1 and entered it in the code as below:

<div id="menubar">
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="#" class="style1">Home</a> </li>
<li><a href="#">About Us</a></li>
<li><a href="#">Programme</a></li>
<li><a href="#">Committee</a> </li>
<li><a href="#">Competitions</a></li>
<li><a href="#">Membership</a></li>
<li><a href="#">Newsletter</a></li>
<li><a href="#">Exchange Packet</a></li>
<li><a href="#">Library</a></li>

However, the word 'Home' has not changed color in DW or when previewed in Firefox.

Any ideas? Just occurred to me while writing this that the new style is in the page header whereas the menubar of course has its own spry style sheet. I wonder if that's an issue?

11-07-2007, 05:51 PM
For links you need to set style for all pseudo states: link, visited, hover and active.

This bit of code should work on all your links:
#menuBar1 a:link {color: red;}
#menuBar1 a:visited {color: red;}
#menuBar1 a:hover {color: #036;}
#menuBar1 a:active {color: red;}

Adjust as needed.

11-09-2007, 09:20 PM
Thanks for that but I only want the word 'Home' to be red, not all the menu items