[Resolved] Styling tabs within a tab cell

[Author]

Posts

[IvanaB3904]

Hi
Being a newbie using Toolset, I need to ask some pretty simple questions, I suspect. Could you please point me to the guide for styling a tab cell? I want to be able to align text on tab title (left, right or middle) and tell each tab to occupy certain width of the page, then the colour of background and so on. I have searched the site and have found the reference to styling of a row, a cell, and so on, but nothing referring specifically to styling of tabs. (Probably because most people already know how to do it).
I would guess that it is something pretty simple - but can you point me in the right direction?
Thank you very much.
Best regards,
Ivana

[Nigel]

Hi Ivana

The tabs added to a Layout are built upon Bootstrap tabs.

If you want to style them you should add custom CSS with the rules you require.

This, for example, would set the tab widths to one-third and apply a background colour:

.nav-tabs > li {
    width: 33.3%;
    background-color: #fee;
}

I recommend you use your browser inspector to see the rules that are currently applied to the tabs so that you can see how to target them and possibly overwrite existing styles.

You can add the custom CSS at Toolset > Layouts CSS & JS.

(Note that such custom CSS is added to all pages, and so could affect tabs on other pages, which you may not want. You would need to target the page where the tabs are added more explicitly with your CSS rules, or you could simply add them inside style tags directly inside a Visual Editor cell, for example.)

https://toolset.com/documentation/user-guides/tabs-cell/

[IvanaB3904]

Hi Nigel.

Many thanks for your reply. It provides a direction, which is what i needed.

Best regards,

Ivana