Extension:WikiSkin

From MediaWiki.org

Jump to: navigation, search
Manual on MediaWiki Extensions
List of MediaWiki Extensions
WikiSkin

Release status: beta
Implementation Skin, Variable
Description Using normal wikitext articles to define skin content and layout.
Author(s) Nad Talk
Version 0.1.12 (2007-10-16)
MediaWiki 1.6.0 - 1.11.0
Download OrganicDesign:Extension:Wikiskin.php

This extension allows the skin layout and content to be defined using normal wikitext articles instead of PHP script files. The special fields like personal tools and action links are all included with magic words. The extension is a single script which can be copied from OrganicDesign:Wikiskin.php and is included in the LocalSettings.php file as usual.

Contents

[edit] Skin and CSS articles

The name of the skin article which will be used is set in $wgWikiSkinArticle (Note that it will be put in the MediaWiki namespace). The CSS styles used to accompany the skin will be in the same article but with a ".css" suffix. For example if $wgWikiSkinArticle is set to "Foo", then the skin article used will be "MediaWiki:Foo" and the CSS article will be "MediaWiki:Foo.css". Additionally, the MediaWiki:Common.css can be used to put CSS styles which apply regardless of the skin in use.

[edit] Monobook Skin

The example below is an example of a wikitext skin which replicates the standard MonoBook layout, except that the links in the left bar are transcluded from an article called "Navigation". The title of the article to be used for the skin is defined in the $wgWikiSkin global variable, and should be set before the include so that the skin query-string parameter or user-preference can override it if necessary.

<div id="globalWrapper">
<div id="column-content">
        <div id="content">
                {{SITENOTICE}}
                <h1 class="firstHeading">{{TITLE}}</h1>
                <div id="bodyContent">
                        {{SUBTITLE}}
                        {{INFO}}
                        {{TEXT}}
                        {{CATLINKS}}
                        <div class="visualClear"></div>
                </div>
        </div>
</div>
<div id="column-one">
        <div id="p-cactions" class="portlet">
                <h5>Views</h5>
                {{ACTIONS}}
        </div>
        <div class="portlet" id="p-personal">
                <h5>Personal tools</h5>
                <div class="pBody">
                {{PERSONAL}}
                </div>
        </div>
        {{SITELOGO}}
        {{SEARCH}}
        {{:Navigation}}
</div>
</div>
<div class="visualClear"></div>

[edit] Conditional skin content

Here's some examples of making some of the skin components hidden depending on the environment. You'll need the ParserFunctions extension or similar for the #if function to work.

Don't show the page title on the main page,

<h1 class="firstHeading">{{#ifeq:{{PAGENAME}}|Main Page||{{FULLPAGENAME}}}}</h1>

Only show the action buttons if "wiki" is in the domain name

<div class="actions">{{#if:{{#pos:{{SERVER}}|wiki}}|{{ACTIONS}}}}</div>

[edit] Livelet Skin

The main reason for developing this extension was for creating skins which include Livelets to allow dynamic updating and efficient caching of content in the page. The following example skin is the same as above, but makes the transcluded navigation links in the left panel into a dynamic livelet so that the browser will request and cache it separately from the rest of the page. This is a big advantage if the navigation links are a large tree which would otherwise have to load every time a new page was visited.

<div id="globalWrapper">
<div id="column-content">
        <div id="content">
                {{SITENOTICE}}
                <h1 class="firstHeading">{{TITLE}}</h1>
                <div id="bodyContent">
                        {{SUBTITLE}}
                        {{INFO}}
                        {{TEXT}}
                        {{CATLINKS}}
                        <div class="visualClear"></div>
                </div>
        </div>
</div>
<div id="column-one">
        <div id="p-cactions" class="portlet">
                <h5>Views</h5>
                {{ACTIONS}}
        </div>
        <div class="portlet" id="p-personal">
                <h5>Personal tools</h5>
                <div class="pBody">
                {{PERSONAL}}
                </div>
        </div>
        {{SITELOGO}}
        {{SEARCH}}
        {{#live:Navigation}}
</div>
</div>
<div class="visualClear"></div>

[edit] Change Log

  • Version 0.1.12 (2007-10-16): Upgrade body tag to 1.11 way
  • Version 0.1.11 (2007-09-20): Changes to skin and css article naming
  • Version 0.1.10 (2007-09-17): Bug fixed which prevented "skin" query-string item taking effect
  • Version 0.1.9 (2007-09-03): Toolbar bug found - page needs makeGlobalVariablesScript()
  • Version 0.1.8 (2007-08-28): Templates can now be used in CSS articles
  • Version 0.1.6 (2007-07-18): Fixed a bug causing skin to revert after login/logout

[edit] See also

Retrieved from "http://www.mediawiki.org/wiki/Extension:WikiSkin"
Personal tools