Skip to:
Content
Pages
Categories
Search
Top
Bottom

Change single tab colour

  • Avatar of Mark
    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)
  • Avatar of @mercime
    @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.

    Avatar of Hugo
    Hugo
    Moderator

    @hnla

    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.

    Avatar of @mercime
    @mercime
    Keymaster

    @mercime

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

    Avatar of Hugo
    Hugo
    Moderator

    @hnla

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

    Avatar of @modemlooper
    @modemlooper
    Moderator

    @modemlooper

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

    needs an a :D

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

    Avatar of @modemlooper
    @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.

    Avatar of @mercime
    @mercime
    Keymaster

    @mercime

    10-4. Corrected in previous post.

    Avatar of Mark
    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.

    Avatar of @mercime
    @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

    Avatar of @mercime
    @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)

You must be logged in to reply to this topic.