Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

A different color for each menu tab

Old Feb 1, 2011, 10:44 AM
Pierre's Avatar
36 posts · Aug 2010
Montpellier, France
Hi all

Thanks for your amazing work here.

I need to find a way to put a different color on each of my menu tab.

If you were also kind enough to give me the code + where to put it for :
permanent state
selected state
hover state

website : www.monwe.fr

Thanks a lot.
I am selling this option right now, so I'll be glad to share some of it.


Old Feb 1, 2011, 11:03 AM
juggledad's Avatar
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
1) view the site
2) use the browsers option to view the source
3) locate the menu area of the code
4) identify a unique ID or CLASS for each menu item
5) use that ID or CLASS to construct a CSS Selector and the CSS rule to change the color
6) put the code in the 'CSS Inserts' option

a great reference for CSS is w3schools.com/css
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
Old Feb 1, 2011, 11:25 AM
Pierre's Avatar
36 posts · Aug 2010
Montpellier, France
All that done :

1- view the site OK
2- use browser option to view the source : OK (using firebug)
3- locate menu area : OK
4- id unique Class for menu item : OK (see hereunder)
5- could you give an example on line 2 of my Classes please ?
6- I understand that one, except if there's a better place in CSS inserts to put it ?

Here are the Classes (if i've taken the right lines) :

<li class="page_item page-item-2 current_page_parent">
<li class="page_item page-item-9">
<li class="page_item page-item-11">
<li class="page_item page-item-13">
<li class="page_item page-item-16">
<li class="page_item page-item-18">
<li class="page_item page-item-52">

Thanks a lot for the website re CSS, I think I've found it myself, which is great

Here's what I believe :

.9 {background-color:fffffff;}

I'd like the tab background color of Class 9 to be #FFFFFFF; instead of #CCCCCC;

would you code that one for me please Juggledad ?

Last edited by Pierre; Feb 1, 2011 at 11:41 AM.
Old Feb 1, 2011, 11:45 AM
Pierre's Avatar
36 posts · Aug 2010
Montpellier, France
Thanks a lot to STB and JD, you both made my day.

This is my first visit into the unknown (and scary) world of CSS, but I have to say you 2 made it nice and cosy.

Again, a big thanks

I do have (and use a little) Firebug.

I'll try it right away.



Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
Thread Thread Starter Forum Replies Last Post
How to adjust the height of the menu bar button or tab Bob Cephas Page & Category Menu Bars 3 Dec 21, 2010 10:47 AM
menu bar tab shape jmshap Page & Category Menu Bars 2 Oct 6, 2010 08:02 AM
Great Menu 1 (Page Menu) Tab that links directly to another site?? tim55057 Page & Category Menu Bars 2 Oct 5, 2010 05:42 PM
Removing tab from header menu glennvogelsang Page & Category Menu Bars 2 Aug 3, 2010 10:55 AM
menu tab doesnot response to the click? chizi Page & Category Menu Bars 0 Aug 1, 2009 12:50 PM

All times are GMT -6. The time now is 05:17 AM.

Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.