How to change colour of Tabs on navigtion Bar Iblog2

Firebug is a big help when you are trying to edit CSS.

There is a background on the navbar that you could edit to change your whole BG color:

#nav {
background:url("images/navgrad-normal.png") repeat-x scroll left top #D5D5D5;
font-size:12px;
height:33px;
}

To edit just the links you would have to add a BG color to the list or anchor items:

#nav ul li {
background:url("images/navgrad-normal.png") repeat-x scroll left top #D5D5D5;
}

To edit a specific link, you would have to use that link’s ID, which is added dynamically as a class to each list item:

#nav ul li.page-item-2 {
background:url("images/navgrad-normal.png") repeat-x scroll left top #D5D5D5;
}

Thanks – I’ll give it a go.

I have been using Firebug which is great but I can’t work out how to add dynamically as a class?

Can you help?

Each one of the links in the navbar is inside a list item tag. Each list tag has at least two classes, page_item and page-item-(Page ID).

<li class="page_item page-item-1"><a href="#">Page 1</a></li>
<li class="page_item page-item-2"><a href="#">Page 2</a></li>

So you could change the background of both of those links like this:

#nav ul li.page-item {
background:url("images/all-li.png") repeat-x scroll left top #D5D5D5;
}

Or you could change the background of just “Page 1” like this:

#nav ul li.page-item-1 {
background:url("images/page1-li.png") repeat-x scroll left top #D5D5D5;
}

And you could change the background of just “Page 2” like this:

#nav ul li.page-item-2 {
background:url("images/page2-li.png") repeat-x scroll left top #D5D5D5;
}