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)
-   -   Problem changing the background color of just one of the page menu items\buttons (http://forum.bytesforall.com/showthread.php?t=7446)

Thomas Jun 5, 2010 01:23 PM

Problem changing the background color of just one of the page menu items\buttons
 
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

juggledad Jun 6, 2010 04:40 AM

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;
}


Thomas Jun 6, 2010 10:06 AM

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

juggledad Jun 6, 2010 05:38 PM

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.


All times are GMT -6. The time now is 04:27 AM.

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