Customizing Tabs colors with CSS variables

Customizing the look and feel of your JetSloth Tabs layout is easy using built-in CSS variables. You don’t need to write complicated selectors or override core styles — just target a single class and define the variables you want to change.

Here’s how to tweak the most common styles like active tab colors, label text, and icons.

How to apply your custom CSS

You can add your custom styles directly in the Tabs settings screen using the Custom CSS area, or in your theme’s stylesheet.

To apply styles across all tab themes, use the base selector:

.gft-tab-group[class*="gft-theme--"] {
    /* place the override CSS variables here */
}

To target a specific theme only, just use that theme’s class slug, for example:

.gft-tab-group.gft-theme--classic {
    /* override CSS variables for the Classic theme only */
}

.gft-tab-group.gft-theme--buttons {
    /* override CSS variables for the Buttons theme only */
}

.gft-tab-group.gft-theme--bar {
    /* override CSS variables for the Bar theme only */
}

.gft-tab-group.gft-theme--connected {
    /* override CSS variables for the Connected theme only */
}

.gft-tab-group.gft-theme--underline {
    /* override CSS variables for the Underline theme only */
}

.gft-tab-group.gft-theme--retro {
    /* override CSS variables for the Retro theme only */
}

Common variable overrides

These are the most common customizations we expect users to want:

Active tab background color

Change the color of the currently active tab.

--theme-gft-button-active-background-color: #3174f6;

Active tab label color

Change the text color of the active tab (most themes default to white).

--theme-gft-button-active-text-color: #ffffff;

Active icon color

If you’re using icons on your tabs, this controls the icon color for the active tab.

--theme-gft-active-icon-color: #ffffff;

You can mix and match these with your own brand or color palette to easily tailor the Tabs addon to your site.

Combined Example

Here’s an example of how to override all three in one go — background, label, and icon color — for any tab theme:

.gft-tab-group[class*="gft-theme--"] {
    --theme-gft-button-active-background-color: #3174f6;
    --theme-gft-button-active-text-color: #ffffff;
    --theme-gft-active-icon-color: #ffffff;
}

That’s all it takes! Just drop this into the Custom CSS field in your form’s Tabs settings.

You can mix and match these with your own brand or color palette to easily tailor the Tabs addon to your site.

See all available CSS variables

Looking to customize more than just colors? You can override spacing, borders, hover effects, and much more. See the full list of Tabs CSS variables

Coming soon

Want more control?
Themer is coming soon! 👀

We’re excited to announce JetSloth Themer is coming soon, a new visual UI for customizing our addons — starting with Tabs. It will let you build and preview custom themes live, without writing any code. Just pick colors, spacing, layout styles, and more using an intuitive design tool. Tabs will be the first addon supported, with others like Image Choices, Color Picker, Collapsible Sections, and Tooltips to follow.

Stay tuned for more soon!

Get Them All & Save!