{"id":33815,"date":"2019-03-01T09:34:10","date_gmt":"2019-03-01T09:34:10","guid":{"rendered":"http:\/\/getshortcodes.com\/?post_type=docs&p=33815"},"modified":"2020-04-27T09:16:14","modified_gmt":"2020-04-27T09:16:14","slug":"customizing-the-tabs-shortcode","status":"publish","type":"docs","link":"https:\/\/getshortcodes.com\/docs\/customizing-the-tabs-shortcode\/","title":{"rendered":"Customizing the tabs shortcode"},"content":{"rendered":"\n

In this article, you’ll learn how to customize the appearance of the tabs shortcode.<\/p>\n\n\n

Table of contents<\/p>\n\n

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

    Custom CSS editor<\/h2>\n\n\n\n

    Navigate to Dashboard \u2192 Shortcodes \u2192 Settings<\/em> and look for the Custom CSS code<\/em> field. Copy\/paste the following styles to the Custom<\/g> CSS code<\/em> field to customize each part of the shortcode. After inserting styles click the Save Changes<\/em> button.<\/p>\n\n\n\n

    Tab, any state<\/h2>\n\n\n\n
    .su-tabs > .su-tabs-nav > span {

      \/* Background color *\/
      background-color: #ffcc00;

      \/* Text color *\/
      color: #00ffcc;

      \/* Text size *\/
      font-size: 20px;

    }<\/pre>\n\n\n\n
    Tab, inactive state<\/h2>\n\n\n\n
    .su-tabs > .su-tabs-nav > span:not(.su-tabs-current) {

      \/* Background color *\/
      background-color: #ffcc00;

      \/* Text color *\/
      color: #00ffcc;

      \/* Text size *\/
      font-size: 20px;

    }<\/pre>\n\n\n\n
    Tab, on mouse over<\/h2>\n\n\n\n
    .su-tabs > .su-tabs-nav > span:hover {

      \/* Background color *\/
      background-color: #ffcc00;

      \/* Text color *\/
      color: #00ffcc;

    }<\/pre>\n\n\n\n
    Tab, active state<\/h2>\n\n\n\n
    .su-tabs > .su-tabs-nav > span.su-tabs-current {

      \/* Background color *\/
      background-color: #ffcc00;

      \/* Text color *\/
      color: #00ffcc;

    }<\/pre>\n\n\n\n
    Tab, active state, on mouse over<\/h2>\n\n\n\n
    .su-tabs > .su-tabs-nav > span.su-tabs-current:hover {

      \/* Background color *\/
      background-color: #ffcc00;

      \/* Text color *\/
      color: #00ffcc;

    }<\/pre>\n\n\n\n
    Tab content<\/h2>\n\n\n\n
    .su-tabs > .su-tabs-panes > div {

      \/* Background color *\/
      background-color: #ffcc00;

      \/* Text color *\/
      color: #00ffcc;

      \/* Text size *\/
      font-size: 20px;

    }<\/pre>\n\n\n\n
    Modifying particular tabs<\/h2>\n\n\n\n
    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.<\/p>\n\n\n\n
    \/* Second tab, inactive *\/\n.su-tabs > .su-tabs-nav > span:nth-child(2) {}\n\n\/* Second tab, on mouse over *\/\n.su-tabs > .su-tabs-nav > span:nth-child(2):hover {}\n\n\/* Second tab, active state *\/\n.su-tabs > .su-tabs-nav > span:nth-child(2).su-tabs-current {}\n\n\/* Second tab, active state, on mouse over *\/\n.su-tabs > .su-tabs-nav > span:nth-child(2).su-tabs-current:hover {}\n\n\/* Second tab content *\/\n.su-tabs > .su-tabs-panes > div:nth-child(2) {}<\/pre>\n\n\n\n
    Full-width tabs<\/h2>\n\n\n\n
    The following snippet will stretch tab handles to full width of the tabs container.<\/p>\n\n\n\n
    \"\"
    Full-width tabs<\/figcaption><\/figure>\n\n\n\n
    @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;
      }
    }<\/pre>\n\n\n\n
    Example of use<\/h2>\n\n\n\n
    Result<\/strong><\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Code<\/strong><\/p>\n\n\n\n
    .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;
    }<\/pre>\n","protected":false},"featured_media":0,"template":"","docs_category":[23],"class_list":["post-33815","docs","type-docs","status-publish","hentry","docs_category-customization"],"_links":{"self":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/docs\/33815","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/types\/docs"}],"wp:attachment":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/media?parent=33815"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/docs_category?post=33815"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}