Return to previous page

Tab styling. - by Roobinda - on WordPress WooCommerce support

This topic has 8 replies, 2 voices, and was last updated 6 years, 10 months ago ago by Rose Tyler

Roobinda

Participant

January 26, 2018 at 18:26

Hi there. The page in question listed in private content.

I’d like each tab header (.vc_tta-tab) to have a different background colour, and hover colour.
I can change the colour of ALL of them, but not each individual one. And if I add a custom style to the tab section in VC, it assigns it to the tab content, not the header.

Any ideas?

Thanks in advance.

Reuben.

Please, contact administrator
for this information.

#183109 Copied

7 Answers
Rose Tyler

Support staff

January 29, 2018 at 08:56
Hello,

You may use this code in Custom css for your page:
```
.wpb-js-composer .vc_tta-tabs-list .vc_tta-tab:first-child  span {
    color: red;
}
.wpb-js-composer .vc_tta-tabs-list .vc_tta-tab:nth-child(2) span {
    color: black;
}
.wpb-js-composer .vc_tta-tabs-list .vc_tta-tab:nth-child(3) span {
    color: red;
}
.wpb-js-composer .vc_tta-tabs-list .vc_tta-tab:nth-child(4) span {
    color: black;
}
.wpb-js-composer .vc_tta-tabs-list .vc_tta-tab:nth-child(5) span {
    color: red;
}
.wpb-js-composer .vc_tta-tabs-list .vc_tta-tab:nth-child(6) span {
    color: black;
}
.wpb-js-composer .vc_tta-tabs-list .vc_tta-tab:nth-child(7) span {
    color: red;
}
.wpb-js-composer .vc_tta-tabs-list .vc_tta-tab:nth-child(8) span {
    color: black;
}
```
and for the hover:
```
.wpb-js-composer .vc_tta-tab:nth-child(1)>a:hover{
    color: black;
}
.wpb-js-composer .vc_tta-tab:nth-child(2)>a:hover{
    color: #402f24;
}
.wpb-js-composer .vc_tta-tab:nth-child(3)>a:hover{
    color: black;
}
.wpb-js-composer .vc_tta-tab:nth-child(4)>a:hover{
    color: #402f24;
}
.wpb-js-composer .vc_tta-tab:nth-child(5)>a:hover{
    color: black;
}
.wpb-js-composer .vc_tta-tab:nth-child(6)>a:hover{
    color: #402f24;
}
.wpb-js-composer .vc_tta-tab:nth-child(7)>a:hover{
    color: black;
}
.wpb-js-composer .vc_tta-tab:nth-child(8)>a:hover{
    color: #402f24;
}
```
Regards
#183170 Copied
Roobinda

Participant

January 29, 2018 at 11:38

Hey Rose. Thanks. Not quite what i meant though.

It’s the background colour of the tab I’d like to change. Although i tried using ‘background-color’ and only changes the area around the tab title!

#183209 Copied
Rose Tyler

Support staff

January 29, 2018 at 11:59
Please use this code:
```
.wpb-js-composer .vc_tta-color-white.vc_tta-style-flat .vc_tta-tab:nth-child(1)>a{
    background-color:white;
}
.wpb-js-composer .vc_tta-color-white.vc_tta-style-flat .vc_tta-tab:nth-child(1)>a:hover{
    background-color:red;
}
```
Regards
#183221 Copied
Roobinda

Participant

January 29, 2018 at 13:25

Cool! So i switched the font colour to white, but would like the active tab to be black. Can’t get it to work!

Also, how can i stop the hover effect for the active tab?

Thanks again Rose!

#183233 Copied
Rose Tyler

Support staff

January 29, 2018 at 13:38
```
.wpb-js-composer .vc_tta-color-white.vc_tta-style-flat .vc_tta-tab.vc_active>a span {
    color: black;
}
```
Also, how can i stop the hover effect for the active tab?

– you may only set own active background color for this for all tabs together via custom css:
```
.wpb-js-composer .vc_tta-color-white.vc_tta-style-flat .vc_tta-tab.vc_active>a {
    background-color: red;
}
```
Regards
#183236 Copied
Roobinda

Participant

January 29, 2018 at 13:55

Thanks Rose. I achieved the same effect using:

.wpb-js-composer .vc_tta-color-white.vc_tta-style-flat .vc_tta-tab.vc_active>a:hover{
background-color:white ;
}

#183241 Copied

Rose Tyler

Support staff

January 29, 2018 at 13:57

You’re welcome!

Regards

#183243 Copied
Viewing 8 results - 1 through 8 (of 8 total)