Tabber is an extension that allows you to create tabs within a page, which can be toggled without having to reload the page. The tabs can contain any valid wiki data (links, images, templates, etc.).
This extension is not normally active, but may be available on request.
See also[]
CSS styling[]
Styling for Tabber general should be placed in a Gamepedia wiki's MediaWiki:Common.css (it may also be found in either MediaWiki:Hydra.css or MediaWiki:Hydradark.css). The following are some empty CSS selectors with comments indicating which part of the tabs the selector styles.
/* This will style the div that contains the whole tabber object. Generally this can be left alone. */
body .tabberlive {
}
/* This will style each tab's content area. */
body .tabberlive .tabbertab {
}
/* This is the box that surrounds all the tabs. */
body ul.tabbernav {
}
/* This is a box that surrounds each of the tabs. */
body ul.tabbernav li {
}
/* This is the style for the tabs, parts of this can be overridden for the current tab with the next selector */
body ul.tabbernav li a,
body ul.tabbernav li a:link,
body ul.tabbernav li a:visited,
body ul.tabbernav li a:hover {
}
/* This is the style for the currently selected tab */
body ul.tabbernav li.tabberactive a,
body ul.tabbernav li.tabberactive a:link,
body ul.tabbernav li.tabberactive a:visited,
body ul.tabbernav li.tabberactive a:hover {
}
Styling certain tabbers differently on a single wiki[]
If you wish to have tabbers in certain places that look different from other tabbers on the wiki you could wrap tabber in a container with a custom class then add additional CSS to style the tabbers that appear inside those containers with this custom class. The following example would make the tabbers inside containers with class="round-tabber" have rounded corners on the tabs (not really a practical style difference, but it shows the idea).
- Example wiki code
<div class="round-tabber">
{{#tabber:
...
}}
</div>
- Example CSS
.round-tabber ul.tabbernav li a,
.round-tabber ul.tabbernav li a:link,
.round-tabber ul.tabbernav li a:visited,
.round-tabber ul.tabbernav li a:hover {
border-radius: .5em .5em 0 0;
}
Complete overhaul of the style[]
The default styling for Tabber is white with square tabs. Some wikis, in particular dark-themed wikis, need to make fairly major changes to this default look. The following selectors provide an example of a dark-themed tabber with centered tabs which have rounded edges at the top.
/* Tabber styling */
.tabberlive .tabbertab,
.tabber .tabbertab {
/* border-color: #505050; */ /* If you keep all borders the same */
/* border-style: solid; */ /* If you keep all borders the same */
/* border-width: 1px; */ /* If you keep all borders the same */
border-bottom-color: transparent; /* doesn't have to be transparent, could be the same border color used elsewhere */
border-left-color: transparent; /* doesn't have to be transparent, could be the same border color used elsewhere */
border-right-color: transparent; /* doesn't have to be transparent, could be the same border color used elsewhere */
border-top-color: #505050; /* This should match your general choice of border color */
border-image: none;
border-style: solid none none;
border-width: 1px medium medium;
}
ul.tabbernav {
border-bottom: none;
}
ul.tabbernav li a {
background: none repeat scroll 0 0 #000000; /* This should match your general choice of background color */
border: 1px solid #505050; /* This should match your general choice of border color */
border-image: none;
border-radius: 5px 5px 0 0; /* This is only if you want your tabs to have rounded corners */
margin-left: 3px;
padding: 3px 0.5em;
text-decoration: none;
}
ul.tabbernav li {
display: inline;
list-style: none outside none;
margin: 0 0 0 7px;
}
ul.tabbernav li a:link {
color: #7AB1CC; /* This should match your anchor color, but simply being different from the default text color works */
}
ul.tabbernav li a:hover {
background: none repeat scroll 0 0 #000000;
border-color: #505050; /* This should match your general choice of border color */
color: #FFFFFF;
}
ul.tabbernav li.tabberactive a {
background-color: #000000;
color: #FFFFFF;
}
ul.tabbernav li.tabberactive a,
ul.tabbernav li.tabberactive a:hover,
ul.tabbernav li.tabberactive a:link {
background-color: #000000;
border-bottom: 1px none;
padding: 2px 0.5em 4px;
}
ul.tabbernav {
text-align:center; /* if you want the tabs to be centered rather than left-justified with respect to the tab content */
}