Adjust text/background color of product tabs

Hi,

I would like to adjust the text and background color of the tabs on product pages: white titles and content on a black background. Also a custom green color (#00ae9d) as underline for the titles of the tabs. Right now it is all black titles/text on a grey background.

How can I adjust this, in custom/global css? Or do I need some kind of tab manager plugin to do this?

Example product page added to private content.

BR,
Michiel

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .single-product-content .product-tabs-wrapper {
    background-color: black;
}
body .single-product-content .tabs li.active a {
    color: white;
}
body .single-product-content .tabs li a {
    color: white;
}

Best Regards

Thank you, that already helped a lot! I am still looking for the following:

Selected tab title is white, with a green (#00ae9d) underline.
Hover over a tab title (currently not active/selected) leads to white tab title without underline.
Not selected tab titles are grey, without an underline.

Also regular text (e.g. on second tab) is now black/grey on black background. That should be also white text.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .single-product-content .tabs li a:hover{
    color: white;
}

Best Regards

Thank you, but that still does not adjust a few things I would like:

– Green (#00ae9d) underline for active tab
– No underline for inactive tabs
– Grey title color for inactive tabs
– White text color for regular text on the tabs, like all the properties on the additional information tab. They are now not readable due to black/grey text on the black background.

Is the above mentioned also possible?

Hello,

Please replace the code with this one:

body .single-product-content .tabs li a:hover{
    color: white;
}
body .single-product-content .product-tabs-wrapper {
    background-color: black;
}
body .single-product-content .tabs li.active a {
    color: white!important;
}
body .single-product-content .tabs li a {
    color: grey;
}
body .single-product-content .tabs li.active {
    border-color: #00ae9d;
}
body .single-product-content .tabs li {
    border-color: transparent;
}

Best Regards

The only thing left now is the text color of the content on a tab. On the second tab with product attributes the text is still grey instead of white.

BR,
Michiel

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .tab-download-container .file_title h4 {
    color: white;
}
body .tab-download-container .file_title p {
    color: white;
}

Best Regards

[Author]

Posts