Format Tabs

[HGPower]

Hello. How do I format the tabs element to look like this?

Right now, my customizations look like this:

I would like to:

• remove the border around the entire element
• have the thicker under border underactive tab title
• format the tab content to have a space between the time and the schedule text and have border underneath each schedule item

Thanks.

[Prasant]

Hello @HGPower,

Thanks for asking.

Please add following CSS under X > Theme Options > CSS to make necessary changes pertaining to first two customisations that you are looking for:

.x-nav-tabs {
    border: 0;
    box-shadow: none;
}

.x-nav-tabs>li {
    border: none;
}

.x-nav-tabs > .active > a, .x-nav-tabs > .active > a:hover {
    box-shadow: none;
    border-bottom: 3px solid #000;
}

.x-tab-content {
    border: none;
    box-shadow: none;
}

.x-nav-tabs>li>a, .x-nav-tabs>li>a:hover {
    box-shadow: none;
    background-color: transparent;
}

Regarding 3rd point, can you please share website credentials for us to take a closer look? I tried opening the demo page URL that’s assigned in licence manager page but that’s pointing to a under construction page.

Thanks.

[nabeel]

Hi @HGPower

I tried checking your site and couldn’t find the Tabs in your site, can you please share the page URL so we can take a look?

Currently you can add 5 tabs only using Cornerstone but that may be possible using shortcode, for example you can add the following code in Raw Content element:

[x_tab_nav type="seven-up"][x_tab_nav_item title="No, Click Me1!" active="true"][x_tab_nav_item title="No, Click Me2!"][x_tab_nav_item title="No, Click Me3!" active=""][x_tab_nav_item title="No, Click Me4!" active=""][x_tab_nav_item title="No, Click Me5!" active=""][x_tab_nav_item title="No, Click Me6!" active=""][x_tab_nav_item title="No, Click Me7!" active=""][/x_tab_nav][x_tabs][x_tab active="true"] Your Content1 [/x_tab][x_tab] Your Content2 [/x_tab][x_tab ] Your Content3 [/x_tab][x_tab] Your Content4 [/x_tab][x_tab ] Your Content5 [/x_tab][x_tab ] Your Content6 [/x_tab][x_tab ] Your Content7 [/x_tab][/x_tabs]

Hope this helps!

[HGPower]

Thank you. The url is http://ncgccinc.org/convention/

[nabeel]

Hi again,

Thanks for the URL. Please add the following code as well:

.x-nav-tabs.top>li {
    border-right: none !important;
}
.x-nav-tabs, .x-tab-content {
    border: none !important;
}
.x-tab-content p {
    border-bottom: 1px solid #fff;
}

To add spacing and underline between the tab content, you need to wrap each line in <p></p> tags for example:

<p>10:00 am NCGCC Cares – Volunteer to help a local nonprofit organization in Dallas</p>
<p>07:00 pm Night of Worship featuring area youth groups – hosted by Youth and Young Adults</p>

Hope this helps!