Fandom Developers Wiki
Advertisement

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:

<tabber>
Label 1 = 
Tab 1 content
|-|
Label 2 = 
Tab 2 content
|-|
Label 3 = 
Tab 3 content
</tabber>

For more information about tabbers, see Help:Tabber on Community Central.

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

Tabber Customized.png

Theme 2 - macOS Tabber Style

Code
.tabber .wds-tabs__wrapper {
    border: none;
}

.tabber .wds-tabs__wrapper .wds-tabs {
    background: transparent;
    padding: 3px 0;
    text-align: center;
    margin: 0 0 -10px 0;
    flex-wrap: wrap;
    justify-content: center;
}

.tabber .wds-tabs .wds-tabs__tab-label {
    margin: 0;
    height: auto;
}

.tabber .wds-tabs__tab a {
    background: #ffffff;
    border: none;
    color: #444444 !important;
    font-family: Helvetica, Sans-serif;
    font-size: 13px;
    font-weight: 300;
    margin: 0;
    padding:2px 12px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75);
    cursor: default;
}

.tabber .wds-tabs__tab:first-child a {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.tabber .wds-tabs__tab:last-child a {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.tabber .wds-tabs__tab a:active {
    background: #f0f0f0 !important;
}

.tabber .wds-tabs__tab.wds-is-current a {
    background:linear-gradient(#6FB3F4, #2687F7);
    color:white !important;
}

.tabber .wds-tabs__tab.wds-is-current a:active {
    background:linear-gradient(#5198F6, #1D6EDD);
}

.tabber .wds-tab__content {
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.25);
    padding: 10px 10px 5px 10px;
}

Theme 2 - OS X Yosemite Tabber Style result.png

Theme 3 - "Minified" Style

Code
.tabber .wds-tabs__wrapper {
    border-bottom: 0;
}

.tabber .wds-tabs__wrapper .wds-tabs {
    font-size: 13px;
    border-bottom: 3px solid #2aa198;
    padding: 0.3em 0 0;
}

.tabber .wds-tabs .wds-tabs__tab-label {
    height: auto;
    margin: 0;
}

.tabber .wds-tabs__tab a {
    font-weight: normal;
    font-size: 13px;
    padding: 0.3em 0.5em;
    color: #3a3a3a !important;
}

.tabber .wds-tabs__tab.wds-is-current {
    box-shadow: none;
}

.tabber .wds-tabs__tab.wds-is-current a {
    color: white !important;
    background: #2aa198;
}

.tabber .wds-tabs__tab:not(.wds-is-current) a:hover {
    background: rgba(42,161,152, 0.2);
}

Theme 3 Minified style result.png

Theme 4 - Flexbox

Code
.tabber .wds-tabs__wrapper {
    border: none;
}

.tabber .wds-tabs__wrapper .wds-tabs {
    background: #f8f8f8;
    border: 1px solid #eee;
    font-family: Helvetica Neue, Helvetica, Arial ,sans-serif;
    border-radius: 4px;
    justify-content: space-between;
}

.tabber .wds-tabs .wds-tabs__tab {
    text-align: center;
    width: 100%;
    flex-shrink: 1;
    transition-duration: 0.15s;
    box-shadow: none;
}

.tabber .wds-tabs__tab a {
    padding: 10px 0;
    color: #999 !important;
    font-size: 15px;
    font-weight: normal;
    transition-duration: 0.15s;
    cursor: default;
}

.tabber .wds-tabs__tab.wds-is-current, .tabber .wds-tabs__tab:hover {
    background: #eee;
}

.tabber .wds-tabs__tab.wds-is-current a, .tabber .wds-tabs__tab:hover a {
    color: black !important;
}

Theme 4 style result.png.png

Theme 5 - Vertical

Code
.tabber {
    display: table;
    width: 100%;
    margin-top: 0.5em;
}

.tabber .wds-tabs__wrapper {
    display: table-cell;
    width: 200px;
    border: none;
}

.tabber .wds-tabs__wrapper .wds-tabs {
    flex-direction: column;
    align-items: flex-start;
}

.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 {
    display: block;
    padding: 10px;
    color: black !important;
}

.tabber .wds-tabs__tab.wds-is-current a {
    background: #2aa198;
    color: white !important;
    border-radius: 3px;
}

.tabber .wds-tab__content.wds-is-current {
    display: table-cell;
    padding: 0em 1em;
}

Theme 5 style.png

Theme 6 - Oasis style

Code
.tabber .wds-tabs__wrapper {
    border: none;
}

.tabber .wds-tabs__wrapper .wds-tabs {
    padding: 3px 0;
    border-bottom: 1px solid #ccc;
    font: bold 12px Verdana, sans-serif;
    display: block;
}

.tabber .wds-tabs .wds-tabs__tab {
    font: inherit;
    list-style: none;
    display: inline-block;
    padding-top: 1em;
    box-shadow: none;
}

.tabber .wds-tabs .wds-tabs__tab-label {
    font: inherit;
    height: auto;
    margin: 0;
    display: inline-block;
}

.tabber .wds-tabs__tab a {
    font: inherit;
    display: inline;
    padding: 3px 0.5em;
    margin-left: 3px;
    border: 1px solid #ccc;
    border-bottom: none;
    background: #f2f7ff;
    text-decoration: none;
    white-space: pre;
}

.tabber .wds-tabs__tab.wds-is-current a {
    background: #fff;
}

.tabber .wds-tabs__tab a:link, .tabber .wds-tabs__tab a:visited {
    color: #448;
}

.tabber .wds-tabs__tab a:hover {
    color: #000;
    background: #fff9f2;
    border-color: #ccc;
    text-decoration: underline;
}

.tabber .wds-tabs__tab.wds-is-current a:hover {
    background: #fff;
    border-bottom: 1px solid #fff;
}

.tabber .wds-tab__content {
    padding: 5px;
    border: 1px solid #ccc;
    border-top: 0;
}

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 {
    padding: 3px 0.5em;
    font-size: 12px;
}

Known issues

If you find problems please report them on the associated talk page.

Text above can be found here (edit)
Advertisement