WordPress.org

1. sual
   Member
   Posted 2 years ago #

   I am just starting my blog & I want to change the colours of the tabs/buttons on the navigation bar for example Home - Blue, About Us - Yellow, Services - Pink.

   Is it possible to do it in this theme?

   I have looked at the CSS and tried to change the colour code but I have only managed to change the text colour (I am new to this).

   If I can't do it in this theme can anyone recommend one where I can make the changes?

   Any help really appreciated!

   Thanks

2. JLeuze
   Member
   Posted 2 years ago #

   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;
   }

3. sual
   Member
   Posted 2 years ago #

   Thanks - I'll give it a go.

4. sual
   Member
   Posted 2 years ago #

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

   Can you help?

5. JLeuze
   Member
   Posted 2 years ago #

   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;
   }

Topic Closed

This topic has been closed to new replies.