Fandom

Wikia Developers Wiki

TabberDesign

909pages on
this wiki
Add New Page
Talk5 Share

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>

Customizing

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

Code
/* 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 */

This code will give you the following layout of the tabber:

Tabber Customized

Theme 2 - OS X Yosemite Tabber Style

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

This code will give you the following layout of the tabber:

Theme 2 - OS X Yosemite Tabber Style result

Theme 3 - "Minified" style

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

This code will give you the following layout of the tabber:

Theme 3 Minified style result

Theme 4 - Flexbox

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

Theme 5 - Vertical

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

Known Bugs

  • none

If you find bugs please let me know on my talk page or use the talk page of the article.

See also

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.