Remove active tab line in product description with hover effect

[stekats]

Hello
A) I would like to remove the bottom line of the active tab in shop product

and B) I would like the other inactive tab to be of another color and not white and to have a hover effect
how can we do that please with css?

overall I would like to be like the second picture

[ruenel]

Hello Stella,

Thanks for writing in! Regretfully there is no option in the theme that allows you to change the bottom border color of the product tab. You need to add CSS code into X > Theme Options > CSS to be able to override the default theme styling.

First, you need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use. The product tab container use .x-nav-tabs class and a custom active CSS class will be added to each tab nav items. The default theme styling CSS is using this:

.x-nav-tabs>li {
    border-bottom: 1px solid rgba(0,0,0,.1);
}

Therefore a proper CSS selector for changing the color of the bottom border will be:

.x-nav-tabs>li.active {
    border-bottom-color: white;
}

Feel free to add whatever CSS code you like inside the selector. I added a border-bottom-color: white; to change the bottom border color to white. To learn more about the “border-bottom-color” CSS property, please check this out: https://www.w3schools.com/cssref/pr_border-bottom_color.asp

The points above will be a good starting point and if you are interested you can learn more about CSS selectors and details here

Best Regards.

[stekats]

Thank you Rue for your reply,
I am not so savvy with css
I would also like to know how to make the inactive tabs some other color and have a hover effect too.

[marc_a]

Hi Stella,

As my colleague said, you need to learn how to inspect an element so that you will know how to get the right selector because providing custom CSS code is outside the scope of our theme support.

On the other hand, just follow the recommendation of my colleague as a starting point to learn about CSS.

For your preferences, here’s how you can change the color of the inactive and active tabs, please add the code in your X > Theme Options > CSS

Active:

.x-nav-tabs.two-up>li.active > a{
background-color: #000000;
}

Inactive:

.x-nav-tabs.two-up>li > a {
background-color: #00ffff;
}

Just change the hex code to your preferred color, you can check it here. Example hex code is #000000 or #00ffff;

Hope that helps.

Thank you.

[stekats]

Yes that helped a lot thank you.
I will try to learn css but it’s a bit difficult for me.
As for the hover effect how do I add it?

[marc_a]

Hi Stella,

For the hover effects, you can use this as references.

.x-nav-tabs.two-up>li > a:hover {
    background-color: #000000;
}

Hope that helps.

Thank you.

[stekats]

Yes that helped a lot.
Thank you once again you are the best!

[tristup]

Hi Stella,

Glad that we are able to help you.

Thanks