Return to previous page

CSS for Tab element - by MJ - on WordPress WooCommerce support

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

Participant

September 21, 2021 at 08:25

Hi,
You have provided me with below CSS to achieve this https://prnt.sc/1qba78s
I tried to use the same into my page (“Design”) yet it is not working.
can you help me with what I am missing here?

/* tabs */

.et-tabs-wrapper .tabs-nav {
    border-bottom: none;
    padding-bottom: 0px;
}
.page-wrapper .et-tabs-wrapper .tabs-nav li {
    margin: 10px;
    width: 150px;
    max-width: 150px;
}
.page-wrapper .et-tabs-wrapper .accordion-title {
    margin: 10px 0;
}
.page-wrapper .et-tabs-wrapper .tabs-nav li, .page-wrapper .et-tabs-wrapper .tabs .accordion-title {
    border: 1px solid #999 !important;
    background: #F0F0F0;
    padding: 0 !important;
}

.tabs .tab-title, .page-wrapper .et-tabs-wrapper .accordion-title span{
    padding: 10px 10px 10px 10px !important;
    font-size: 16px !important;
    font-weight: 500;
    text-transform: none !important;
    color: #999;
}
.tabs .tab-title:hover, .tabs .tab-title:focus, .page-wrapper .et-tabs-wrapper {
    color: #e95d2a;
}
.et-tabs-wrapper .tabs .tab-title.opened, 
.et-tabs-wrapper .tabs .tab-title:hover,
.page-wrapper .et-tabs-wrapper accordion-title:hover span, 
.page-wrapper .et-tabs-wrapper .accordion-title.opened, 
.page-wrapper .et-tabs-wrapper .accordion-title.opened span  {
    color: #fff!important;
    background-color: var(--et_active-color);
}
.template-content .et-tabs-wrapper .tabs-nav li.et-opened:before,
.template-content .et-tabs-wrapper .tabs .accordion-title.opened:before,
.template-content .et-tabs-wrapper .tabs-nav li.et-opened:before {
    display: none;
}
.et-tabs-wrapper .tabs-nav {
    padding-bottom: 0px;
}

#302924 Copied Theme version: 8.0.6

5 Answers

Participant

September 22, 2021 at 05:01

can u please help with this?

#303034 Copied

Participant

September 23, 2021 at 01:26

I didn’t receive any feedback on this. Can you please help me?

#303182 Copied

Olga Barlow

Support staff

September 23, 2021 at 15:13

Hello,

That code was for the XStore tabs https://prnt.sc/1tcaw46 not for the WPBakery default tabs element. Do you want to use WPBakery default tabs with that design? Why don’t use your XStore tabs element?

Regards

#303257 Copied

Participant

September 24, 2021 at 05:54

Hi
sorry my bad. now i chose a correct tab and it is working well in desktop. not sure why i get double borders when shit to mobile. https://prnt.sc/1tf0k1v
any idea?

#303310 Copied

Rose Tyler

Support staff

September 24, 2021 at 14:21

Hello,

Add this Custom CSS code also:

.page-wrapper .et-tabs-wrapper .accordion-title.opened span {
    border: none !important;
}

Regards

#303371 Copied

Viewing 6 results - 1 through 6 (of 6 total)

The issue related to '‘CSS for Tab element’' has been successfully resolved, and the topic is now closed for further responses

CSS for Tab element - by MJ - on WordPress WooCommerce support

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection