Fandom

Community Central

Admin Forum:Tabber Colors

19,033pages on
this wiki
Add New Page
Talk0 Share

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.

This Forum has been archived

Forums: Admin Central Index Technical Help Tabber Colors
Wikia's forums are a place for the community to help other members.
To contact staff directly or to report bugs, please use Special:Contact.


Is there any way to customize the colors on the tabs on Tabber? -- Webkinz ManiaTalkBlogsContributionsEditcount 22:02, August 22, 2011 (UTC)

Yes, there is a number of css classes that define the color theme of the tabber. The entire style sheet for the tabber is:
/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
.tabberlive .tabbertabhide {
 display:none;
}
 
/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber {
}
.tabberlive {
 margin-top:1em;
}
 
/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav
{
 margin:0;
 padding: 3px 0;
 border-bottom: 1px solid #778;
 font: bold 12px Verdana, sans-serif;
}
 
ul.tabbernav li
{
 list-style: none;
 margin: 0;
 display: inline;
}
 
ul.tabbernav li a
{
 padding: 3px 0.5em;
 margin-left: 3px;
 border: 1px solid #778;
 border-bottom: none;
 background: #DDE;
 text-decoration: none;
}
 
ul.tabbernav li a:link { color: #448; }
ul.tabbernav li a:visited { color: #667; }
 
ul.tabbernav li a:hover
{
 color: #000;
 background: #AAE;
 border-color: #227;
}
 
ul.tabbernav li.tabberactive a
{
 background-color: #fff;
 border-bottom: 1px solid #fff;
}
 
ul.tabbernav li.tabberactive a:hover
{
 color: #000;
 background: white;
 border-bottom: 1px solid white;
}
 
/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
 padding:5px;
 border:1px solid #aaa;
 border-top:0;
 
 /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */
 
 /* height:200px; */
 
 /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */
 
 /* overflow:auto; */
}
 
/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
 display:none;
}
.tabberlive .tabbertab h3 {
 display:none;
}
 
/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
 height:200px;
 overflow:auto;
}
You can override these definitions by adding custom ones to your wikis MediaWiki:Wikia.css. As an example, see this page and the corresponding CSS overrides in MediaWiki:Wikia.css (tabber definitions section). Sovq 07:07, August 23, 2011 (UTC)

Also on Fandom

Random Wiki