Return to previous page

Tab styling. - by Roobinda - on WordPress WooCommerce support

This topic has 8 replies, 2 voices, and was last updated 7 years 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)