Programming

Pm Wiki Skins

What is it

Well, that's how I modified my original PmWiki configuration to allow changing the layout and colours of the site on a per-user basis.
Just click on the skin you want at the bottom of the left pane.

The following is a very detailed description of every steps involved, so don't be put off by the length of this article, it's actually quite simple.

Basics of skins

I used the cookbook recipe described on the PmWiki website but had to modify a couple of things to make it work for me.

From the official website:

Cookbook Skins describes how skins are organised in PmWiki.
Cookbook SkinChange allows skins to be chosen and retained by visitors by using a client-side cookie to store their preference.

Create skins

Create new directories under pub/skins/. the name of each new directory and of the template and CSS files should be the same, for instance for the blue skin, you would have the following minimum files:

    
    pub/skins/blue/blue.css
    pub/skins/blue/blue.tmpl

If you only want the CSS style sheets to change and keep a single template for your whole site, create links to pub/skins/pmwiki/pmwiki.tmpl.
Under linux, you can create symbolic links using ln -s or, a hard link using cp -al (my prefered).
This will mean that any modification of any linked template will be instantly repercuted to all other skins, since they are the same file:

cp -al pub/skins/pmwiki/pmwiki.tmpl pub/skins/blue/blue.tmpl

Correct the original template

There what I believe to be a small error in the original pmwiki template that needs fixing, otherwise your skins based on that template won't work.

At the top of the pmwiki.tmpl file, change:

    <link rel='stylesheet' href='$SkinDirUrl/%red%pmwiki%%.css' type='text/css' />

    <link rel='stylesheet' href='$SkinDirUrl/%red%$Skin%%.css' type='text/css' />

Installation

Just download the SkinChange script from the link above, install it in as cookbook/skinchange.php directory and add the following to your local/config.php configuration file:

# Enable CSS skins
# See http://www.pmwiki.org/wiki/Cookbook/SkinChange
$Skin = 'green'; # Default skin
$PageSkinList = array(
'pmwiki' => 'pmwiki',
'blue' => 'blue',
'green' => 'green');
include_once('cookbook/skinchange.php');
# Add a (;skin:)markup that gets the name fo the current skin
Markup('skin', 'directives', '/\$:skin:\$/e',"Keep(\"$Skin\")");
$Conditions['skin'] = "\$GLOBALS['Skin']==\$condparm";

Line 3 forces the $Skin global to something different than the default skin, which is pmwiki.

The $PageSkinList array contains the skin name and path of each skin we make available. I prefer to use identical names to prevent any issues.

Line 10 is optional and creates a new directive (:skin:) that will be replaced by the current name of the skin when used. For instance, you are now using the glossyhue skin.

Line 11 is also optional and allows a new ConditionalMarkup to be used with skins:

    
    (:if skin blue:)Nice blue sky today!(:if:)
    (:if skin green:)Good day Nature lovers!(:if:)
    (:if skin pmwiki:)Enough style!(:if:)

For your selected skin, we get .

Using in your Wiki pages

To create the links that will allow a change of skin for the user, see the CookBook Skins reference above.

The links on my site follow the recommendations on that Cookbook page:

    
    * [[{$Name}?setskin=blue | Blue]]
    * [[{$Name}?setskin=green | Green]]
    * [[{$Name}?setskin=pmwiki | Basic Text]]

becomes

Leave your comments below