Forum:Customize Tabber Style

Hai, just want to know if it's possible to stylize the Tabber ? using css or something ? by WieQuadrat (talk) 15:50, September 11, 2012 (UTC)

I request that like 5 topics ago. Lucky for you I figure it out. It's really hard to do but I found out to make it work with css. The trick is using the opacity filters. Note that this css below is really messy but it works. It seems that only the active tab has an class on it what's really frustrating and that class doesn't even work properly. You have to use straight html. I hope some more experience people can help further with the modification of tabber.

And if the wiki staff read this. Please let those classes work properly with css -_-.

/* Tabber modification */ /** Change color tabs header background **/ ul.tabbernav { background-color: rgb(255, 0, 0); opacity:1.00; filter:alpha(opacity=100); } ul.tabbernav:hover { background-color: rgb(255, 0, 0); opacity:1.00; filter:alpha(opacity=100); } /** Controle inactive tabs **/ ul.tabbernav li a { opacity:0.2; filter:alpha(opacity=20); font-color: gray; } ul.tabbernav li a:hover { opacity:1.00; filter:alpha(opacity=100); font-color: black; } ul.tabbernav li a:link { background-color: rgb(255, 0, 0); opacity:1.00; filter:alpha(opacity=100); font-color: black; } ul.tabbernav li a:hover { background-color: rgb(255, 0, 0); opacity:1.00; filter:alpha(opacity=100); font-color: black; } ul.tabbernav li a:link:hover { background-color: rgb(255, 0, 0); opacity:1.00; filter:alpha(opacity=100); font-color: black; } /** Modification for active tab. Strange thing this tabber active, if give it an style it will replace himself and create an square next to the active tab. But if you remove it than it will change to his default color white. In order to fix simply change it to transparent **/ .tabberactive { background-color: transparent; font-color: black; } .tabberactive a:link { opacity:2.00; filter:alpha(opacity=200); font-color: black; }

--Jens Ingels (talk) 18:12, September 11, 2012 (UTC)


 * CSS for tabber is placed here. You can customize the appeareance using given selectors there, but you should apply high priority to your code like next example:


 * etc.