Customization:Explaining skins
From Eugene Neighbors
Contents |
[edit] A quick explanation of what a 'Skin' really is
'Skin' is a class that appears to contain functions to pull together all the relevant bits to generate the HTML that your browser displays as each page in the Wiki.
What really happens is that each skin is a different class that inherits the 'Skin' class, then implements each of the necessary functions to draw the page.
[edit] How this is applied in MediaWiki
In version 1.3 of MediaWiki, the includes directory defines 4 different types of class which extend Skin; SkinCologneBlue, SkinNostalgia, SkinStandard and SkinPHPTal. 4 classes then extend SkinPHPTal; SkinDaVinci, SkinMono, SkinMonoBook and SkinMySkin, although SkinDaVinci and SkinMono are not avaliable in the list of validSkinNames defined at the start of Skin.php.
SkinPHPTal uses the PHPTAL library to generate pages using the TAL defined in the xhtml_slim.pt page in the templates directory, but in each of the defined subclasses, a different style sheet is used to change the look and feel. The classes not inherited from SkinPHPTal all generate their output directly in the traditional way.
In version 1.4 of MediaWiki, things have changed somewhat and a new Class has appeared called SkinTemplate, which inherits from Skin. SkinDaVinci and SkinMono are gone and a few new disabled classes have appeared; SkinMonoBookTal, SkinAmethyst, SkinChick and SkinWikimediawiki. SkinMonoBook now extends SkinTemplate instead of SkinPHPTal, although SkinTemplate is almost identical to the old SkinPHPTal file.
At a quick glance loan modification the idea now is that SkinTemplate is a class where the process of interpreting the contents of the TAL xhtml_slim.pt page have been replaced by a generated PHP page. This means that the TAL page needs only be interpreted once, rather than every time a page is to be displayed link building service.
[edit] How the skins lay out the page
The original means of generating the output page used a large table. The function central to this is outputPage which generates the HTML using 3 primary functions, headElement, beforeContent and afterContent, and the class variable mBodytext. The afterContent function calls the quickBar function which generates the quickbar menu, which is enclosed in a div block with an id "quickbar".
A new means of generating the HTML pages has been implemented using PHPTal. This involves a PHPTal specification file, in xhtml format, where HTML tags are marked with attributes which indicate to a parser how it can manipulate the contents of the file to end up with a page still in the original template. In version 1.3.10 the SkinPHPTal class extends Skin, and the outputPage function simply sets up variables in the PHPTal object, then runs the parser. In version 1.4beta6 this has moved to SkinTemplate. I've not looked at this in depth, but I believe some of the PHPTal interpretive code has been rewritten so as to have the same effect by simply calling code that is now in the skins directory.
[edit] How the stylesheet controls the new layout
The new template HTML page template consists of a number of div sections that are each identified by either or both of an id and class attribute in the div tag, but contain data. The stylesheet then controls how each div block is drawn and where on the page it is positioned.
The class "portlet" defines the basic style of the div blocks not part of the main page. Each block is then tailored slightly by referring to it in the stylesheet by id.
The main page section is a block with id "column-content" which contains the block with id "content". This contains the main content heading with class "firstHeading" and the block "bodyContent" which contains a subheading identifying the MediaWiki site name, the "contentSub" block, the actual page contents and a "visualClear" block. The portlets section (for want of something better to call it) is a block with id "column-one" containing portlet blocks with id "p-cactions", "p-personal", "p-logo", "p-nav", "p-search" and "p-tb". At the bottom of the page is a block with id "footer", containing "f-poweredbyico" and "f-list" blocks.
[edit] Major style blocks by name
The following are important identifiers in the stylesheet.
- column-content is used to define the overall space within the margins of which the content exists.
- content is the white background, thin bordered box which contains the main page content.
- firstHeading is the class of the heading tag at the top of every page
- bodyContent actually contains the main page content within the content box
- contentSub defines the style of text which would indicate the name of the wiki immediately underneath the main heading, but above the body text
The portlet class is the style used by all the div blocks around the main content. The following are identified blocks using that class
- p-cactions is the id for the list of tabs above the main content
- p-personal is the id for the list of links that include the login or logout page at the top of the page.
- p-logo is the id for the block that contains the logo (in the top left)
- p-navigation is the default id for the block that contains the navigation links on the left of the page. The composition of this is controlled by editing MediaWiki:Sidebar. If the name of the section is changed by editing that page, then the corresponding CSS ID is also changed and your CSS will no longer apply unless you change the corresponding section in the style sheet. Example: if you edit MediaWiki:Sidebar to change the word 'navigation' to 'navigating', the section is now ID'd '#p-navigating'
To further complicate the issue, the Sidebar can even be split into multiple blocks based upon the structuring of MediaWiki:Sidebar. Each of these blocks will have separate CSS IDs.
- p-search is the block that contains the search buttons
- p-tb is the block that contains the toolbox links
The footer at the bottom of the page includes blocks with the following ids:
- footer is the overall footer container block
- f-poweredbyico is the powered by mediawiki image that normally resides to the right of the page
- f-list is the id for the list that contains all the bits of text at the bottom of the page.
