Skip to:
Content
Pages
Categories
Search
Top
Bottom

Change single tab colour


  • Mark
    Participant

    @markhahnel

    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
    Keymaster

    @mercime

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


    @mercime
    Keymaster

    @mercime

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

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


    modemlooper
    Moderator

    @modemlooper

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

    needs an a :D


    @mercime
    Keymaster

    @mercime

    “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

    @modemlooper

    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
    Keymaster

    @mercime

    10-4. Corrected in previous post.


    Mark
    Participant

    @markhahnel

    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.


    @mercime
    Keymaster

    @mercime

    @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


    @mercime
    Keymaster

    @mercime

    @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

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