Forum:Tabber Class Question

I recently found out that the tabber class works inside another tabber by combining tabber with an syntax tabber. Now I want to add classes to it. But it looks harder than I thought:

Tab 1=

Tab 2= Tab 3=

The TabberPage seem to be working. The problem comes for the TabberDefault class. It seems he can't override that one. TabberDefault is thesame style as the noclass element so in fact I need something so the noclass style get loaded. I first tryed the span tag but that doesn't seem to work. The div is the only that can override it. --Jens Ingels (talk) 23:51, November 1, 2012 (UTC)


 * It's probably a cascade problem, the styles on TabberPage are probably more specific than TabberDefault. Or TabberDefault doesn't override everything TabberPage changed. Lunarity 01:06, November 2, 2012 (UTC)

I currently use this css. The wikia.css currently has the tabberdefault style without this event. Any idea how I could get it work. Maybe an js modifcation or an alternative tab system:

--Jens Ingels (talk) 01:59, November 2, 2012 (UTC)


 * TabberDefault is a DIV, not a LI. " " matches nothing. Lunarity 03:56, November 2, 2012 (UTC)

Aw forgot to mention. I first used 2 divs. The LI was just an test to see if I could make it work this way.--Jens Ingels (talk) 09:04, November 2, 2012 (UTC)

I figured out an css that works I used an imported tag on the default. The only thing that I currently doesn't see to find out to change is the shadow background and padding. I used 2 div styles this time: /*********************************TABBER DESIGN 2**********************************/ /* The color choice is arbitrary and careless, I don't recommend using as is. */ div.TabberPage > .tabberlive > ul.tabbernav > li.tabberactive > a:link { background-color:#068; border-bottom: none; box-shadow: 0px; } div.TabberPage > .tabberlive > ul.tabbernav > li > a:link { background-color:#420; box-shadow: 1px 1px 1px rgba(0,0,0,0.66); color:white; border-radius: 5px 5px 0 0; font-size:25px; } div.TabberPage > .tabberlive > ul.tabbernav > li > a:hover { color: red; border-color: red; } div.TabberPage > .tabberlive > .tabbertab { background-color: transparent; border-bottom-left-radius: 0px 0px; border-bottom-right-radius: 0px 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-shadow: 0px; position: relative; /* Tab shadow goes under */ } div.TabberPage > .tabberlive > ul.tabbernav { border-bottom: 0; } /*********************************TABBER DESIGN**********************************/ /* The color choice is arbitrary and careless, I don't recommend using as is. */ div.TabberPage > div.TabberDefault > .tabberlive > ul.tabbernav > li.tabberactive > a:link { background-color: #7BB18B !important; box-shadow: 1px 1px 1px rgba(0,0,0,0.66) !important; border-radius: 5px 5px 0 0 !important; } div.TabberPage > div.TabberDefault > .tabberlive > ul.tabbernav > li.tabberactive > a:link { color: black !important; } div.TabberPage > div.TabberDefault > .tabberlive > ul.tabbernav > li > a:link { background-color: #B6D7C0 !important; box-shadow: 1px 1px 1px rgba(0,0,0,0.66) !important; color:white !important; border-radius: 5px 5px 0 0 !important; } div.TabberPage > div.TabberDefault > .tabberlive > ul.tabbernav > li > a:hover { background-color: #7BB18B !important; border-color: green !important; } div.TabberPage > div.TabberDefault > .tabberlive > .tabbertab { border-bottom-left-radius: 10px 5px !important; border-bottom-right-radius: 10px 5px !important; border-top-left-radius: 4px !important; border-top-right-radius: 4px !important; box-shadow: 0 5px 5px rgba(0,0,0,0.66) !important; position: relative !important; /* Tab shadow goes under */ } div.TabberPage > div.TabberDefault > .tabberlive > ul.tabbernav { border-bottom: 0 !important; }