Full list of Tabs CSS variables

Want total control over the appearance of your tab groups? We’ve got you covered.

Below is the complete list of CSS variables used in the Tabs addon. You can override any of these to fine-tune your tab themes — from padding and spacing to borders, icons, and hover states.

All variables begin with:

--theme-gft-

The rest of the variable name describes what it controls — most should be pretty self-explanatory. You can add your overrides to the Custom CSS field in the Tabs settings.

If you’re just looking to tweak the most common styles (like colors), check out our basic override guide

All Tabs CSS variables and their default values

Note that some of these defaults are overriden by specific themes

/* group (wrapper) styles */
--theme-gft-group-background-color: transparent;
--theme-gft-group-border-radius: 0;
--theme-gft-group-border-width: 0;/* width of 0 hides the border */
--theme-gft-group-border-style: solid;
--theme-gft-group-border-color: #DDD;
--theme-gft-group-box-shadow: none;

/* widths of the tab buttons for left/right placement */
--theme-gft-side-header-width: 20%;
--theme-gft-side-header-min-width: 240px;
--theme-gft-side-header-max-width: 100%;

/* gap between header (buttons container) and body (panes container) */
--theme-gft-header-gap-x: 0;
--theme-gft-header-gap-y: 0;
--theme-gft-header-gap-mobile: 0;

/* header */
--theme-gft-header-background-color: transparent;
--theme-gft-header-border-radius: 0;
--theme-gft-header-border-width: 0;
--theme-gft-header-border-style: solid;
--theme-gft-header-border-color: #DDD;
--theme-gft-header-box-shadow: none;

/* gap between tab buttons */
--theme-gft-buttons-gap-x: 0;
--theme-gft-buttons-gap-y: 0;
--theme-gft-buttons-gap-mobile: 0;

/* body */
--theme-gft-body-padding-x: 30px;
--theme-gft-body-padding-y: 30px;
--theme-gft-body-border-radius: 3px;
--theme-gft-body-background-color: transparent;
--theme-gft-body-border-width: 1px;
--theme-gft-body-border-style: solid;
--theme-gft-body-border-color: #DDD;
--theme-gft-body-box-shadow: none;

/* buttons - default */
--theme-gft-button-background-color: transparent;
--theme-gft-button-padding-x: 16px;
--theme-gft-button-padding-y: 10px;
--theme-gft-button-border-radius: 3px;
--theme-gft-button-border-width: 1px;
--theme-gft-button-border-style: solid;
--theme-gft-button-border-color: #DDD;
--theme-gft-button-box-shadow: none;
--theme-gft-button-focus-outline: none;

/* buttons - inner layout */
--theme-gft-button-flex-direction: row;
--theme-gft-button-flex-align: center;
--theme-gft-button-flex-justify: center;
--theme-gft-button-flex-wrap: nowrap;

--theme-gft-button-flex-gap-x: 5px;
--theme-gft-button-flex-gap-y: 10px;

--theme-gft-left-button-flex-direction: row;
--theme-gft-left-button-flex-align: center;
--theme-gft-left-button-flex-justify: center;
--theme-gft-left-button-flex-wrap: nowrap;

--theme-gft-right-button-flex-direction: row;
--theme-gft-right-button-flex-align: center;
--theme-gft-right-button-flex-justify: center;
--theme-gft-right-button-flex-wrap: nowrap;

/* buttons - label */
--theme-gft-button-label-display: inline-block;
--theme-gft-button-font-family: inherit;
--theme-gft-button-font-size: 14px;
--theme-gft-button-font-weight: bold;
--theme-gft-button-font-style: normal;
--theme-gft-button-line-height: 1.3;
--theme-gft-button-text-color: #4C6A85;
--theme-gft-button-text-decoration: none;

/* buttons - image/icon wrapper */
--theme-gft-image-wrap-width: 20px;
--theme-gft-image-wrap-height: 20px;
--theme-gft-side-image-wrap-width: 20px;
--theme-gft-side-image-wrap-height: 20px;
--theme-gft-image-wrap-background-color: transparent;
--theme-gft-image-wrap-border-width: 0;
--theme-gft-image-wrap-border-style: solid;
--theme-gft-image-wrap-border-color: #DDD;
--theme-gft-image-wrap-radius: 50%;

/* buttons - image */
--theme-gft-image-width: 100%;
--theme-gft-image-height: 100%;
--theme-gft-side-image-width: 100%;
--theme-gft-side-image-height: 100%;
--theme-gft-image-radius: 50%;
--theme-gft-image-fit: cover;
--theme-gft-image-position: 50%;

/* buttons - icon */
--theme-gft-icon-size: 90%;
--theme-gft-side-icon-size: 90%;
--theme-gft-icon-color: #4C6A85;

/* buttons - hover */
--theme-gft-button-hover-text-color: #4C6A85;
--theme-gft-button-hover-text-decoration: none;
--theme-gft-button-hover-background-color: transparent;
--theme-gft-button-hover-border-color: #DDD;
--theme-gft-button-hover-box-shadow: none;
--theme-gft-button-hover-cursor: pointer;

--theme-gft-hover-image-wrap-background-color: transparent;
--theme-gft-hover-image-wrap-border-color: #DDD;
--theme-gft-hover-icon-color: #4C6A85;

/* buttons - active (selected) */
--theme-gft-button-active-text-color: #FFF;
--theme-gft-button-active-text-decoration: none;
--theme-gft-button-active-background-color: #4C6A85;
--theme-gft-button-active-border-color: #4C6A85;
--theme-gft-button-active-box-shadow: none;
--theme-gft-button-active-cursor: default;

--theme-gft-active-image-wrap-background-color: transparent;
--theme-gft-active-image-wrap-border-color: #FFF;
--theme-gft-active-icon-color: #FFF;

/* buttons - error (fields validation) */
--theme-gft-button-error-text-color: #FF0052;
--theme-gft-button-error-text-decoration: none;
--theme-gft-button-error-background-color: #FFE9F0;
--theme-gft-button-error-border-color: #DDD;
--theme-gft-button-error-box-shadow: none;

--theme-gft-error-image-wrap-background-color: transparent;
--theme-gft-error-image-wrap-border-color: #DDD;
--theme-gft-error-icon-color: #FF0052;

/* buttons - disabled */
--theme-gft-button-disabled-text-color: #DDD;
--theme-gft-button-disabled-text-decoration: none;
--theme-gft-button-disabled-background-color: #DDD;
--theme-gft-button-disabled-border-color: #DDD;
--theme-gft-button-disabled-box-shadow: none;
--theme-gft-button-disabled-cursor: not-allowed;

--theme-gft-button-disabled-opacity: 1;
--theme-gft-disabled-image-wrap-background-color: transparent;
--theme-gft-disabled-image-wrap-border-color: #DDD;
--theme-gft-disabled-icon-color: #DDD;

How to use these CSS variables

To override any of the variables, wrap them inside a selector targeting the tab group. For example:

.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.

This will apply your overrides to all tab themes.

To limit your changes to just a specific theme, use the matching class like so:

.gft-tab-group.gft-theme--bar {
    --theme-gft-button-active-background-color: #1a1a1a;
}

This lets you customize per-theme without needing complex selectors or overrides. Just drop your values in and you’re done.

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!

Full list of Tabs CSS variables

All Tabs CSS variables and their default values

How to use these CSS variables

Want more control? Themer is coming soon! 👀

JetSloth

Want more control?
Themer is coming soon! 👀