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 »

Problem changing the background color of just one of the page menu items\buttons


  #1  
Old Jun 5, 2010, 01:23 PM
Thomas
 
87 posts · Dec 2009
Send a message via Skype™ to Thomas
I found the following post which has directions to implement this (different background color for just one of the menu buttons) and then the thread continues on with some great tips on working with CSS selectors as ATA inserts which was a great quick review and worth checking out.

http://forum.bytesforall.com/showthr...ton+image+item

I have added the following CSS insert to try and make the menu button for page 267 the background color of #D4001F. I assumed I needed to add the "!important" to make sure it had priority.

div#menu1 li.page_item page-item-267 a:link,
div#menu1 li.page_item page-item-267 a:visited,
div#menu1 li.page_item page-item-267 a:active,
div#menu1 li.page_item page-item-267 a:hover {
background:#D4001F !important;
}

This isn't working and I thought it may be because of a conflict with the "current_page_item" (class?) that is added when you are "on" that page but then why isn't the code working when you are on another page?

I've tried just about every variation of this I can think of but no success yet. Any ideas?

Thanks
Thomas
__________________
Hotels-Onsale.com - The Latest Breaking Discounted Hotel Rates on Over 118,000 Hotels Along With Thousands of Traveler Reviews
  #2  
Old Jun 6, 2010, 04:40 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
try it like this
HTML Code:
div#menu1 li.page-item-267 a:link,
div#menu1 li.page-item-267 a:visited,
div#menu1 li.page-item-267 a:active,
div#menu1 li.page-item-267 a:hover {
background:#D4001F !important;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Jun 6, 2010, 10:06 AM
Thomas
 
87 posts · Dec 2009
Send a message via Skype™ to Thomas
Thanks Juggledad, That worked. I knew I was close. I've been reading up on CSS syntax and I'm getting a lot better but this example defines exactly what I sometimes have trouble with and that is translating the CSS on the page (which I can see with Firebug), to the selectors for the stylesheet overrides.

For example, the CSS for this button displays as:

<li class="page_item page-item-267"> which is why I formatted my selector as:

div#menu1 li.page_item page-item-267 a:link, which wasn't working until you suggested:

div#menu1 li.page-item-267 a:link,

It looks like you removed "page_item" from the selector statement. Is there some kind of rule or guideline that will help me to better understand translating the page code to the stylesheet selector statements? That would help so much.

Thanks
Thomas
__________________
Hotels-Onsale.com - The Latest Breaking Discounted Hotel Rates on Over 118,000 Hotels Along With Thousands of Traveler Reviews
  #4  
Old Jun 6, 2010, 05:38 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
that was an error on my page. If you want to use two CLASSes from the same element, you would use another period between them so it would have been
HTML Code:
div#menu1 li.page_item.page-item-267 a:link,
there are places that this could be very useful, but not here.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Tags
background color, css insert, menu button

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Page Menu Bar Background Color clausont Page & Category Menu Bars 3 Feb 10, 2010 06:00 AM
[SOLVED] Changing the background color in horizontal box 2 glennvogelsang Header configuration & styling 4 Feb 5, 2010 06:48 AM
Changing background color for entire theme Netforest Header configuration & styling 2 Nov 5, 2009 11:54 AM
changing the background color of the main menu widget tenn10 Sidebars & Widgets 1 Oct 27, 2009 12:06 PM
Page menu background color : 2 colors possible? Len Page & Category Menu Bars 1 Jun 17, 2009 01:31 PM


All times are GMT -6. The time now is 11:59 PM.


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