Hi! Can anyone provide me the CSS codes to modify tabbers? Please also provide the code for the "active" and "hover" things. Thank you!
Hi! Can anyone provide me the CSS codes to modify tabbers? Please also provide the code for the "active" and "hover" things. Thank you!
Need help!
You can use this CSS placeholder and insert some styling in the place that you need:
.tabberlive { /* tabber wrapper style */ } .tabberlive > .tabbertab:not(.tabbertabhide) { /* tabber visible content */ } .tabberlive > .tabbernav > li > a { /* tabber tabs */ } .tabberlive > .tabbernav > li > a:hover { /* tabber tabs when being hovered */ } .tabberlive > .tabbernav > li > a:active { /* tabber tabs when being clicked */ } .tabberlive > .tabbernav > li.tabberactive > a { /* selected tabber tab */ } .tabberlive > .tabbernav > li.tabberactive > a:hover { /* selected tabber tab when being hovered */ } .tabberlive > .tabbernav > li.tabberactive > a:active { /* selected tabber tab when being clicked */ }
If you want an example, i used a modified version here, so you can check the MediaWiki:Wikia.css for some example styling.
Perfect! Thanks, Penguin-Pal!
@Jay: Here's an example from the Foxes Wikia:
.tabberlive .tabbertab { border:none !important; } ul.tabbernav { border-bottom: 1px solid #ef5883 !important; } ul.tabbernav .tabberactive a { background-color:#f6769a !important; border-radius:2px 2px 0 0 !important; border-top: 1px solid #ef5883 !important; border-left:1px solid #ef5883 !important; border-right:1px solid #ef5883 !important; color: white; } ul.tabbernav li a { background-color:pink !important; border-radius:2px 2px 0 0 !important; border:1px solid #ef5883 !important; color: white !important; }
It results in this:
Thanx KCC!
I'm glad to come across code like that; but are you also able to code in the font style that way? Like, if I were to make code like:
ul.tabbernav li a {
background-color:pink !important;
border-radius:2px 2px 0 0 !important;
border:1px solid #ef5883 !important;
color: white !important;
font: 'Comic Sans MS' !important;
}
Something like that?
In CSS, the "font" property is known as font-family
, though your code is otherwise correct.
ul.tabbernav li a { background-color:pink !important; border-radius:2px 2px 0 0 !important; border:1px solid #ef5883 !important; color: white !important; font-family: 'Comic Sans MS' !important; }
Also, this thread is several years old, so creating a new one would be best in the future. :)
Actually, I think that's all I'll need. Thanks!