Different background on active menu tab on home
I use this code to highlight current page in the menu bar, but would like to exclude the home page. How do I do that?
/* ================================================ */ /* how to highlight current page */ /* ================================================ */ ul.rMenu li.current_page_item a:active, ul.rMenu li.current_page_item a:visited, ul.rMenu li.current_page_item { color: #ffffff !important; background: #34597F !important; } |
add some CSS after that CSS prefixed with 'body.home' and undo the settings in that original CSS
|
Hi juggledad,
I am sorry, but I don't understand what you want me to do. Just to make sure, I want the background to change on current page on all pages except home page. When I am on home page, I want the background to be the same as on the menu bar. Thanks, Harald |
You will add the same CSS selectors with the prefix and the rules will be set to what you have for the non-active pages
|
This is the code I have. The new code is "not to highlight home page". This did not work. The home page gets the same background as the other tabs.
/* ================================================ */ /* how to highlight parent of current page */ /* ================================================ */ ul.rMenu li.current_page_ancestor a:active, ul.rMenu li.current_page_ancestor a:visited, ul.rMenu li.current_page_ancestor { margin-top:0px; color: #ffffff !important; background: #34597F !important; } /* ================================================ */ /* how to not highlight home page */ /* ================================================ */ ul.rMenu li.current_page_item_20 a:active, ul.rMenu li.current_page_item_20 a:visited, ul.rMenu li.current_page_item_20 { color: #ffffff !important; background: transparent!important; } /* ================================================ */ /* how to highlight current page */ /* ================================================ */ ul.rMenu li.current_page_item a:active, ul.rMenu li.current_page_item a:visited, ul.rMenu li.current_page_item { color: #ffffff !important; background: #34597F !important; /*background: -webkit-gradient(linear, 0 0, 0 bottom, from(#748daf), to(#5b6e88))!important; background: -webkit-linear-gradient(#748daf, #5b6e88)!important; background: -moz-linear-gradient(#748daf, #5b6e88)!important; background: -ms-linear-gradient(#748daf, #5b6e88)!important;*/ /*background: -o-linear-gradient(#748daf, #5b6e88)!important;*/ /*background: linear-gradient(#748daf, #5b6e88)!important;*/ /*-ms-filter:"progid:DXImageTransform.Microsoft.linear-gradient(startColorstr=#748daf,endColorstr=#5b6e88 )"!important;*/ /*filter:progid:DXImageTransform.Microsoft.linear-/*gradient(startColorstr=#748daf,endColorstr=#5b6e8 8)!important;*/ /*-webkit-border-radius: 4px !important;*/ /*-moz-border-radius: 4px !important;*/ /*border-radius: 4px !important;*/ /*-ms-filter:"progid:DXImageTransform.Microsoft.Blur(pix elRadius=4)" !important;*/ /*filter:progid:DXImageTransform.Microsoft.Blur(pix elRadius=4) !important;*/ The site is www.blueberrybuilders.com |
As I originally said, you need to start the CSS selector with 'body.home blah blah' for that selector to only apply on the home page.
|
All times are GMT -6. The time now is 01:08 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.