Giza skin and Layout architecture of MediaWiki pages: Difference between pages
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
== Basic DOM == |
|||
'''Giza''' is one of several proposed new WikiMedia layout [[skins]] being worked on by [[User:Tarquin|Tarquin]]. |
|||
The basic structure is: |
|||
* body element |
|||
** header id |
|||
** main id (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. |
|||
It is intended to become the default skin, and is aimed at the casual reader of Wikipedia. See the [[Layout design document]]. |
|||
[http://wiki.beyondunreal.com/misc/wp/scaffold.html This scaffold document] shows the basic structure, with three alternate stylesheets to show possible visual layouts. On Mozilla, use View -> Use Style to change between them. Some crappy browsers may display all the alternate stylesheets which will look terrible. |
|||
== Design == |
|||
Clarity is the paramount. The casual reader is looking for information. This template must: |
|||
* work on all browsers, all platforms. The goal for old browsers is "usable, maybe ugly". |
|||
* give links for readers a greater priority than links for editors, possibly even omitting editing links completely or having them only in the page footer. |
|||
The location of individual elements within the scaffold may vary: the Wikipedia logo can go in header or linkbar. Some however, should not: the element with id="content" should always hold the rendered wiki text of the page. |
|||
== |
== Hooks == |
||
Consistent class and id names used across all templates allow us to use global stylesheets (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. |
|||
[http://wiki.beyondunreal.com/misc/wp/giza-3.html Test version] |
|||
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 DOM. 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 needs to position only one, use an ID on it, or use two different elements. |
|||
If a section has a header, the classes do not need to be applied to the header. (Headers can be hidden in print by a "#linkbar h2" selector, for example.) |
|||
In global stylesheets, no element name should be used in the selector: use ".search" rather than "div.search", since each template may apply the classes to any kind of HTML element (P, DIV, etc). |
|||
* 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 |
|||
* fromwp - the "from Wikipedia" text |
|||
=== System hooks === |
|||
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"> |
|||
=== Preference hooks === |
|||
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. |
|||
Combined, the sidebar and body background colour hook might give: |
|||
<body class="encyclopedia leftbar"> |
|||
The sidebar can also be fixed relative to the browser window: |
|||
<div id="linkbar" class="fixed"> |
|||
Some browsers (notoriously IE/Win) break spectacularly on this. The proposed solution is to place a warning about this on the preferences page. |
|||
Revision as of 18:11, 27 December 2003
Basic DOM
The basic structure is:
- body element
- header id
- main id (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, with three alternate stylesheets to show possible visual layouts. On Mozilla, 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: the Wikipedia logo can go in header or linkbar. Some however, should not: the element with id="content" should always hold the rendered wiki text of the page.
Hooks
Consistent class and id names used across all templates allow us to use global stylesheets (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 DOM. 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 needs to position only one, use an ID on it, or use two different elements.
If a section has a header, the classes do not need to be applied to the header. (Headers can be hidden in print by a "#linkbar h2" selector, for example.)
In global stylesheets, no element name should be used in the selector: use ".search" rather than "div.search", since each template may apply the classes to any kind of HTML element (P, DIV, etc).
- 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
- fromwp - the "from Wikipedia" text
System hooks
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">
Preference hooks
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.
Combined, the sidebar and body background colour hook might give:
<body class="encyclopedia leftbar">
The sidebar can also be fixed relative to the browser window:
<div id="linkbar" class="fixed">
Some browsers (notoriously IE/Win) break spectacularly on this. The proposed solution is to place a warning about this on the preferences page.