Fandom Developers Wiki
Advertisement
Fandom Developers Wiki

The tabber is a way to show different text or images with clicking on a button at the top of the tabber. You can customize the buttons, borders etc. with the codes on this page.

Tabber tags

To use a tabber you use the code below.

<tabber>
|-|Title1=Text1
|-|Title2=Text2
|-|Title3=Text3
</tabber>

Full Custom Themes

You can use the code below to customize it. Please add it to Special:CSS or another css page to let it work.

Theme 1 - Semi-Tabview Design

Code
Oasis FandomDesktop
/* Customizing Tabber */
.tabbertab {
    border-top: 2px solid grey !important;
    border-bottom: 2px solid grey !important;
    border-left: 2px solid grey !important;
    border-right: 2px solid grey !important;
}

/* add spaces to tabview tabs */
.tabberlive > ul.tabbernav > li {
    margin-right: 2px;
}
    /* not applying on the last tabview tabs */
    .tabberlive > ul.tabbernav > li:last-child {
        margin-right: 0;
    }

.tabbernav {
    background: transparent;
    border-bottom: 0 !important;
    padding: 3px 0 !important;
}

ul.tabbernav li a {
    -moz-border-radius-topleft: 5px !important;
    -moz-border-radius-topright: 5px !important;
    background: #014604 !important;
    border-top-left-radius: 5px !important;
    border-top-right-radius: 5px !important;
    border: 2px solid black !important;
    color: white !important;
    font-size: 16px !important;
    font-weight: normal !important;
    margin-left: 0 !important;
    padding: 3px 0.5em !important;
    position: relative;
}

ul.tabbernav li.tabberactive a {
    background-color: #014604 !important;
    border: 2px solid black !important;
    color: white !important;
    cursor: default;
    font-size: 16px !important;
    font-weight: bold !important;
}

ul.tabbernav li.tabberactive {
    line-height: 0 !important;
}

    ul.tabbernav li.tabberactive:first-child a {
        margin-left: 0 !important;
    }

.tabbertab .ajax-poll {
    border: none !important;
}

.tabberlive .tabbertab h2,
.tabberlive .tabbertab h3 {
    display: block !important;
}
/* End of Customizing Tabber */
.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
Oasis FandomDesktop
ul.tabbernav li a {
    border:none !important;
    background: #ffffff !important;
    font-family: Helvetica !important;
    font-size: 12px !important;
    color: #444444 !important;
    font-weight: 300 !important;
    margin:0 !important;
    padding:2px 12px !important;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75);
    font-size: 13px !important;
    cursor:default;
}
ul.tabbernav li:first-child a {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
ul.tabbernav li:last-of-type a {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
.tabberlive .tabbertab {
    border: none !important;
    border-radius: 3px !important;
    background: rgba(0, 0, 0, 0.25) !important;
    padding:10px 10px 5px 10px !important;
}
ul.tabbernav {
    background: transparent;
    border-bottom: 0 !important;
    padding: 3px 0 !important;
    text-align:center;
    margin: 0 0 -10px 0 !important;
}
ul.tabbernav li a:active {
    background: #f0f0f0 !important;
}
ul.tabbernav li.tabberactive a {
    background:linear-gradient(#6FB3F4, #2687F7) !important;
    color:white !important;
}
ul.tabbernav li.tabberactive a:active {
    background:linear-gradient(#5198F6, #1D6EDD) !important;
    color:white !important;
}
.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
Oasis FandomDesktop
.tabbernav {
    font-family: inherit !important;
    font-weight: normal !important;
    font-size: 13px !important;
    border-bottom: 3px solid #2aa198 !important;
    padding: 0.3em 0 !important;
}
.tabbernav a {
    padding: 0.3em 0.5em !important;
    margin: 0 !important;
    color: #3a3a3a !important;
    border: none !important;
    background: transparent !important;
}
.tabberactive a {
    color: white !important;
    background: #2aa198 !important;
}
.tabbernav :not(.tabberactive) a:hover {
    background: rgba(42,161,152, 0.2) !important;
}
.tabbertab {
    border: none !important;
    padding: 0 !important;
}
.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
Oasis FandomDesktop
.tabbertab {
    border: none !important;
    padding: 0 !important;
}
.tabbernav {
    background: #f8f8f8;
    border: 1px solid #eee !important;
    padding: 0 !important;
    text-align: center;
    font-family: Helvetica Neue,Helvetica,Arial,sans-serif !important;
    border-radius: 4px;
    font-size: 15px !important;
    line-height: 15px !important;
    justify-content: space-between;
    display: flex;
}
.tabbernav li {
    font-size: 15px !important;;
    line-height: 15px !important;
    width: 100%;
}
.tabbernav li a {
    border: none !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    background: transparent !important;
    color: #999 !important;
    font-size: 14px;
    transition-duration: 0.15s;
    cursor: default;
    font-weight: normal !important;
    font-size: 15px !important;;
    line-height: 15px !important;
    width: 100%;
    display: inline-block;
}
.tabbernav .tabberactive a, .tabbernav li a:hover {
    color: black !important;
    background: #eee !important;
}
.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
Oasis FandomDesktop
.tabberlive {
    display: table;
    width: 100%;
    margin-top: 0.5em !important;
}
.tabbernav {
    display: table-cell !important;
    width: 200px;
    border: none !important;
    padding: 0 !important;
}
.tabbernav a {
    display: block;
    margin: 0 !important;
    border: none !important;
    padding: 5px !important;
    font-size: 14px;
    padding: 10px !important;
    background: transparent !important;
    color: black !important;
}
.tabbertab {
    border: none !important;
    padding: 0em 1em !important;
    display: table-cell;
}
.tabbertab p:nth-child(2){
    margin-top: 0 !important;
}
.tabberactive a {
    background: #2aa198 !important;
    color: white !important;
    border-radius: 3px;
}
.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 Bugs

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

Text above can be found here (edit)
Advertisement