Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • August 27, 2014 at 2:38 pm #309835
    welswebmaster

    I’ve seen a couple posts on how to change tab background colors. That works well, but affects all tabs equally. However, I’m looking for each individual tab to have its own color. Is that possible? If so- how? I’m guessing some sort of targeting with the CSS. Note that the tab labels will not change for this case. Page of reference: (see private content). So for example, ADVENT might be blue, and EPIPHANY would be yellow, etc.
    Your help is appreciated.

    August 28, 2014 at 4:53 am #310194
    Josue

    Hey Julie!

    Try with this codes:

    .tab_titles [data-fake-id="#tab-id-1"], #tab-id-1-container{
    background: red !important;
}

.tab_titles [data-fake-id="#tab-id-2"], #tab-id-2-container{
    background: green !important;
}

.tab_titles [data-fake-id="#tab-id-3"], #tab-id-3-container{
    background: blue !important;
}

    Modify and repeat (that will change the first three tabs).

    Regards,
    Josue

    August 28, 2014 at 4:23 pm #310504
    welswebmaster

    Very good! – If I only want to do this to one particular page on the site, and not others using tabs, what then?

    August 28, 2014 at 4:31 pm #310512
    Yigit

    Hey!

    Please edit the code Josue posted and add page id as following

    .page-id-3023 .tab_titles [data-fake-id="#tab-id-1"], #tab-id-1-container{
    background: red !important;
}

.page-id-3023 .tab_titles [data-fake-id="#tab-id-2"], #tab-id-2-container{
    background: green !important;
}

.page-id-3023 .tab_titles [data-fake-id="#tab-id-3"], #tab-id-3-container{
    background: blue !important;
}

    You can right click on Chrome or Firefox to inspect elements to find page ID’s http://i.imgur.com/HyPTCRg.jpg

    Regards,
    Yigit

    August 28, 2014 at 5:09 pm #310544
    welswebmaster

    Hmmm. The CSS isn’t appearing. I’ve placed the code you’ve provided on this page wp-admin/admin.php?page=avia under QUICK CSS. Wrong place? I’ve emptied server cache and browser cache – using FF. No difference in Chrome or IE either.
    I am not including these CSS files in Minify:
    admin-bar
    dashicons
    avia-custom
    cms-navigation-style-base
    avia-dynamic wpml-cms-nav-css

    August 28, 2014 at 5:27 pm #310550
    welswebmaster

    Cache Issue resolved! This was my error instead that the quotes turned into entities when copy/pasting the code. Once fixed, all works well. Close ticket and many thanks!

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Tabs background / tab’ is closed to new replies.