Wowpedia:Styling

File:Wikiicon-gnome-at-work-logo.png

The reason for the styling project is that there are design issues with trying to format things – like navigational aids, notices, and many other kinds – so that they appear decent on all skins, while bringing (or avoiding) attention to them.

The project was born out of such a concern. The formatting of pages throughout the wiki are bent towards the default "wowwiki" skin. This skin has a dark gray background for article text, and behind that is an even darker gray, nearly but not quite black. The text is white. So we have traditionally made pretty much all text white, and had for our notices other dark colors.

This turns out to be very ugly and perhaps blinding when viewing the same page on another skin. But when viewing (with this wowwiki skin) a more plain version which looks fine on any other skin, it looks very bland, and in fact ugly. That was the original reason for spicing it up, and the reason for it looking terrible on any other skin. Thus, following a complaint, this project was started.

For a greatly abbreviated history, see the discussion page, and specifically the very first edit thereof.

Does much have to change?

All the templates that we currently have could remain. Below, in the class list is "tab". All that would change in each of the templates that render tabs is the line that formats each of the borders. More specifically, Template:Tlink would simply read:

<span class="tab">article</span>

See how simple the new code is? The render of it would depend on the skin, and hopefully the developers for each skin would translate the coloring of it according to how the tabs look on the specific skin.

Branch formatting

Upon looking at WoWWiki:Community portal, I got an idea that – in the same way that the U. S. Army has branch colors and the U. S. Navy has rate colors – we could assign colors to various branches of our own, for use in formatting. Each branch might even have very different formatting – one might have top-and-bottom borders, another might have borders all around. Stub boxes, nav boxes, and others should have roughly similar formatting and coloring, according to the branch it belongs to. Each branch would maintain its section of the CSS file. Schmidt

Examples

• Quest articles
• Equipment articles and boxes (including template:equipment)
• Professions articles and boxes (including template:gems and template:herbs)

  preferably, each of the gathering and production professions would have different colors, if not other formatting

• WoWWiki articles and boxes (including policy announcements)
• Lore/fanfic articles
• NPC articles
• Dungeon articles

Class list

Here is a list of the classes we have so far agreed upon which other skins may (should, but not must) describe. The classes that are already in the CSS should find their way here as well. This list, of course, could change dramatically, based upon discussion that ensues. Surely more will come to mind.

Needed to keep

• usermessage – used for saying "You have new messages." when someone has changed your user talk page.

DIVs and TABLEs

These will describe what could be DIVs or TABLEs. Remember that {| and |} is rendered as a TABLE, in the end.

mostly administrative

• navboxright – for all or most boxes that are floated right)
• policy – for policy notifications
• notice – for any important notice
• itembox – for what now appears using Template:Tlink
• npov – formatting for an Template:Tlink box (rationale could be applied to just about any box, which is fine by me. Schmidt)
• voteaffirmative – which could be for a successful vote on policy, etc., or a failed vote to delete
• votenegative – which could be for a failed vote on policy, or a successful vote to delete

• proc – for the green text that appears in tooltips

SPAN

These are SPAN classes and should be specified as such. The only reason you wouldn't use SPAN for these is if you used FONT (which is long deprecated anyway) or SMALL, or perhaps another element. These may be enough encouragement that we might want to specify only by class name.

• The various qualities, since they should all be displayed differently by each skin. Note that these could be hybrid, where it would be described as class="epic item". This way a skin can describe .item with a #000 background, that could be applied without describing each quality.
  • artifact
  • legendary
  • epic
  • rare
  • uncommon
  • common
  • poor
• tab – this would be used to replace the formatting code found in Template:Tlink and such

What has been done so far?

A very rough draft of CSS code for the wowwiki skin has been developed:

• WoWWiki:Styling/wowwiki.css (at time of writing, this doesn't have all the code – just additions)

Resources

Tools

• Web Developer 1.0.2 plugin for Firefox. Let's you edit the CSS of a page live. If you don't have Firefox: get it for this job. It's worth it.

Current formatting situation

• WoWWiki's default skin CSS [1]
• WoWWiki's Monobook skin CSS [2]
• WoWWiki's Nostalgia skin CSS [3], and also refers to MediaWiki:Nostalgia.css, unlike the others

Resources for learning CSS

• W3C's definition of CSS 2.1, which is the standard

  Property index, a list of all the properties which can be used to format in CSS

• Microsoft MSDN, which is Microsoft's version of the real thing

  anything listed here which is not standard will probably not work in Firefox or several other browsers.

• w3schools.com, tutorial site
• December.com, helpful for anyone learning HTML, and has some stuff for CSS too – very tutorial