Return to previous page

Tabs deprecated – how to reproduce the demo tabs ?

This topic has 13 replies, 4 voices, and was last updated 8 years, 11 months ago ago by Jack Richardson

fguyaux

Participant

January 21, 2016 at 15:43

Hello,

We would like to have this look from your demo: https://www.8theme.com/demo/classico/variant1/

The tabs section: http://www.screencast.com/t/nkjyNWKKtryt

Those tabs are deprecated in VC. Could you please advise how to reproduce the demo look without using the deprecated tabs?

For now I have the deprecated tabs (http://parallaxpress.wpengine.com/) , I tried to change them for the new tabs but the look is really not the same: http://parallaxpress.wpengine.com/home-test/.

Thank you for your support,
Francoise

#109232 Copied

12 Answers

Eva Kemp

Support staff

January 22, 2016 at 15:53

Hello,

Tabs is Visual Composer element and in the recent plugin update they have modified tabs settings and now it’s displayed with new design.

Our demo site uses old Visual Composer plugin version and old theme version that’s why there is a difference.

Regards,
Eva Kemp.

#109499 Copied

fguyaux

Participant

January 22, 2016 at 16:07

Thank you Eva – I do understand that. But people buy your theme based on your demo – my client choose your theme because of your demo. So we assume when buying your theme that we can reproduced that look.
Could you write css to make that happens ?

Best,
Francoise

#109501 Copied

Eva Kemp

Support staff

January 22, 2016 at 17:36

Hello,

Please re-add tabs element and we’ll give you css code to modify tabs design.

Thank you.

Regards,
Eva Kemp.

#109518 Copied

fguyaux

Participant

January 22, 2016 at 18:52

Hello,

I enter the tabs in this page: http://parallaxpress.wpengine.com/home-alt-2/
with the advanced tabs style 3 for the first tabs section and style 6 for the second tabs section.

With the deprecated tabs, I was able to do this: http://parallaxpress2.wpengine.com/alt-home-2/

Notes:
– the products do not fit anymore in the tabs
– I could not do the left bar tabs (the second tabs section with Best Sellers)

Thank you,
Francoise

#109537 Copied

Eva Kemp

Support staff

January 22, 2016 at 19:24

Hello,

As I see you’re using Advanced Tabs element that is related to Ultimate VC Addons plugin, in our demo we used Tabs element http://storage2.static.itmages.com/i/16/0122/h_1453487036_6706938_aefdf0c975.png . Please use it.

Regards,
Eva Kemp.

#109551 Copied

fguyaux

Participant

January 22, 2016 at 19:34

Ok, I changed them for the tabs elements.

IN The first row I used the TABS Classic style,

The second row, which should have a left bar navigation, I used the outline style.

Regards,
Francoise

#109554 Copied
Eva Kemp

Support staff

January 22, 2016 at 20:25
Hello,

Please add this code in Global Custom CSS:
```
.vc_tta-color-grey.vc_tta-style-classic .vc_tta-tab.vc_active > a, .vc_tta-color-grey.vc_tta-style-classic .vc_tta-tab > a, .vc_tta-color-grey.vc_tta-style-classic.vc_tta-tabs .vc_tta-panels {
    border-color: transparent !important;
    background-color: transparent !important;
}
.vc_tta-color-grey.vc_tta-style-classic .vc_tta-tab.vc_active > a:hover, .vc_tta-color-grey.vc_tta-style-classic .vc_tta-tab > a:hover {
    border-color: transparent !important;
    background-color: transparent !important;
    color: black !important;
}
```
```
.vc_tta-color-grey.vc_tta-style-outline .vc_tta-tab.vc_active > a,.vc_tta-color-grey.vc_tta-style-outline .vc_tta-tab > a {
    border-color: transparent !important;
    color: grey !important;
}

.vc_tta-color-grey.vc_tta-style-outline .vc_tta-tab.vc_active > a:hover, .vc_tta-color-grey.vc_tta-style-outline .vc_tta-tab > a:hover {
  border-color: transparent !important;
  background-color: transparent !important;
  color: black !important;
}
.vc_tta-color-grey.vc_tta-style-outline.vc_tta-tabs .vc_tta-panels {
  border-color: transparent !important;
}
```
Regards,
Eva Kemp.
#109560 Copied
fguyaux

Participant

January 22, 2016 at 20:28

Thank you Eva.

Can I add that code in the child style.css ?

if not please let me know where.

thank you,
Francoise

#109564 Copied

Robert Hall

Support staff

January 23, 2016 at 08:56

Hello,

Yes, you can add this code in style.css of the Child Theme.

Regards,
Robert Hall.

#109591 Copied

fguyaux

Participant

January 23, 2016 at 19:49

Hello,

This css is not totally working. http://parallaxpress.wpengine.com/home-alt-2/
-first row:The tabs are still showing on 2 lines (4 products do not fit as it should and as it is indicated in the tabs setup, the padding or margin seems be the problem), tabs titles are not centered
-second row: the tabs should be on the left bar.

see here how it is with the deprecated tabs: http://parallaxpress2.wpengine.com/home-alt-2/

Thank you for your support,
Francoise

#109623 Copied

fguyaux

Participant

January 23, 2016 at 19:50

sorry here the link to the example with the deprecated tabs: http://parallaxpress2.wpengine.com/alt-home-2/

#109624 Copied
Jack Richardson

Support staff

January 24, 2016 at 08:57
Hello,

Please add this code in Custom CSS for desktop:
```
.vc_tta.vc_general .sidebar-position-without .row-count-4 .product {
    width: 280px;
}
```
Please look at the screenshot http://prntscr.com/9u3cds the tab titles are centered.
If you want to move titles section to center you need set the option in tabs settings:
http://prntscr.com/9u3dy0

-second row: the tabs should be on the left bar.

Unfortunately that option was removed in the Visual Composer update.

Best regards,
Jack Richardson.
#109639 Copied
Tagged: demo, deprecated, reproduce, tabs, themes, woocommerce, wordpress
Viewing 13 results - 1 through 13 (of 13 total)