Skip to:
Content
Pages
Categories
Search
Top
Bottom

Change single tab colour

  • @markhahnel

    Participant

    I need to highlight a single page tab for a few weeks, I was thinking it would be something like this but I’ve had no joy:

    #page_item page-item-582 li {background:red !important;}

    Any ideas?

    Thanks

Viewing 14 replies - 1 through 14 (of 14 total)
  • @mercime

    Participant

    > @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.

    @hnla

    Participant

    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.

    @mercime

    Participant

    Aww @hnla, !important makes me happy :-)

    @hnla

    Participant

    makes me cry :( instantly start looking for rule conflicts and badly constructed descendant selector sets :)

    @modemlooper

    Moderator

    ul#nav li.page-item-582 a { background-color: #FF0000 !important; }

    needs an a :D

    @mercime

    Participant

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

    @modemlooper

    Moderator

    I wouldn’t use ul#nav li.page-item-582

    It has no radius but the a does, creates weird color on the edges.

    @mercime

    Participant

    10-4. Corrected in previous post.

    @markhahnel

    Participant

    Well you guys are all heroes. Fantastic stuff guys, thanks a lot :)

    @naijaping

    Participant

    @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.

    @mercime

    Participant

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

    @naijaping

    Participant

    @mercime, am using a child theme, my web is : http://www.suchworld.com/.

    testing login:

    username:demo, pass : demo

    @mercime

    Participant

    @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

    @naijaping

    Participant

    thank @mercime just done this by adding class and ref it in css

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Change single tab colour’ is closed to new replies.
Skip to toolbar