PDA

View Full Version : Spry menu text color


perkin5
11-07-2007, 02: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?

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

Any more info>?

perkin5
11-07-2007, 05: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>
</ul>
</div>

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?

domedia
11-07-2007, 06: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.

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