Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

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

A different color for each menu tab


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Feb 1, 2011, 09:44 AM
Pierre's Avatar
Pierre
 
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.

Thanks

Pierre
  #2  
Old Feb 1, 2011, 10:03 AM
juggledad's Avatar
juggledad
 
20,147 posts · Mar 2009
OSX 10.6.8/10.7.3 WP 2.8.x/2.9.x/3.x Atahualpa 3.5.x/3.7.x Safari 5.x Firefox 11 XP
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
  #3  
Old Feb 1, 2011, 10:25 AM
Pierre's Avatar
Pierre
 
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 10:41 AM.
  #4  
Old Feb 1, 2011, 10:41 AM
STB
 
764 posts · Apr 2010
atahualpa admin panel > add HTML / CSS inserts:
Code:
div#menu1 ul.rMenu li.page-item-9 {background-color: white;}

if you dont have it yet, make sure you get firebug for firefox
its a helpful/must have tool
some links with really helpful info in my signature too

good luck
  #5  
Old Feb 1, 2011, 10:45 AM
Pierre's Avatar
Pierre
 
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.

Cheers

Bookmarks

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 09:47 AM
menu bar tab shape jmshap Page & Category Menu Bars 2 Oct 6, 2010 07:02 AM
Great Menu 1 (Page Menu) Tab that links directly to another site?? tim55057 Page & Category Menu Bars 2 Oct 5, 2010 04:42 PM
Removing tab from header menu glennvogelsang Page & Category Menu Bars 3 Aug 3, 2010 03:06 PM
menu tab doesnot response to the click? chizi Page & Category Menu Bars 0 Aug 1, 2009 11:50 AM


All times are GMT -6. The time now is 03:13 AM.


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