[byronic1@att.netParticipant]

I am trying to reproduce this page: https://leeins.com/products.html. I want to duplicate the structure of the page: Personal Insurance, Business Insurance and Employee Benefits.Each category should be like a new page within the page, with three columns and 3 to 12 images on each tab.
Can I make a three-tab section, where each tab has three columns with images and text, like the three sections of the website I am giving you? I set up the three tabs in X, but they seem to only contain text in one column.
If this isn’t possible with the tabbed shortcodes, can you suggest another way to accomplish what I am after?

Many thanks in advance.

Byron Kawaichi
http://byronk.com/leeins/products/
Using Renew with up to date x-theme and slightly outdated Cornerstone plugin

[ChristopherModerator]

Hi there,

To add columns to tab content area please add following code :

<div class="x-section">
<div class="x-column x-1-3 x-sm">Content</div>
<div class="x-column x-1-3 x-sm">Content</div>
<div class="x-column x-1-3 x-sm">Content</div>
</div>

Hope it helps.

[byronic1@att.netParticipant]

Yes! Thank you. Can I remove the grey lines which frame the whole thing?

[byronic1@att.netParticipant]

Also can you tell me how to change the color of the text in unselected tabs (the selected tab is red; the unselected is gray, as in this screen shot). Thank you!

[Rue NelModerator]

Hello Again,

To remove the grey lines, please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

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

.x-nav-tabs,
.x-nav-tabs.top>li,
.x-nav-tabs.top>li a,
.x-nav-tabs.top>.active>a, 
.x-nav-tabs.top>.active>a:hover {
    border-color: transparent !important;
}

And to change the color of the text in unselected tabs or the selected tabs, please insert the following custom css as well in the settings tab, Settings > Custom CSS

li.x-nav-tabs-item,
.x-nav-tabs>li>a {
    background-color: transparent !important;
}

.x-nav-tabs>li>a {
    color: green;
}

.x-nav-tabs > .active > a, 
.x-nav-tabs > .active > a:hover,
.x-nav-tabs > li > a:hover {
    color: blue;
}

Feel free to change the colors that will suit your preference.
We would loved to know if this has work for you. Thank you.

[byronic1@att.netParticipant]

Yes, it is perfect! Thanks so much.

[Prasant RaiModerator]

You’re welcome! We are just glad we were able to help you out.

[Author]

Posts