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 » Page & Category Menu Bars »

[SOLVED] Page menu: different color for each button


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 Jan 17, 2010, 04:04 AM
Per Lund's Avatar
Per Lund
 
65 posts · Aug 2009
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.

Last edited by Per Lund; Jan 17, 2010 at 02:14 PM.
  #2  
Old Jan 30, 2010, 01:48 PM
juggledad's Avatar
juggledad
 
22,086 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #3  
Old Jan 30, 2010, 11:26 PM
Per Lund's Avatar
Per Lund
 
65 posts · Aug 2009
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.
  #4  
Old Jan 31, 2010, 02:13 AM
juggledad's Avatar
juggledad
 
22,086 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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;
}
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #5  
Old Jan 31, 2010, 05:47 AM
Per Lund's Avatar
Per Lund
 
65 posts · Aug 2009
Thank you, that helped
  #6  
Old Jan 31, 2010, 06:32 AM
Per Lund's Avatar
Per Lund
 
65 posts · Aug 2009
How do I add this also to the menu-item for the home page?
And can I also get individual colors when hovering?

Last edited by Per Lund; Jan 31, 2010 at 07:40 AM.
  #7  
Old Jan 31, 2010, 09:02 AM
juggledad's Avatar
juggledad
 
22,086 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
check out http://forum.bytesforall.com/showthr...4258#post24258
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #8  
Old Jan 31, 2010, 03:32 PM
Per Lund's Avatar
Per Lund
 
65 posts · Aug 2009
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.
  #9  
Old Jan 31, 2010, 03:57 PM
juggledad's Avatar
juggledad
 
22,086 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
Hovers apply to the link or <a> element so you need this
HTML Code:
li.page-item-2 a:hover {
background: green !important;
}
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #10  
Old Feb 3, 2010, 09:11 AM
Per Lund's Avatar
Per Lund
 
65 posts · Aug 2009
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
  #11  
Old Feb 3, 2010, 10:36 AM
juggledad's Avatar
juggledad
 
22,086 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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.
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #12  
Old Feb 3, 2010, 02:19 PM
Per Lund's Avatar
Per Lund
 
65 posts · Aug 2009
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.
  #13  
Old Feb 3, 2010, 02:34 PM
juggledad's Avatar
juggledad
 
22,086 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
what is the url?
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #14  
Old Feb 3, 2010, 02:37 PM
Per Lund's Avatar
Per Lund
 
65 posts · Aug 2009
The url is: http://rbl.aakrakirke.no/

The colors are not supposed to be as they are now, I am just testing.
  #15  
Old Feb 3, 2010, 02:45 PM
juggledad's Avatar
juggledad
 
22,086 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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;
}
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #16  
Old Feb 3, 2010, 03:14 PM
Per Lund's Avatar
Per Lund
 
65 posts · Aug 2009
Its not working.
  #17  
Old Feb 3, 2010, 03:48 PM
juggledad's Avatar
juggledad
 
22,086 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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;
}
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #18  
Old Feb 4, 2010, 12:11 AM
Per Lund's Avatar
Per Lund
 
65 posts · Aug 2009
I'm sorry, but this still wont work.
  #19  
Old Feb 4, 2010, 04:25 AM
juggledad's Avatar
juggledad
 
22,086 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
Arugh... I typed it wrong and I even spotted this yesterday..sigh..
the 'current_page' should be 'current_page_item'
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #20  
Old Feb 4, 2010, 05:44 AM
Per Lund's Avatar
Per Lund
 
65 posts · Aug 2009
Quote:
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

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Different button image for each item on Page Menu Masselyn Page & Category Menu Bars 7 Dec 6, 2009 11:58 AM
Changing Hover Color of "Submit Comment" Button adum Comments, trackbacks & pings 2 Jun 21, 2009 02:37 PM
Page menu background color : 2 colors possible? Len Page & Category Menu Bars 1 Jun 17, 2009 01:31 PM
Help Color Customizing Page Menu Bar Please hovering Header configuration & styling 3 Mar 29, 2009 04:31 AM
Page Menu button images w/dynamic resize kritho Page & Category Menu Bars 1 Feb 18, 2009 05:06 PM


All times are GMT -6. The time now is 06:11 AM.


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