Classic WoW Wiki:Styling/wowwiki.css

/* The goal of this project is to eliminate or greatly decrease the amount of styling code in the text that editors write. By writing such code we allow other skins to either ignore the code that we intend, or the users of that skin can port the class, or they can reformat the class to fit their skin.


 * Examples:

On this skin you want a specific div to have a black background and white borders, and white text. But on another skin, when they see it, they go blind because of the high contrast.

If the same formatting was applied via CSS classing instead of inline formatting, the formatting would amount to the same on the one skin (where that class was described), but all other skins could completely ignore that div's formatting. Those skins that had no formatting to render the div would simply display it as any other div, however that class would normally format any other div. Those skins that had formatting for that class would apply that formatting to the div.



// these classes could apply to divs and tables, so you wouldn't want to specify either way: (using {| and |} renders a table, remember)

.navboxright { border: 1px solid black; padding: 0.5ex 1em; margin: 0; background-color: #282828; color: #e0e0e0; float: right; } // from template:apinav, for all or most boxes floated right

.policy { background: #282830; border: 1px #7777bb solid; padding: 0.3em 2em; margin: 1em 3em 2em; } // from template:guideline -- this would look better changed, probably

.notice { margin: 0.2ex 3em; border-top:1px solid #ffffff; border-bottom:1px solid #ffffff; text-align: center; padding: 0.4ex 1em 0.5ex; color: white; background-color: #000000; } // from template:guild

.itembox { background-color:#000; border:1px outset; width:20em; padding:1ex; margin:0 0 1ex 1ex; color: white; } // from template:itemboxcss

.listbox { float:right; text-align: center; font-size: 85%; font-family: Tahoma, sans-serif; background-color: #282828; margin: 0em 0em 1em 2em; padding: 1ex; border: 1px solid #000000; } // from template:listboxformat (could easily be the same as navboxright, but maybe we want them distinct

.npov { background:#382820; border-top:1px #a06020 solid; border-bottom:1px #a06020 solid; margin-left:2%; margin-right:2%; align:center; text-align:center; padding-left:2%; padding-right:2%; } // from template:NPOV

.voteaffirmative { margin: 0.2ex 3em; border-top:1px solid #409090; border-bottom:1px solid #409090; text-align: center; padding: 0.3ex 4em 0.4ex; color: white; background-color: #103038; }

// this could be a successful vote on policy or failed vote to delete, and could stand to look a lot better, IMO

.votenegative { margin: 0.2ex 3em; border-top:1px solid #b05050; border-bottom:1px solid #b05050; text-align: center; padding: 0.3ex 4em 0.4ex; color: white; background-color: #401010; }

// this could be a failed vote on policy or successful vote to delete

// the two above are from template:ratified and template:rejected (viewing source from browser--wouldn't have wanted to wade through all that template code!)

// span classes

span.artifact { color:; }

span.legendary { color:; }

span.epic { color:; }

span.rare { color:; }

span.uncommon { color:; }

span.common { color:; }

span.poor { color:; }

// from template:lartifact, and so on. the templates such as template:lrare could have in the span 'class="rare"' and in each skin it could have either the generic color, nothing at all (meaning just normal text color), or could include a background such as black or white, whatever, to make it more visible

span.tab { border-left:1px solid gray; border-top:1px solid gray; border-right:1px solid gray; font-size:8pt; padding:2px 8px 0px 8px; } // from template:articletab

// The rest of the CSS file would of course be here, too, with possibly new formatting, according to how we want it to look.