Tagged: ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #27256

    Hello,

    Is it possible via custom css to highlight a single tab in another color. I have 5 tabs but I wan’t the tab title background and tab title of one of them to stand out more (special offers). I know I can change the color of the tab title and background for all tabs but was wondering how to do this for a single tab.

    Thanks

    Andrew

    #133374

    Hi,

    Yes it’s possible. Please provide the page where this is located so that we can give you the css to do it. You would need to use the nth of type css psuedo class http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/

    Thanks,

    Nick

    #133375

    Hello Nick,

    Thanks for the reply. I can’t provide the page at the moment. Any chance you could provide an example?

    Thanks again,

    Andrew

    #133376

    Hi,

    This css would make the 2nd tab name Red in off position

    .main_color .tabcontainer .tab_counter_1 {
    color: #F00;
    }

    Thanks,

    Nick

    #133377

    Thanks Nick,

    I know there is no custom css option in the theme per page so how would I add this to the page css file? Hope that is clear??

    Thanks again,

    Andrew

    #133378

    Also, in relation to the above. I have 2 sets of tabs on a page but only want this to apply to one if possible?

    Thanks

    Andrew

    #133379

    Actually the above code you provided will work ok because in the second set of tabs there are more than the first and I want to target the final one so thanks for that.

    Is there a way though apply this to a specific page through the page ID or something?

    Thanks again for your help.

    Andrew

    #133380

    I found the answer in an older question I asked.

    http://www.kriesi.at/support/topic/custom-css-page-option

    This applies the change to only a single page.

    Thanks again,

    Andrew

    #133381

    Hi,

    I am sorry. Quick CSS is located in Enfold > (Theme Options) > Layout Styling at the bottom of that page there is a text area.

    Alternately you can add it to /css/custom.css file.

    The demo page shows 6 different tab configurations, so it should work if I guessed the right one you are using.

    This applies to every page that has that type of tabs object on it. If you want to limit the functionality to a specific page, you can add #top.XXX before the css, and replace the xxx by a class found in the <body tag of the html when you view page source. Without seeing the page , I cant help you better than that.

    So that if you view source of the page in a browser where you want the css to act on, and find the body tag, it will look like this

    <body id="top" class="single single-chalet postid-131 stretched helvetica-neue-websave _helvetica_neue ">

    So in this case i would take out postid-131 and then change the css code to

    #top.postid-131 .main_color .tabcontainer .tab_counter_1 {
    color: #F00;
    }

    Thanks,

    Nick

    #133382

    Thanks again Nick,

    Andrew

    #133383

    Enjoy the theme.

    Thanks,

    Nick

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Highlight a single tab’ is closed to new replies.