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.

Full-width tabs
@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;
}
}

Example of use

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;
}