Is it possible to create tab in a tab ? - by gewoonbovenaan

This topic has 23 replies, 3 voices, and was last updated 1 years, 4 months ago ago by Rose Tyler

  • Avatar: gewoonbovenaan
    gewoonbovenaan
    Participant
    June 6, 2023 at 13:02

    Hi is it possible to create a tab in tab? Does has a feature for this?

    I would like them to select the Size before they continue..

    https://gyazo.com/6dcac1066a60c440a1a954234ccbc9c1

    So when you click on 1.2 mtr you can select the tabbed products within the range. is that possible?

    22 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 6, 2023 at 13:48

    Hello, Gewoonbovenaan,

    Thank you for getting in touch with us.

    We did not test this before, but please do the next:
    Create content with General tabs element, save it as Template, then use new General Tabs as in this example – https://prnt.sc/R8W7Et9dOzfF

    We hope this information is helpful.

    Kind Regards,
    8theme team

    Avatar: gewoonbovenaan
    gewoonbovenaan
    Participant
    June 6, 2023 at 14:02

    Is it possible within visual composer? We have on this shop Xstore with wp bakery on it.

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 6, 2023 at 14:12

    Hello, Gewoonbovenaan,

    Thank you for your response.

    Please do not forget to mention what editor (Elementor or WPBakery) you are using in new topics on the forum, it will speed up answering.

    Please do the next: create static blocks via the desired tabs – https://prnt.sc/da8KrNvN4dTL , then add them using shortcode – https://prnt.sc/yYAiTS9ffcD3

    Kind Regards,
    8theme team

    Avatar: gewoonbovenaan
    gewoonbovenaan
    Participant
    June 6, 2023 at 14:23

    Hi Sorry you are right. thanks. but how to style the Xstore tabs? because i cant find a setting to change background, font size, icon etc.

    https://gyazo.com/c6965c2b12d40f9f5c750eeee5c9bf98
    https://gyazo.com/4868ed17ac29c0c032c9c9f8d8ae1387
    thanks

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 6, 2023 at 14:54

    Hello, Gewoonbovenaan,

    Thank you for your response.

    Yes, custom CSS code should be used in this case.
    Please try to test how it works with other Tabs elements https://prnt.sc/4CVIzMHSaL90 (one of them comes from the Massive Addons plugin and the second from WPBakery).

    Kind Regards,
    8theme team

    Avatar: gewoonbovenaan
    gewoonbovenaan
    Participant
    August 3, 2023 at 12:54

    I guess it works like this. Is it possible to get the css code to make the elements in black like this? https://gyazo.com/2d303a5f02b8df73776c6eec5a917c96
    so when a tab is activated black and the rest white.
    and on this tab, the black should be when activated, now its the opposite :https://gyazo.com/d6f88f5ae0e7db0fdcebad6986a0ec09

    many thanks

    Please contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 3, 2023 at 13:41

    Hello, Gewoonbovenaan,

    Thank you for getting in touch with us.

    Please try to add the next code in CUstom CSS for page area:

    .vc_tta-color-black.vc_tta-style-modern .vc_tta-tab.vc_active>a,
    .vc_tta-color-black.vc_tta-style-modern .vc_tta-tab>a:focus, .vc_tta-color-black.vc_tta-style-modern .vc_tta-tab>a:hover {
        color: white;
        background-color: black;
        border-color: black;
        padding: 5px 30px;
    }
    .vc_tta-color-black.vc_tta-style-modern .vc_tta-tab>a {
        color: black;
        background-color: white;
        border-color: white;
        padding: 5px 30px;
    }

    Kind Regards,
    8theme team

    Avatar: gewoonbovenaan
    gewoonbovenaan
    Participant
    August 3, 2023 at 14:17
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 3, 2023 at 14:40

    Hello, Gewoonbovenaan,

    Thank you for your response.

    Please check now – https://prnt.sc/iqPXkQwiE7bm https://prnt.sc/fjWlF_Ai3H6L https://prnt.sc/nUiRuLwWQe_X

    Kind Regards,
    8theme team

    Avatar: gewoonbovenaan
    gewoonbovenaan
    Participant
    August 3, 2023 at 14:50

    Yes, that worked, and is it possible that for the subtab the same? https://gyazo.com/61b535ad21c992282390b43ce8a6ac4f

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 3, 2023 at 15:42

    Hello, Gewoonbovenaan,

    Please try to add the next code also:

    .custom-tabs .tabs .tab-title.opened,
    .custom-tabs .tabs .tab-title:focus, 
    .custom-tabs .tabs .tab-title:hover {
        background-color: black;
        color: white;
    }
    .custom-tabs .tabs .tab-title {
        border-radius: 5px;
        padding-top: 5px !important;
        text-transform: none !important;
        margin: 0px 5px;
    }
    .custom-tabs .tabs-nav li.et-opened:before {
        display: none;
    }
    .custom-tabs .et-tabs-wrapper .tabs-nav {border-bottom: none;}

    Kind Regards,
    8theme team

    Avatar: gewoonbovenaan
    gewoonbovenaan
    Participant
    August 7, 2023 at 11:28

    Hi, it worked for this page: https://gyazo.com/bd7a76ab6ff6029435fed4a0694f1bd4 (see private #1) Can i stretch the tab so the text is next to eachother instead of above eachother.
    but didnt work not for the other pages: https://gyazo.com/bba2cd6cf236c942efa1259bddd67c56
    i have added the css code: ( should i add this in pages or static block?) https://gyazo.com/2237d9b112eb2c78bd572999179ca4a7

    also the active section should be black instead of grey. now active is grey and non active black, can we change that? https://gyazo.com/912a5063692a8af72e0eced6c1a2fa3a

    thanks agian very much

    Please contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 7, 2023 at 12:44

    Hello, Gewoonbovenaan,

    Thank you for getting in touch with us.

    We added the next code https://prnt.sc/StT4f3yyAquC , the result is – https://prnt.sc/d3EHuOaVkzpQ

    To apply mentioned styles for all pages with tabs, please follow the next steps:
    1/ https://prnt.sc/hYkAsSuQXqua – add this custom class
    2/ move code from the custom CSS for page area into Theme Options > Theme custom CSS.

    We hope this information is helpful.

    Kind Regards,
    8theme team

    Avatar: gewoonbovenaan
    gewoonbovenaan
    Participant
    August 8, 2023 at 09:33

    That worked, one last question, i found a tab where i can add image. but it only shows the image on top instead of next to it. https://gyazo.com/9b687905af10daab7cba35581a858f2e
    https://gyazo.com/a39b6cf8b412204ab442044200f6d90e
    https://gyazo.com/065db2a2df5c0a73bc13da14bcf6b1b6
    possible? 🙂

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 8, 2023 at 10:01

    Hello, Gewoonbovenaan,

    Please provide the URL of this page – https://gyazo.com/9b687905af10daab7cba35581a858f2e

    Kind Regards,
    8theme team

    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    August 8, 2023 at 10:06

    Hello, @gewoonbovenaan,

    Should you wish to position the icons adjacent to the title of the tab, it would necessitate editing the tab widget. Subsequently, you would need to modify the tabs under it and select the icon position as ‘before title’. For your reference, please consult the following screenshot: https://postimg.cc/SXg20FCk

    The result should look like this: https://postimg.cc/xc92mkBp

    Best Regards,
    8Theme’s Team

    Avatar: gewoonbovenaan
    gewoonbovenaan
    Participant
    August 8, 2023 at 10:15

    pls see private

    Please contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 8, 2023 at 10:57

    Hello, @gewoonbovenaan,

    We appreciate your prompt response.

    The next custom CSS code can be used for the page:

    .et-tabs-wrapper .tabs .tab-title {
        display: inline-flex;
        align-items: center;
    }
    .et-tabs-wrapper .tabs .tab-title img {
        margin-right: 10px;
        margin-bottom: 0px;
    }

    Best Regards,
    8Theme’s Team

    Avatar: gewoonbovenaan
    gewoonbovenaan
    Participant
    August 8, 2023 at 14:24

    yes almost, but now it looks like this. it would be good to have everything in one row.
    https://gyazo.com/d4d088d4ee41441ab84e97f5b50a0bde
    and it should look the same as these u made. so highlight black when active. etc. https://gyazo.com/4379b3e354b22eee1ac4b2cedfe5d820

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 8, 2023 at 14:56

    Hello, @gewoonbovenaan,

    Thank you for your response.

    1/ Please check now – https://prnt.sc/lZEFXDW6JZLd

    2/ https://prnt.sc/-GopOjk7o_IM – please make sure that you added the custom class. Do not ignore our recommendations, please.

    Thank you in advance.

    Kind Regards,
    8theme team

    Avatar: gewoonbovenaan
    gewoonbovenaan
    Participant
    August 8, 2023 at 15:16

    Sorry, now i have added it, and yes it works! only the spacing of the tabs appears again and therefore its not in one row anymore 🙂 https://gyazo.com/bed30415d5e4873cf29e1d6db52a2c92

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 8, 2023 at 15:48

    Hello, @gewoonbovenaan,

    Thank you for your response.

    Please check now – https://prnt.sc/h2Lh0bM5zZ3V

    Kind Regards,
    8theme team

  • Viewing 23 results - 1 through 23 (of 23 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.