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)
-   -   Different background on active menu tab on home (http://forum.bytesforall.com/showthread.php?t=19076)

Harald Dec 9, 2012 02:52 AM

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

juggledad Dec 9, 2012 05:05 AM

add some CSS after that CSS prefixed with 'body.home' and undo the settings in that original CSS

Harald Dec 9, 2012 05:26 AM

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

juggledad Dec 9, 2012 07:08 AM

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

Harald Dec 9, 2012 07:50 AM

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

juggledad Dec 9, 2012 08:25 AM

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.