TabberDesign

Tabber is a way to separate content into tabs, when only one tab is displayed at a time and tab labels are used to navigate between the different tabs.
Tabbers can be created by using the following basic syntax:
The code snippets on this page allow a wiki to customize the appearance of their tabs. It can be added to any CSS page used on a wiki (typically MediaWiki:Common.css), or even to personal CSS if desired.
: Note: Placing infoboxes that have tabs inside tabbers is not compatible with the code given on this page, and may give weird look to the infobox tabs. It is possible to adjust the code to use more precise selectors in order to avoid this effect, but the code will be significantly longer.
== Full custom themes ==
=== Theme 1 - Semi-Tabview Design ===
Code
.tabber .wds-tabs__wrapper .wds-tabs {
 padding: 3px 0 0;
}
.tabber .wds-tabs > .wds-tabs__tab {
 box-shadow: none;
}
.tabber .wds-tabs > .wds-tabs__tab:not(:last-child) {
 margin-right: 2px;
}
.tabber .wds-tabs .wds-tabs__tab-label {
 height: auto;
 margin: 0;
 line-height: 1.2;
}
.tabber .wds-tabs__tab a {
 background: #014604;
 border-top-left-radius: 5px;
 border-top-right-radius: 5px;
 border: 2px solid black;
 color: white !important;
 font-size: 16px;
 font-weight: normal;
 padding: 3px 0.5em;
}
.tabber .wds-tabs__tab.wds-is-current a {
 cursor: default;
 font-weight: bold;
}
.tabber .wds-tab__content {
 border: 2px solid grey;
}
=== Theme 2 - macOS Tabber Style ===
Code
.tabber .wds-tabs__wrapper {
 border: none;
}
.tabber .wds-tabs__wrapper .wds-tabs {
 background-color: transparent;
 flex-wrap: wrap;
 justify-content: center;
 margin: 0 0 -10px 0;
 padding: 3px 0;
 text-align: center;
}
.tabber .wds-tabs .wds-tabs__tab-label {
 height: auto;
 margin: 0;
}
.tabber .wds-tabs__tab a {
 background-color: #ffffff;
 border: none;
 box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75);
 color: #444444 !important;
 cursor: default;
 font-family: Helvetica, Sans-serif;
 font-size: 13px;
 font-weight: 300;
 margin: 0;
 padding:2px 12px;
}
.tabber .wds-tabs__tab:first-child a {
 border-bottom-left-radius: 3px;
 border-top-left-radius: 3px;
}
.tabber .wds-tabs__tab:last-child a {
 border-bottom-right-radius: 3px;
 border-top-right-radius: 3px;
}
.tabber .wds-tabs__tab a:active {
 background-color: #f0f0f0 !important;
}
.tabber .wds-tabs__tab.wds-is-current a {
 background-color: linear-gradient(#6FB3F4, #2687F7);
 color: white !important;
}
.tabber .wds-tabs__tab.wds-is-current a:active {
 background-color: linear-gradient(#5198F6, #1D6EDD);
}
.tabber .wds-tab__content {
 background-color: rgba(0, 0, 0, 0.25);
 border-radius: 3px;
 padding: 10px 10px 5px 10px;
}
=== Theme 3 - "Minified" Style ===
Code
.tabber .wds-tabs__wrapper {
 border-bottom: 0;
}
.tabber .wds-tabs__wrapper .wds-tabs {
 border-bottom: 3px solid #2aa198;
 font-size: 13px;
 padding: 0.3em 0 0;
}
.tabber .wds-tabs .wds-tabs__tab-label {
 height: auto;
 margin: 0;
}
.tabber .wds-tabs__tab a {
 color: #3a3a3a !important;
 font-weight: normal;
 font-size: 13px;
 padding: 0.3em 0.5em;
}
.tabber .wds-tabs__tab.wds-is-current {
 box-shadow: none;
}
.tabber .wds-tabs__tab.wds-is-current a {
 background-color: #2aa198;
 color: white !important;
}
.tabber .wds-tabs__tab:not(.wds-is-current) a:hover {
 background-color: rgba(42,161,152, 0.2);
}
=== Theme 4 - Flexbox ===
Code
.tabber .wds-tabs__wrapper {
 border: none;
}
.tabber .wds-tabs__wrapper .wds-tabs {
 background-color: #f8f8f8;
 border: 1px solid #eee;
 border-radius: 4px;
 font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
 justify-content: space-between;
}
.tabber .wds-tabs .wds-tabs__tab {
 box-shadow: none;
 flex-shrink: 1;
 text-align: center;
 transition-duration: 0.15s;
 width: 100%;
}
.tabber .wds-tabs__tab a {
 color: #999 !important;
 cursor: default;
 font-size: 15px;
 font-weight: normal;
 padding: 10px 0;
 transition-duration: 0.15s;
}
.tabber .wds-tabs__tab.wds-is-current, .tabber .wds-tabs__tab:hover {
 background-color: #eee;
}
.tabber .wds-tabs__tab.wds-is-current a, .tabber .wds-tabs__tab:hover a {
 color: black !important;
}
=== Theme 5 - Vertical ===
Code
.tabber {
 display: table;
 margin-top: 0.5em;
 width: 100%;
}
.tabber .wds-tabs__wrapper {
 border: none;
 display: table-cell;
 width: 200px;
}
.tabber .wds-tabs__wrapper .wds-tabs {
 align-items: flex-start;
 flex-direction: column;
}
.tabber .wds-tabs .wds-tabs__tab {
 box-shadow: none;
 font-size: 14px;
 padding-top: 1em;
}
.tabber .wds-tabs .wds-tabs__tab-label {
 height: auto;
 margin: 0;
}
.tabber .wds-tabs a {
 color: black !important;
 display: block;
 padding: 10px;
}
.tabber .wds-tabs__tab.wds-is-current a {
 background-color: #2aa198;
 border-radius: 3px;
 color: white !important;
}
.tabber .wds-tab__content.wds-is-current {
 display: table-cell;
 padding: 0em 1em;
}
=== Theme 6 - Oasis style ===
Code
.tabber .wds-tabs__wrapper {
 border: none;
}
.tabber .wds-tabs__wrapper .wds-tabs {
 border-bottom: 1px solid #ccc;
 display: block;
 font: bold 12px Verdana, sans-serif;
 padding: 3px 0;
}
.tabber .wds-tabs .wds-tabs__tab {
 box-shadow: none;
 display: inline-block;
 font: inherit;
 list-style: none;
 padding-top: 1em;
}
.tabber .wds-tabs .wds-tabs__tab-label {
 display: inline-block;
 font: inherit;
 height: auto;
 margin: 0;
}
.tabber .wds-tabs__tab a {
 background-color: #f2f7ff;
 border: 1px solid #ccc;
 border-bottom: none;
 display: inline;
 font: inherit;
 margin-left: 3px;
 padding: 3px 0.5em;
 text-decoration: none;
 white-space: pre;
}
.tabber .wds-tabs__tab.wds-is-current a {
 background-color: #fff;
}
.tabber .wds-tabs__tab a:link, .tabber .wds-tabs__tab a:visited {
 color: #448;
}
.tabber .wds-tabs__tab a:hover {
 background-color: #fff9f2;
 border-color: #ccc;
 color: #000;
 text-decoration: underline;
}
.tabber .wds-tabs__tab.wds-is-current a:hover {
 background-color: #fff;
 border-bottom: 1px solid #fff;
}
.tabber .wds-tab__content {
 border: 1px solid #ccc;
 border-top: 0;
 padding: 5px;
}
== Customizing individual aspects ==
=== Multiline Tabber - extra labels go to a new row instead of the horizontal scroll ===
Code
.tabber .wds-tabs {
 flex-wrap: wrap;
}
=== Removing the underline below the active tab label ===
Code
.tabber .wds-tabs .wds-tabs__tab {
 box-shadow: none;
}
=== Reduced label size and spacing, similar to the old design ===
Code
.tabber .wds-tabs .wds-tabs__tab-label {
 height: auto;
 margin: 0 1.5px;
}
.tabber .wds-tabs .wds-tabs__tab a {
 font-size: 12px;
 padding: 3px 0.5em;
}
== Known issues ==
If you find problems please report them on the associated talk page.