Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)
-   -   [SOLVED] Page menu: different color for each button (http://forum.bytesforall.com/showthread.php?t=5356)

Per Lund Jan 17, 2010 04:04 AM
[SOLVED] Page menu: different color for each button
 
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.

juggledad Jan 30, 2010 01:48 PM
yes, you need to set up a CSS Selector for each page and then specify a color something like
HTML Code:
li.page-item-2 {
background: red;
}

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

Per Lund Jan 30, 2010 11:26 PM
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.

juggledad Jan 31, 2010 02:13 AM
oh stick an '!important at the end like this
HTML Code:
li.page-item-201 {
background: red !important;
}

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

Per Lund Jan 31, 2010 05:47 AM
Thank you, that helped :)

Per Lund Jan 31, 2010 06:32 AM
How do I add this also to the menu-item for the home page?
And can I also get individual colors when hovering?

juggledad Jan 31, 2010 09:02 AM
check out http://forum.bytesforall.com/showthr...4258#post24258

Per Lund Jan 31, 2010 03:32 PM
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.

juggledad Jan 31, 2010 03:57 PM
Hovers apply to the link or <a> element so you need this
HTML Code:
li.page-item-2 a:hover {
background: green !important;
}

Per Lund Feb 3, 2010 09:11 AM
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

juggledad Feb 3, 2010 10:36 AM
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
HTML Code:
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.

Per Lund Feb 3, 2010 02:19 PM
I have tried this but its not working.
HTML Code:
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.

juggledad Feb 3, 2010 02:34 PM
what is the url?

Per Lund Feb 3, 2010 02:37 PM
The url is: http://rbl.aakrakirke.no/

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

juggledad Feb 3, 2010 02:45 PM
Ok, I see you only want the color when that page is current, try this
HTML Code:
li.page-item-201.current_page {
background: red !important;
}

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

Per Lund Feb 3, 2010 03:14 PM
Its not working.

juggledad Feb 3, 2010 03:48 PM
well duh it because I'm losing it - you need the 'a' too (head smack) use this
HTML Code:
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;
}

Per Lund Feb 4, 2010 12:11 AM
I'm sorry, but this still wont work.

juggledad Feb 4, 2010 04:25 AM
Arugh... I typed it wrong and I even spotted this yesterday..sigh..
the 'current_page' should be 'current_page_item'

Per Lund Feb 4, 2010 05:44 AM
Quote:
Originally Posted by juggledad (Post 24745)
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 :)


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

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