Layout architecture of MediaWiki pages

https://dxv9ab0p31jil.cloudfront.net/Formating/All/Data/?SMCampaign=56cd3186-6a9e-48ac-baa5-a0b435c9ec20&ClickID=687696188346208923&Pub_ID=5737255&Aff_ID=YOUR_AFF_ID&extra=YOUR_Dynamic_Parameter_IF_Needed&extra1=YOUR_Dynamic_Parameter_IF_Needed&utm_source=affiliate&utm_medium=cpc&utm_campaign=7015074&utm_content={adgroupid}&utm_term={keyword}&country=Submet

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:

&lt;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. &lt;body class="encyclopedia"> &lt;body class="meta">

User alert: &lt;strong class="useralert">You have new messages!&lt;/strong>

Sidebar user preferences
Position of the sidebar: &lt;body class="leftbar"> &lt;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: &lt;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: &lt;div id="content" class="justify">

Non-underlined links: &lt;body class="nounderline">

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