Wowpedia

We have moved to Warcraft Wiki. Click here for information and the new URL.

READ MORE

Wowpedia
Register
(added a description of the problem at hand, and list of classes that we might want to describe and work done)
 
(added resources to learn CSS and remind for those who know it, reformatted other parts)
Line 7: Line 7:
   
 
For a greatly abbreviated history, see the [[wowwiki talk:styling|discussion page]], and specifically the very first edit thereof.
 
For a greatly abbreviated history, see the [[wowwiki talk:styling|discussion page]], and specifically the very first edit thereof.
  +
   
 
== Does much have to change? ==
 
== Does much have to change? ==
Line 14: Line 15:
   
 
== Class list ==
 
== Class list ==
−
Here is a list of the classes we have so far which other skins may (''should'', but not ''must'') describe:
+
Here is a list of the classes we have so far agreed upon <!-- yes, I'm assuming that it will be agreed upon before we deal the blow --> 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.
  +
−
: ''The classes that are already in the CSS should be added here as well. This list could change dramatically, based upon discussion that ensues. Surely more will come to mind.''
 
  +
=== DIVs and TABLEs ===
 
These will describe what could be DIVs or TABLEs. Remember that <nowiki>{| and |}</nowiki> is rendered as a TABLE, in the end.
   
; These will describe what could be DIVs or TABLEs (''remember that <nowiki>{| and |}</nowiki> is rendered as a TABLE, in the end'')
 
 
* navboxright &ndash; for all or most boxes that are floated right)
 
* navboxright &ndash; for all or most boxes that are floated right)
 
* policy &ndash; for policy notifications
 
* policy &ndash; for policy notifications
Line 26: Line 28:
 
* votenegative &ndash; which could be for a failed vote on policy, or a successful vote to delete
 
* votenegative &ndash; which could be for a failed vote on policy, or a successful vote to delete
   
  +
−
; These are SPAN classes and should be specified as such
 
  +
=== SPAN ===
−
: 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; this may be enough to specify simply by class name
+
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 <code>class="epic item"</code>. This way a skin can describe .item with a #000 background, that could be applied without describing each quality.
 
* 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 <code>class="epic item"</code>. This way a skin can describe .item with a #000 background, that could be applied without describing each quality.
 
** artifact
 
** artifact
Line 37: Line 41:
 
** poor
 
** poor
 
* tab &ndash; this would be used to replace the formatting code found in {{tlink|articletab}} and such
 
* tab &ndash; this would be used to replace the formatting code found in {{tlink|articletab}} and such
  +
   
 
== What has been done so far? ==
 
== What has been done so far? ==
 
A very rough draft of CSS code for the wowwiki skin has been developed:
 
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 &ndash; just additions)
 
* [[WoWWiki:Styling/wowwiki.css]] (at time of writing, this doesn't have all the code &ndash; just additions)
  +
  +
  +
== Resources ==
  +
; Current formatting situation:
  +
* WoWWiki's default skin CSS [http://www.wowwiki.com/skins/wowwiki/main.css]
  +
* WoWWiki's Monobook skin CSS [http://www.wowwiki.com/skins/common/commonPrint.css]
  +
* WoWWiki's Nostalgia skin CSS [http://www.wowwiki.com/skins/common/nostalgia.css], and also refers to [[MediaWiki:Nostalgia.css]], unlike the others
  +
  +
; Resources for learning CSS:
  +
* [http://www.w3.org/TR/CSS21/ W3C]'s definition of CSS 2.1, which is the standard
  +
*: [http://www.w3.org/TR/CSS21/propidx.html Property index], a list of all the properties which can be used to format in CSS
  +
* [http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties.asp?frame=true 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.
  +
* [http://www.w3schools.com/css/default.asp w3schools.com], tutorial site
  +
* [http://december.com/html/ December.com], helpful for anyone learning HTML, and has some stuff for CSS too &ndash; very tutorial

Revision as of 16:43, 22 June 2006

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.

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.

DIVs and TABLEs

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

  • 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


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

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