Search Site:

About

Linux

Printers?

Programming

Windows?

Download

Skins

Edit - To Do - AllRecentChanges

Recent Changes Printable View Page History Edit Page

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' />

by

    <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:

  1. # Enable CSS skins
  2. # See http://www.pmwiki.org/wiki/Cookbook/SkinChange
  3. $Skin = 'green'; # Default skin
  4. $PageSkinList = array(
  5.         'pmwiki' => 'pmwiki',
  6.         'blue' => 'blue',
  7.         'green' => 'green');
  8. include_once('cookbook/skinchange.php');
  9. # Add a (;skin:)markup that gets the name fo the current skin
  10. Markup('skin', 'directives', '/\\(:skin:\\)/e',"Keep(\"$Skin\")");
  11. $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 blue 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 Nice blue sky today!.

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
Enter your comment (no links allowed): Author:

Edit Page - Page History - Printable View - Recent Changes - WikiHelp - Search - RSS -
Page last modified on Monday 04 July 2005, at 04:27 GMT+8 - Viewed 3466 times