Wikka Skin Selector

Theme support available in 1.2!

This page refers to beta functionality supported until Wikka 1.1.x. As of version 1.2 Wikka introduces support for 100%-modular themes: check this page for more information or this tutorial to learn how to design custom themes.

This action allows you to select a skin for WikkaWiki, among those present in the css/ folder.
Note: Your browser must accept cookies in order for the skin selector to work.

Here's the three-step installation:

1. Add your custom skins

Just put all your skins in the css/ folder of your Wikka installation.
Many skins can be downloaded and shared from the unofficial WikkaSkinsRepository.

2. Create the skin selector action (actions/selectskin.php)

Save the code below in a new file called actions/selectskin.php:
Minor update 2004-11-25

// Wikka Skin Selector
// Displays a form to switch CSS stylesheet

$currentskin = $this->GetCookie("wikiskin");
echo $this->Format("=== Select a Wikka skin:  === --- ");
if ($_POST) {
            $this->SetPersistentCookie("wikiskin", $_POST["skin"]);
$handle = opendir('css/');
print $this->FormOpen("","","post");
echo '<select name="skin">';
$noskinmask = '^(xml.css|print.css|\.(.*))$';
while (false !== ($file = readdir($handle))) {
    if (!preg_match('/'.$noskinmask.'/', $file)) {
        $selected = ($file == $currentskin)? " selected=\"selected\"" : "";
        print   '<option value="'.$file.'"'.$selected.'>'.$file.'</option>';
echo '</select>';
echo '<input type="submit" name="Submit" value="Set new skin" />';
print $this->FormClose();

3. Modify the Wikka Header (actions/header.php)

To allow skin selection a small modification of the header is needed:

original actions/header.php
  <link rel="stylesheet" type="text/css" href="css/<?php echo $this->GetConfigValue("stylesheet") ?>" />

modified actions/header.php
<link rel="stylesheet" type="text/css" href="css/<?php echo ($this->GetCookie("wikiskin"))? $this->GetCookie("wikiskin"): $this->GetConfigValue("stylesheet") ?>" />

How to use the skin selector

Just insert {{selectskin}} in a wikka page and start playing.

-- DarTar

CategoryDevelopmentActions CategoryLayout
Comments [Hide comments]
Comment by DarTar
2004-11-18 10:49:31
Regex help needed: how can you have ereg match all css files except xml.css and print.css?
Comment by NilsLindenberg
2004-11-18 11:05:24
Might be a dump idea, but won't another if (!$file == xml && !$file == print) do it?
Comment by DarTar
2004-11-18 15:42:41
I know, but I'm sure there is an elegant way to do it with regex ;-)
Comment by JavaWoman
2004-11-19 17:21:53
if you mean a regex to match a css filename:
off the cuff (untested) - try this for a regex:
and then test that there is NOT a match:
$xmlprintcss = '^(xml|print)\.css$';
if (!preg_match('/'.$xmlprintcss.'/',$filename))
// do something...
Comment by DarTar
2004-11-19 17:40:19
I guess that I've already tried with this kind of regex, but if I remember, the negation seems only to apply to single characters or sets of characters, not to alternate strings.
Comment by JavaWoman
2004-11-19 19:38:52
There's no negation in my regex itself: the regex matches the files you *don't* want; you then *test* it with a negation (if (!preg_match(...)).
The ^ in the regex means 'at the start', and $ means 'at the end'; that assumes you have just a file name; if you have a full path name then remove the ^ from the regex (but keep the $).
Comment by NilsLindenberg
2004-11-25 16:40:34
The Validator would like to have a /> at the end of your "input" (set new skin)!

See: http://validator.w3.org/check?uri=http%3A%2F%2Fwikka.jsnx.com%2FTestSkinEditor
Comment by JavaWoman
2004-11-25 18:43:33
Talking about valid code: the attribute for a selected choice should be 'selected="selected"'; merely 'selected' is not valid XHTML.
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki