vasudev
Member
I am trying to change the color of individual items in my navigation menu. I want to have a separate color for each item and when I tried to make the changes to the style css, any changes made affected all the items.
Is there a way to style each item individually? If so, how can I do that?
Hi,
just an example for a different text color for the first item:
div#menu li.page-item-2 a {
color:red;
}
Use FireFox and Firebug do determine page-item-xx, then you can do whatever you want with each menu item.
Cheers
Forgot one thing .. keep in mind that even page.item-2 in my example might differ from your blog.
knightinblue
Member
Hi Chris,
what if all the menu items are grouped together? How do I assign diff colors then?
Here's the menu section from my style css -
/* =Menu
-------------------------------------------------------------- */
#access {
font-size:11px;
background:#B5D1EA;
border-top:1px solid #CADEF0;
margin-top:-1px;
}
.skip-link {
display:none;
}
#menu {
padding:7px 0 8px 0;
overflow:hidden; /* clears the inner float */
}
#menu ul {
margin:0;
list-style:none;
clear:both;
}
#menu ul ul {
display:none;
}
#menu li {
display:inline;
}
#menu a {
display:block;
float:left;
margin:0 10px 0 0;
padding:1px 6px;
background:#87B5DD;
color:#fff;
border-top:1px solid #6DA5D6;
text-decoration:none;
}
#menu a:hover {
background:#5C9BD1;
color:#fff;
border-color:#3B86C7;
}
#menu .current_page_item a {
background:#5C9BD1;
color:#fff;
border-color:#3B86C7;
}
#menu a:focus {
background:#4887BD;
color:#fff;
border-color:#2772B3;
}
By the way, the code I am using in my header.php to define the menu items in my nav bar -
<div id="menu">
<ul>
<li class="page_item"><a href="http://xyz.com" title="Home">Home</a></li>
</ul>
</div>So if I want to add another menu item to the nav bar, I simply add another line, like this -
<div id="menu">
<ul>
<li class="page_item"><a href="http://xyz.com" title="Home">Home</a></li>
<li class="page_item"><a href="http://xyz.com/about" title="About">About</a></li>
</ul>
</div>How do I get the 2nd menu item - the 'About' menu item - to be a diff color from the 1st menu item (the 'Home' menu item)?
Thanks again for all your help Chris :)
Knight
In this case ... no chance! You could change <li class="page_item"> to <li class="page_item page_item_xx"> .. better .. use the built-in functionality and let WP create the menu.
knightinblue
Member
built-in functionality of wordpress? would you mind elaborating a bit?
Sounds as if you're editing the files in the thematic folder .. or .. do you use a child theme?
The original header.php (SVN Version) uses in line 54 the command <?php wp_page_menu() ?> to call WordPress' build-in "menu maker".
If you want to add a "Home" item, you can use functions.php:
function sample_menu() {
$menu = '<div id="menu">
and a line at the end of functions.php:
add_filter('wp_page_menu', 'sample_menu' );
This will bring you back to the original menu including the markup needed to style each menu item separately.
Thematic gives you the ability to change nearly everything without the need to edit the original files. You can use your own CSS file or your own functions.php in your childtheme directory to give it a complete new look and feel.
To find more about the capabilities:
http://themeshaper.com/blog/how-to-protect-your-wordpress-theme-against-upgrades/
http://themeshaper.com/blog/wordpress-theme-frameworks-child-themes-custom-theme-hooks-filters/
http://themeshaper.com/blog/custom-wordpress-hooks-filters-thematic-06/
knightinblue
Member
I was thoroughly confused/lost in the beginning, but with a little digging, was able to sort things out.
Thanks Chris!
Much appreciated :)
Knight
shanoboy
Member
I used Chris' tip and it worked fine. In my case though, I used this code:
.sf-menu li.page-item-3 a {
color:red;
}
To find out which page item belongs to each page, I had to view source and see what WP assigned to my nav item of interest.
Thanks Chris.
This topic has been closed to new replies.