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