Product tabs background colours

Solved
lesbrons
Excursionist
97 0 39

Hi, I'm having a few issues trying to find a way to make the DETAILS tab on my product page match the background of my other tabs. I'm also trying to get rid of the white background on the tabs not selected and get rid of the grey when you hover over an option. Tried looking at my themes colours and those options dont seem to be there.
Also is there an option to make the text of these links smaller than the default?

Appreciate any advice or help!

 

https://lesbrons.com/collections/coats-jackets/products/white-jacket

dmwwebartisan
Shopify Partner
6488 1506 1972

@lesbrons 

Please add the following code at the bottom of your assets/stylesheet.css file.

.template-product .rte-tab section div{
background: transparent !important;
}
.template-product .rte-tab ul li label:hover{ background: #fff !important; }

Hope this works.

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
lesbrons
Excursionist
97 0 39

hi, thank you, that worked for the other tabs so that they are transparent. is there a way to get rid of the "white hover" background too? and im trying to get rid of the white background on the chosen tab as well

0 Likes
dmwwebartisan
Shopify Partner
6488 1506 1972

@lesbrons 

Please add the following code to remove the hover.

.template-product .rte-tab ul li label:hover{ background: transparent !important; }

Hope this works.

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
LitExtension
Shopify Partner
889 99 158

This is an accepted solution.

Hi @lesbrons,

Please place this code at the end of stylesheet.css

.rte-tab #tab1:checked ~ nav .tab1 label, .rte-tab #tab2:checked ~ nav .tab2 label, .rte-tab #tab3:checked ~ nav .tab3 label {

    background: none;

    color: #111;

    position: relative;

}

.product-template .template-product .rte-tab ul li label:hover {

    background: none !important;

}

- To change font size of tab. You

.product-template .rte-tab ul.tabbed li label {

    font-size: 12px;

}

Hope this helps.

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes
lesbrons
Excursionist
97 0 39

thank you so much!!! it works, but there is a white line that appears on the active page. Is there a way to get rid of this, or even change the color if i need to?

0 Likes