Wiki source for Mod038fWikkaSkins


Show raw source

==== Wikka Mod 038 ====
Type: Feature Addition
----
===Credit:===
**[[http://www.wakkawiki.com/AndyStevens | AndyStevens]]**
[[http://www.wakkawiki.com/CssThemes | CssThemes @ WakkaWiki]]
----

<<Also check WikkaSkinSelector for an easier way of installing [[Docs:WikkaSkins | skins]]<<::c::

==== CSS Themes ====
This 'hack' is a different way to create themes, using only css and cookies. This method does not require you to make multiple headers and footers like [[http://www.wakkawiki.com/WakkaThemes | WakkaThemes]] does and will help to maintain consistency on your Wakka.
Place all of the css files in your css/ folder.

**First** create a page called 'wikiskin.php' with the following code, replace foo.com with your own domain name, and place the file in your css/ folder. This is the file that when linked to will create the cookies that will be stored on the users computer. ##$wikiskin## is the skin they have chosen.
%%<?php
$wikiskin = $set;
setcookie ('wikiskin', $set, time()+31536000, '/', 'foo.com', '0');
$wikiskin = $set;
header("Location: $HTTP_REFERER");
?>%%

**Then** open up actions/header.php, and change this line (in the head data of the page)

##<link rel="stylesheet" type="text/css" href="<?php echo $this->""GetConfigValue""("base_url") ?>css/wakka.css" />##
to

##<link rel="stylesheet" type="text/css" href="<?php echo $this->""GetConfigValue""("base_url") ?>css/**<?php echo (!$wikiskin)?'wakka':$wikiskin ?>**.css" />##

The added code is bolded. This code checks to see if there is a cookie set on the users computer, and if there is it uses that skin, if not it reverts to the default skin, in this case the generic wakka skin.

**Lastly** create a topic called WikkaSkins or whatever you feel like calling it. Then, add the links that will let users change skins, in this format:
##http://www.pathto.com/wakkafolder/css/wikiskin.php?set=fooskin ##
The above link will set the users skin to //fooskin//
Now your done. For an example, visit http://mcshasta.com/w/WikiSkins

The setup on my wakka is as follows.
files in the css/ folder: ##wakka-original.css, wakka-blue.css, wikiskin.php##
head data: ##<link rel="stylesheet" type="text/css" href="<?php echo $this->""GetConfigValue""("base_url") ?>css/<?php echo (!$wikiskin)?'wakka-blue':$wikiskin ?>.css" />##
link format: ##http://www.mcshasta.com/w/css/wikiskin?set=wakka-original ##

----
CategoryLayout
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki