Change tab Color

Support
#1

Hey,
I am trying to change the color of my tabs. I used this code

.vc_tta-container .vc_tta-color-orange.vc_tta-style-modern .vc_tta-tab>a {
border-color: #ea6500 !important;
background-color: #ea6500 !important;
color: #fff;
}

and got all the tabs to change color but I would like the active tab to be the default colors.

border-color: #f0f0f0;
background-color: #f8f8f8;
color: #666;

I can not figure out how to change this. Here is a link to my test site.
https://staging.outdoordogsupply.com/product/sportdog-replacement-antenna-long/#Description

#2

Hello @odsadmin,

Thanks for writing in!

Please add following CSS under X > Theme options > CSS:

.vc_tta-tab .vc_tta-title-text {
    color: #ededed;
}


.wpb-js-composer .vc_tta-color-orange.vc_tta-style-modern .vc_tta-tab>a {
    background-color: #a94242 !important;
    border-color: #a94242 !important;
}


.vc_tta-tab.vc_active .vc_tta-title-text {
    color: #fff;
}

Thanks.

#3

So I added the code you told me to and it makes it red. I would like the active tab to be the light color but the others be the bright orange #ea6500.

#4

Hello @odsadmin,

Thanks for updating the thread.

You can update the code with following:

.vc_tta-tab .vc_tta-title-text {
    color: #ededed;
}

.wpb-js-composer .vc_tta-color-orange.vc_tta-style-modern .vc_tta-tab>a {
    background-color: #f1813a !important;
    border-color: #f1813a !important;
}


.vc_tta-tab.vc_active .vc_tta-title-text {
    color: #fff;

}

Thanks.

#5

Awesome!! That worked to change the color on all of them. Can you make it so the tab that is selected is a lighter color like this border-color: #f0f0f0;
background-color: #f8f8f8;
color: #666;
with a darker font.

#6

Hi @odsadmin,

Sure, please add this as well to the above CSS (not replace them).

.wpb-js-composer .vc_tta-color-orange.vc_tta-style-modern .vc_tta-tab.vc_active>a {
    border-color: #f0f0f0 !important;
    background-color: #f8f8f8 !important;
}

Then replace this CSS,

.vc_tta-tab.vc_active .vc_tta-title-text {
    color: #fff;

}

with this

.vc_tta-tab.vc_active .vc_tta-title-text {
    color: #666 !important;
}

Thanks!

1 Like
#7

Thank you so much that worked GREAT!!!

#8

You’re welcome!
Thanks for letting us know that it has worked for you.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.