Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

[SOLVED] Page menu: different color for each button


  #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
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
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
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
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
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
check out http://forum.bytesforall.com/showthr...4258#post24258
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
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
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Hovers apply to the link or <a> element so you need this
HTML Code:
li.page-item-2 a:hover {
background: green !important;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
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
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
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
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
what is the url?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
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
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
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
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
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
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Arugh... I typed it wrong and I even spotted this yesterday..sigh..
the 'current_page' should be 'current_page_item'
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
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 09:38 AM.


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