Is it possible to have different color for each menu-button on the page menu?

I want one color for the "home" button, and another for "about" etc.

yes, you need to set up a CSS Selector for each page and then specify a color something like

li.page-item-2 {
background: red;
}

li.page-item-17 {
background: yellow;
}

etc

I tried this now, but the colors don't change, they are as I set them in ATO "Page Menu Bar".
When I look at the page-source I can see thet the CSS-codes are there.

oh stick an '!important at the end like this

li.page-item-201 {
background: red !important;
}

li.page-item-554 {
background: yellow !important;
}

Thank you, that helped

How do I add this also to the menu-item for the home page?
And can I also get individual colors when hovering?

check out http://forum.bytesforall.com/showthr...4258#post24258

Thank you that helped me with the homepage.

But I can't figure out how to style the hovering for each button. I tried to insert this into CSS-insert:

li:hover.page-item-2 {
background: green !important;
}

But that did not work.

I'm sorry, but I am not that much into css.

Hovers apply to the link or <a> element so you need this

li.page-item-2 a:hover {
background: green !important;
}

And I'm back again :-)

Now I am struggling with different color on the buttons on the current page.

PS! I have just donated $20 to you

Per

Lets say you have two pages ID 201 and 545, you want 201 to be red and 554 to be yellow, but if eithor f them is the current page, you want it blue you could do this

li.page-item-201 {
background: red !important;
}

li.page-item-554 {
background: yellow !important;
}

li.current_page_item {
background: blue !important;
}

since the last CSS rule is the one you see, the current page would be blue.

I have tried this but its not working.

li.current_page_item a:visited {
background: white !important;
}

When I do it like over it almost works, but then all pages are the same color when in current state. What I want to do is that when lets say page 2 is in current state the button for page 2 shall be green, and when page 3 is in current state the button for page 3 shall be yellow.

what is the url?

The url is: http://rbl.aakrakirke.no/

The colors are not supposed to be as they are now, I am just testing.

Ok, I see you only want the color when that page is current, try this

li.page-item-201.current_page {
background: red !important;
}

li.page-item-554.current_page {
background: yellow !important;
}

Its not working.

well duh it because I'm losing it - you need the 'a' too (head smack) use this

li.page_home a:hover {
background:red !important;
}

li.page_home.current_page a {
background:red !important;
}

li.page-item-2 {
background:url(http://rbl.aakrakirke.no/wp-content/themes/atahualpa/images/meny-1.png) no-repeat scroll center center !important
}

li.page-item-2 a:hover {
background:orange !important;
}

li.page-item-2.current_page a {
background:orange !important;
}

li.page-item-3 {
background:url(http://rbl.aakrakirke.no/wp-content/themes/atahualpa/images/meny-1.png) no-repeat scroll center center !important
}

li.page-item-3 a:hover {
background:yellow !important;
}

li.page-item-3.current_page a {
background:yellow !important;
}

li.page-item-6 {
background:url(http://rbl.aakrakirke.no/wp-content/themes/atahualpa/images/meny-1.png) no-repeat scroll center center !important
}

li.page-item-6 a:hover {
background:green !important;
}

li.page-item-6.current_page a {
background:green !important;
}

I'm sorry, but this still wont work.

Arugh... I typed it wrong and I even spotted this yesterday..sigh..
the 'current_page' should be 'current_page_item'

Originally Posted by juggledad

Arugh... I typed it wrong and I even spotted this yesterday..sigh..
the 'current_page' should be 'current_page_item'

:-)
Great! You are awesome. Thank you very much for your help