Customizing the tabs shortcode

In this article, you’ll learn how to customize the appearance of the tabs shortcode.

Table of contents

1. Custom CSS editor
2. Tab, any state
3. Tab, inactive state
4. Tab, on mouse over
5. Tab, active state
6. Tab, active state, on mouse over
7. Tab content
8. Modifying particular tabs
9. Full-width tabs
10. Example of use

Custom CSS editor

Navigate to Dashboard → Shortcodes → Settings and look for the Custom CSS code field. Copy/paste the following styles to the 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-panes > 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;
  }
}

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