Wikka Skin Editor
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 actions extends the WikkaSkinSelector giving Wikka Administrators the possibility to edit skins directly from a Wikka page.
The "edit" option is safely "masked" to normal users, who can only select alternate skins, but not modify them.
If you don't need to modify WikkaSkins, and just want to give the user the possibility to switch between alternate skins, please install the basic WikkaSkinSelector instead.
Feedback is welcome, especially on security issues.
Important note
The WikkaSkinEditor writes files to your wikka css/ folder.Please backup all your css before testing this action and use sample css sheets if you are not sure of what you are doing.
Requirements:
- Your browser must accept cookies in order for the skin selector to work.
- The css/ folder of your wikka installation must be write-accessible for the skin editor to work (chmod -R 777 css/ ).
Installation
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 editor action (actions/editskin.php)
2004-11-25: minor update - xml.css and print.css maskedSave the code below in a new file called actions/editskin.php:
<?php
// Wikka Skin Editor
// Allows Wikka Administrators to switch, edit and modify Wikka skins.
// The "Edit" field is masked to non-administrators, who can only select alternate skins.
// The css/ folder must be write-accessible for the modifications to take effect.
$currentskin = $this->GetCookie("wikiskin");
echo $this->Format("=== Select a Wikka skin: === --- ");
switch ($_POST["action"]) {
case "Save modified skin":
// saves modified skin to file
$css_file = fopen("css/".$currentskin, "w+");
fwrite($css_file, $_POST["mod_css_content"]);
fclose($css_file);
// no break
case "Set skin":
$this->SetPersistentCookie("wikiskin", $_POST["skin"]);
$this->Redirect($this->href());
break;
case "Edit skin":
$css_file = fopen("css/".$currentskin, "r");
$css_contents = fread($css_file, filesize("css/".$currentskin));
$showskin = '<textarea name="mod_css_content" cols="50" rows="15">'.$css_contents.'</textarea><br />'.
'<input type="submit" name="action" value="Save modified skin" /><br />';
fclose($css_file);
break;
}
$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="action" value="Set skin" /><br />';
if ($this->IsAdmin()) {
echo $this->Format(" --- **".$currentskin."** ").'<input type="submit" name="action" value="Edit skin" /><br />';
echo $showskin;
}
print $this->FormClose();
closedir($handle);
?>
// Wikka Skin Editor
// Allows Wikka Administrators to switch, edit and modify Wikka skins.
// The "Edit" field is masked to non-administrators, who can only select alternate skins.
// The css/ folder must be write-accessible for the modifications to take effect.
$currentskin = $this->GetCookie("wikiskin");
echo $this->Format("=== Select a Wikka skin: === --- ");
switch ($_POST["action"]) {
case "Save modified skin":
// saves modified skin to file
$css_file = fopen("css/".$currentskin, "w+");
fwrite($css_file, $_POST["mod_css_content"]);
fclose($css_file);
// no break
case "Set skin":
$this->SetPersistentCookie("wikiskin", $_POST["skin"]);
$this->Redirect($this->href());
break;
case "Edit skin":
$css_file = fopen("css/".$currentskin, "r");
$css_contents = fread($css_file, filesize("css/".$currentskin));
$showskin = '<textarea name="mod_css_content" cols="50" rows="15">'.$css_contents.'</textarea><br />'.
'<input type="submit" name="action" value="Save modified skin" /><br />';
fclose($css_file);
break;
}
$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="action" value="Set skin" /><br />';
if ($this->IsAdmin()) {
echo $this->Format(" --- **".$currentskin."** ").'<input type="submit" name="action" value="Edit skin" /><br />';
echo $showskin;
}
print $this->FormClose();
closedir($handle);
?>
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 editor
Just insert {{editskin}} in a wikka page and start playing.
-- DarTar
CategoryUserContributions CategoryLayout
