Tagged: ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • August 5, 2013 at 9:19 pm #27256
    awilson3rd

    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

    August 7, 2013 at 9:38 am #133374
    Nick

    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

    August 7, 2013 at 10:16 am #133375
    awilson3rd

    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

    August 7, 2013 at 5:01 pm #133376
    Nick

    Hi,

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

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

    Thanks,

    Nick

    August 7, 2013 at 8:57 pm #133377
    awilson3rd

    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

    August 7, 2013 at 8:59 pm #133378
    awilson3rd

    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

    August 7, 2013 at 9:04 pm #133379
    awilson3rd

    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

    August 7, 2013 at 9:09 pm #133380
    awilson3rd

    I found the answer in an older question I asked.

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

    This applies the change to only a single page.

    Thanks again,

    Andrew

    August 7, 2013 at 10:05 pm #133381
    Nick

    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

    August 7, 2013 at 10:13 pm #133382
    awilson3rd

    Thanks again Nick,

    Andrew

    August 7, 2013 at 10:35 pm #133383
    Nick

    Enjoy the theme.

    Thanks,

    Nick

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Highlight a single tab’ is closed to new replies.