PHP Tutorial - Skin System

Well here it is, the most commented thing about my site is the skin system, this will show you just how it works, and whilst the logic behind it is fairly easy, the problem is making it all work together, as this system uses cookies and CSS extensively as well - so a working knowledge of both is worthwhile - check the CSS section if you need any help!

NOTE: THIS TUTORIAL REFERS TO THE SKIN SYSTEM IN A PREVIOUS VERSION OF INFINITE-FIRE.

My Setup

I have two stylesheets, style_orange.css and style_purple.css - and an includes setup as seen in my includes tutorial, I also have global variable ON, and a $page variable determining which content is included - again, see my includes tutorial.

The Idea

When making this system I was looking mainly at ease of updatability, i.e. it wouldn’t (much) need new coding or work to add a new skin, so CSS is a must - basically ALL this system does is switch the stylesheet based on a form variable. The action for the form is stored in the file itself, in my case index.php, where if the $skin variable is not set, then we set it to a default value, so that the site can be seen without choosing a skin first, this is set in a cookie - then using a simple switch statement we set a value of $stylesheet based on the selected item in the form - don’t worry this will make more sense soon!

The Form

The form is simply a drop-down menu in our case, with a variable $skin, with possible values purple and orange, as shown below:

<form name=’skin_selector’ action=‘index.php’ method=‘get’>
<select name=’skin’>
<option value=‘green’>Green</option>
<option value=‘purple’>Purple</option>
</select>
<input type=‘hidden’ name=’skin_selector’><br>
<?
if (isset($page)) {
echo ‘<input type=’hidden’ name=’page’ value=’$page’>’;
};
?>
<input type=’submit’ name=‘Submit’ value=‘Change’>
</form>

Simple enough so far - I hope so, basically what this does is sets the $skin variable, and also a hidden $skin_selector variable, which is used to decide whether to set a cookie or not in the next step. It also contains a hidden variable called $page which is necessary in my system, so that visitors can change the skin no matter what page they’re on, and not be redirected to index.php.

The Processing Part

I will explain this code line by line, as it is probabaly somewhat confusing if you are not confident with PHP - but first let me stress two things:

1 - This code MUST be before ANY other code on the page - that includes <head> tags - I have it in an include on every page (although thats only one page - index.php - follow my PHP includes tutorial to see how to do this)
2 - I have global variables turned ON - newer versions of PHP have this turned OFF by default - so if you get errors along the lines of
`Undefined Variable : $skin_selector in line 3` - then insert this code before all the rest:

$skin_selector = $_GET[’skin_selector’];
$page = $_GET[‘page’];
$skin = $_GET[’skin’];

That should make it work, anyway here is the code, explained line by line - note you can leave the explanations in if you want - they are not processed by the php compiler.

// Set cookie to remember what skin theyre using
// If coookie variable is NOT set, set it to purple
if (!isset($coookie)) { $coookie = ‘purple’; };
// If the hidden $skin selector variable IS set…
if (isset($skin_selector)) {
// Then set the $cookie variable to whatever $skin is
setcookie (‘coookie’, $skin,time()+3600);
// If the $page variable IS set, i.e. the user isnt on the home page
if (isset($page)) {
// Then reload the page theyre on
echo(‘<body onload=’top.location=’index.php?page=$page’;'>’);
}
// If $page is NOT set…
else {
// Then reload index.php
echo(‘<body onload=’top.location=’index.php’;'>’);
}}

I sure hope that makes sense, all it does however, is set a cookie I hear you say - where do the decisions take place? - here you go…

// Sort out the stylesheet variables
// The variable to be used in the switch is set - in this case $coookie
switch ($coookie) {
// If the $coookie variable is set to ‘orange’
case ‘orange’ :
// Set $stylesheet to code for style_orange.css
$stylesheet = ‘<link href=’style_orange.css’ rel=’stylesheet’ type=’text/css’>’;
break;
// If the $coookie variable is set to ‘purple’
case ‘purple’ :
// Set $stylesheet to code for style_purple.css
$stylesheet = ‘<link href=’style_purple.css’ rel=’stylesheet’ type=’text/css’>’;
break;
};

Well there we go - simple as that, and this cookie will last for an hour, if you want it to last longer then just use a bigger number instead of 3600 - however most people delete their cookies every now and then, so most people wont notice, as long as the skins arent messing around whilst they browse the site.

To Include

Simply use a single include statement, with all the code above in the included file (in my case cookies.php) as below:
<? include ( ‘cookies.php’ ); ?>

Then print the stylesheet variable in the usual place (inside the <head> tag) - as shown below:
<? print ‘$stylesheet’ ; ?>

Setting up the style sheet

OK, so you’ve done all the stylesheet selection, have it all working - but how does that translate to my skin system? The secret is the css attribute background-image - as you see on the diagram - the <span> tag is used (or <div> - but this sometimes causes linebreaks, so i generally use span - if anyone can see a reason why div is better, then please tell me) - the height is set using the css height: attribute - the CSS code for the navbar is set in an external style sheet (so it can be used on all pages) is shown below:

.navbar {
background-image: url(images_orange/navbar.gif);
background-repeat: repeat-x;
height: 32px;
}

This code is called using:
< span class= ‘navbar’ ></ span >

Conclusion

Simple enough? I hope so - the rest of the site is the same basically

Infinite-Fire