Layout architecture of MediaWiki pages
 | This page is obsolete. It is being retained for archival purposes. It may document extensions or features that are obsolete and/or no longer supported. Do not rely on any information on this page. |
Basic page architecture[edit]
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[edit]
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[edit]
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[edit]
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[edit]
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[edit]
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[edit]
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.