> @markhahnel it’s a matter of style’s specificity/using correct selector and precedence
Place this after the last style in your active theme’s style.css file
`/*** Highlight this page tab for a few weeks ***/
ul#nav li.page-item-582 { background-color: #FF0000 !important; }`
Then delete the block when you don’t need it anymore.
And with sufficient weight for the element it should be possible to remove the improperly and too often used ‘!important ‘
You could also add the ruleset in a style tag via a function and add_action wp_head; that adds specificity via the cascade precedence and also won’t be cached by the browser.
Aww @hnla, !important makes me happy
makes me cry instantly start looking for rule conflicts and badly constructed descendant selector sets
ul#nav li.page-item-582 a { background-color: #FF0000 !important; }
needs an a
“rule conflicts and badly constructed descendant selector sets”
true @hnla, but only for this occasion. That’s the reason I suggested placing the style at the bottom of style.css in not so many words
10-4. @modemlooper
`/*** Highlight this page tab for a few weeks ***/
ul#nav li.page-item-582
ul#nav li.page-item-582 a { background-color: #FF0000; }`
I wouldn’t use ul#nav li.page-item-582
It has no radius but the a does, creates weird color on the edges.
10-4. Corrected in previous post.
Well you guys are all heroes. Fantastic stuff guys, thanks a lot
@mercime, thanks for this, exactly what i wanted. but there is another problem. how can i Highlight a page that has no page id number? e.g Home, Activities, Members, Group. have tried this ul#nav li.Home a {color: #FF0000; } but didnt work.
@naijaping what theme are you using and how are nav items generated in your theme? If you’re using child theme of bp-default, there are CSS classes automatically which you can target for styling currently selected items.
For BP 1.2.9 there’s .selected and .current_page_item classes
`ul#nav li.selected a, ul#nav li.current_page_item a {
background: #f5f5f5;
color: #555;
}`
For upcoming BP 1.5 bp-default using wp_nav_menu, there’s .selected, .current-menu-item, .current_page_item, and even current_page_ancestor
`#nav li.selected a,
#nav > li.current-menu-item a,
#nav > li.current_page_item a,
#nav > li.current_page_ancestor a {
background: none repeat scroll 0 0 #F5F5F5;
color: #4D4D4D;
}`
@mercime, am using a child theme, my web is : http://www.suchworld.com/.
testing login:
username:demo, pass : demo
@naijaping you’d have to add classes to the links you wanted to highlight to change the link color of each link. Or, you might want to change navigation links to use wp_nav_menu where you could easily target the links to implement your customizations. Here’s an easy tutorial on adding wp_nav_menu to your theme http://justintadlock.com/archives/2010/06/01/goodbye-headaches-hello-menus
thank @mercime just done this by adding class and ref it in css