Well of Stars

Skinning your site

NB You need to read the section Preparing your layout first, if you haven't already done so!

Organising your files

Create a folder called 'skins' within the main directory of your site. Within that, create as many folders as you have skins, numbered 1,2,3 etc. In each folder, save the header.php, footer.php, css file and any layout images for that skin.

Make sure that any references to the css file or layout images within header.php include the path to this folder. For example, the link to the css file for your first skin should be <link rel="StyleSheet" type="text/css" href="skins/1/skin1.css">

The cookies.php file

This file sets a cookie in your visitors' browsers, which will allow them to change the skin for the site.

Open a blank file, and copy and paste the following:

<?php

$total_skins = 5;
$default_skin = 3;

if (isset($_GET['newskin'])) {
$newskin = (int)$_GET['newskin'];
if ($newskin < 1) { $newskin = $default_skin; }
if ($newskin > $total_skins) { $newskin = $default_skin; }
}
elseif (isset($_COOKIE['skin'])) {
$newskin = (int)$_COOKIE['skin'];
if ($newskin < 1) { $newskin = $default_skin; }
if ($newskin > $total_skins) { $newskin = $default_skin; }
}
else {
$newskin = $default_skin;
}
$skin=$newskin;
setcookie('skin',$skin,time()+(86400*365),'/');
setcookie('skin',$skin,time()+(86400*365),'/','yourdomain.com');

$headervar = $_SERVER['DOCUMENT_ROOT']."/skins/$newskin/header";
$footervar = $_SERVER['DOCUMENT_ROOT']."/skins/$newskin/footer";
$extension = ".php";
?>

The parts in bold are the bits you need to change: at the top, you need to put the total number of skins for your site, and the number of the skin you want to be your default.

Where it says 'yourdomain.com', you need to put the base url for your site. If you're hosted on a subdomain, include that, e.g. yoursubdomain.yourhost.com.

The last part, where it says $headervar = etc, gives the server path for your files. Normally you shouldn't need to change this. The variable $SERVER["DOCUMENT_ROOT"] calls up the filepath for your domain or subdomain. However, if you have a site within a subfolder which is not registered as a subdomain, then you need to include the name of that folder in the path before /skins. For example, each of my fanlistings is hosted in a folder on my subdomain fan.well-of-stars.co.uk. $SERVER["DOCUMENT_ROOT"] will give me the file path to that subdomain, but to skin one of the fanlistings, I need to include the name of the fanlisting folder, e.g.

$headervar = $_SERVER['DOCUMENT_ROOT']."/fanlisting/skins/$newskin/header";

Save the file as cookies.php, and upload it to your 'skins' folder.

The Include Code for skins

Now you need to add the php code to your content pages that will call up the cookies file and the correct header and footer.

At the very top of each page, add the following:

<?php @ require_once
($_SERVER['DOCUMENT_ROOT']."/skins/cookies.php");
?>

The same applies for this file path as for the paths in the cookies.php file.

Immediately below that, add:

<?php
@ require_once($headervar.$extension);
?>

Then at the end of each file, add:

<?php
@ require_once($footervar.$extension);
?>

Links to change the skins

Some skinning tutorials suggest using a special index2.php for the user to test a skin. I've never done this, but instead prefer to allow the user to change the skin on any page on the site. The simplest way to do this is to add links to change the skin somewhere within the header.php file - <a href="?newskin=1"> and so on.

You should now be ready to upload your files and test your site...

On to tips and troubleshooting: checking the file path
Back to contents