Return to previous page

Custom Tabs - by zf - on WordPress WooCommerce support

This topic has 6 replies, 3 voices, and was last updated 8 years, 8 months ago ago by Eva Kemp

zf

Participant

August 5, 2015 at 08:39

Hi Guys,

I need to make a few customization to tab headings.
1) Centralise all headers instead of left align
2) Remove Arrow from underline
3) Change colours of active and inactive item headers.

I have put the details in the private section below

Thank You

Please, contact administrator
for this information.

#78596 Copied

5 Answers
Eva Kemp

Support staff

August 5, 2015 at 09:22
Hello,

1. Use this code in custom.css:
```
.tabs .wpb_tabs_nav {
    padding-left: 22% !important;
}
```
2. Please add this code:
```
.tabs .wpb_tabs_nav li.ui-state-active a::before {
    content: none !important;
}
```
3. Use this css code for active tab:
```
.tabs .wpb_tabs_nav li.ui-state-active a {
   color: red;
}
.tabs .wpb_tabs_nav li.ui-state-active a::after {
    border-bottom-color: red !important;
}
```
and for inactive:
```
.tabs .wpb_tabs_nav li a {
   color: blue !important;
}
```
Write your color values.

Regards,
Eva Kemp.
#78609 Copied
zf

Participant

August 5, 2015 at 10:47

Hi Eva, thank you. However for some reason my additions dont work when adding to custom.css
It is activated on backend

It does work when added to the standard style.css

Please advise.

Thanks

#78630 Copied
Jack Richardson

Support staff

August 5, 2015 at 11:05
Hello,

You forgot to close additional } in the code
```
@media (max-width: 979px) {.left-bar .left-titles {
 width: 20% !important;
}}
```
I’ve added it.
Please check the code in custom.css file now.

Best regards,
Jack Richardson.
#78632 Copied
zf

Participant

August 13, 2015 at 13:39

Hi There, I have picked up an issue with the above solution

It works perfectly when there is 3 tabs but not on pages with 2 tabs.
URLS are in the section below:

Thank You

Z

Please, contact administrator
for this information.

#79877 Copied

Eva Kemp

Support staff

August 13, 2015 at 14:40

Hello,

Sorry, but padding values can’t be changed due to number of tabs items. To make them shown similarly you can revert back to original style.

Regards,
Eva Kemp.

#79893 Copied
Viewing 6 results - 1 through 6 (of 6 total)