Layout architecture of MediaWiki pages

Basic page architecture

Each layout skin's HTML must conform to the same basic page scaffold. This consists of a number of elements with IDs below the BODY element. These will probably be DIV elements, but need not be. All content should be inside one of these elements.

The basic tree of elements is:

body element
- header id
- main id (usually just a wrapper)
  - content id - the actual rendered wiki text
  - linkbar id
- footer id

With en:CSS, this allows several different basic layouts. For example, the linkbar can be lined up with the top of the page, or the bottom of the header.

This scaffold document shows the basic structure. It's designed to be viewed on Mozilla, with three alternate stylesheets to show possible visual layouts: use View -> Use Style to change between them. Some crappy browsers may display all the alternate stylesheets which will look terrible.

The location of individual elements within the scaffold may vary. For example, the Wikipedia logo can go in header or linkbar; the page title will usually be in "header", but on the Cologne skin it is in "main".

However, the element with id="content" should always hold the rendered wiki text of the page and nothing else: later versions of MediaWiki will cache this.

Hooks

Consistent class and id names used across all templates allow us to use global stylesheets across all layouts (for print, for example). They also allow certain user preferences (such as having the sidebar on the left or right) to work independently of any particular layout.

The use of two classes in one element may be replaced with something else if it turns out that some browsers can't handle it. (Netscape 4 is a culprit, for example: Netscape users will simply have always have the sidebar on the left.)

Print hooks

These classes label elements, wherever they appear in the document tree. This allows the print stylesheet to easily hide online links. Each class may occur several times in the document, and an element may have several classes applied to it. If a class is applied to several elements, but the template stylesheet needs to apply rules to only one, you can use IDs as well as classes on them, use two different element types (a DIV and P, say), or select with the container (eg #header .pagelinks).

In global stylesheets, no element name should be used in the selector. For example, use ".search" rather than "div.search", since each template may apply the classes to any kind of HTML element (P, DIV, etc).

sitetitle - applied to the H1 that holds the "Wikipedia" site name and any other site title elements (eg "The Free Encyclopedia" on Cologne skin
pagetitle - applied to the H1 that holds the name of the page
fromwp - the "from Wikipedia" text
search - search form and links
pagelinks - "edit", "watch", "discuss" etc
sitelinks - "main page", "RC", etc
userlinks - "my watchlist", IP, Log in, Preferences etc
pagestats - "last modified" and GFDL text
languages - language links

PHP hooks

The PHP script will apply classes to certain HTML elements as it generates pages. For example the body element might look like:

<body class="wikipedia-en encyclopedia leftbar nounderline">

This breaks down to:

wikipedia-en: this is just a hook for the user's local stylesheets. It is not used by the server stylesheets
encyclopedia: sets the white page background.
leftbar: sets the position of the sidebar on the left
nounderline: removes underlines from links

Per page things

The body background colour is used to distinguish encyclopedia articles from meta and user pages. This hook may also be used to change colours, page title font, etc.

<body class="encyclopedia"> 
<body class="meta">

User alert:

<strong class="useralert">You have new messages!</strong>

Sidebar user preferences

Position of the sidebar:

<body class="leftbar">
<body class="rightbar">

This is applied on the body level, because several elements need to set their margins to make room for the sidebar. (This is an unfortunate consequence of the current CSS box model.) If this is problematic with bad browsers, an alternative solution would be to make a div wrapper immediately inside the body element.

The sidebar can also be fixed relative to the browser window:

<div id="linkbar" class="fixed">

Some browsers (notoriously IE/Win) break spectacularly on the position:fixed rule. The proposed solution is to place a warning about this on the preferences page.

Text and links user preferences

Justified text:

<div id="content" class="justify">

Non-underlined links:

<body class="nounderline">

NOTE This option should NOT be set by default. See w3c accessibility guidelines.