How to customize tabs shortcode
In this article, you'll learn how to customize the appearance of the tabs shortcode.
Custom CSS editor
Navigate to Dashboard - Shortcodes - Settings and look for Custom CSS code field. Copy/paste the following styles to Custom CSS code field to customize each part of the shortcode. After inserting styles click the Save Changes button.
Tab, any state
.su-tabs > .su-tabs-nav > span { /* Background color */ background-color: #ffcc00; /* Text color */ color: #00ffcc; /* Text size */ font-size: 20px; }
Tab, inactive state
.su-tabs > .su-tabs-nav > span:not(.su-tabs-current) { /* Background color */ background-color: #ffcc00; /* Text color */ color: #00ffcc; /* Text size */ font-size: 20px; }
Tab, on mouse over
.su-tabs > .su-tabs-nav > span:hover { /* Background color */ background-color: #ffcc00; /* Text color */ color: #00ffcc; }
Tab, active state
.su-tabs > .su-tabs-nav > span.su-tabs-current { /* Background color */ background-color: #ffcc00; /* Text color */ color: #00ffcc; }
Tab, active state, on mouse over
.su-tabs > .su-tabs-nav > span.su-tabs-current:hover { /* Background color */ background-color: #ffcc00; /* Text color */ color: #00ffcc; }
Tab content
.su-tabs > .su-tabs-panes > div { /* Background color */ background-color: #ffcc00; /* Text color */ color: #00ffcc; /* Text size */ font-size: 20px; }
Modifying particular tabs
If you want to customize each tab separately, use the following CSS code. Replace 2 with an index of the tab you want to modify.
/* Second tab, inactive */ .su-tabs > .su-tabs-nav > span:nth-child(2) {} /* Second tab, on mouse over */ .su-tabs > .su-tabs-nav > span:nth-child(2):hover {} /* Second tab, active state */ .su-tabs > .su-tabs-nav > span:nth-child(2).su-tabs-current {} /* Second tab, active state, on mouse over */ .su-tabs > .su-tabs-nav > span:nth-child(2).su-tabs-current:hover {} /* Second tab content */ .su-tabs > .su-tabs-content > div:nth-child(2) {}
Full-width tabs
The following snippet will stretch tab handles to full width of the tabs container.
@media screen and (min-width: 768px) { .su-tabs-nav { display: flex; } .su-tabs-nav span { flex-basis: 100%; text-align: center; } .su-tabs-nav span:last-child { margin-right: 0; } }
Usage Example
Result
Code
.su-tabs { background-color: orange; } .su-tabs > .su-tabs-nav > span { background-color: red; color: aquamarine; } .su-tabs > .su-tabs-nav > span:hover { background-color: gold; color: red; } .su-tabs > .su-tabs-nav > span.su-tabs-current { background-color: deepskyblue; color: white; } .su-tabs > .su-tabs-panes > .su-tabs-pane { background-color: deepskyblue; color: white; }