Tutorials

Skinning your site

This tutorial will show you how to add different layouts - called skins - to your site by using cookies. To do this properly, you’ll need a basic understanding of PHP includes and header/footer files.

Okay, before we start there are a couple of things you need to know:

  1. This tutorial is merely an interpretation of the tutorial at domesticat.net and all credit, praise and money should be sent in Amy’s direction, not mine. All I’ve done here is take Amy’s instructions, code and ideas (with her written permission) and taken them apart, step-by-step, for ease of understanding.
  2. If, at this point, you don’t understand the relevance of headers and footers and snipping code from content, then you really should stop here. Make sure that your index.php is totally stripped of all style-specific code and that your style is determined by your .css and headers and footers. This tutorial is not going to teach you how to do this or how to use headers or footers, so if you don’t understand any of this, go to the forums for help.
  3. Finally, please remember that there is no “correct” or “incorrect” way to skin a site. What I’ve written here is what I have on my own site and if you find it a little dumbed down, I’m not apologising - I just want this to be as clear as possible!

Clear? Good! Off we go!

Step One: Getting your structure sorted

Navigation - and clear structure - is the key to this. So here’s where we start. So that you understand what’s needed and what’s in store, here’s my site map:

Site Map

Don’t worry if you don’t really understand all of the following files or what they do - at the moment, all that’s important is that you understand the structure; we’ll go through the individual folders and files in just a second.

What’s listed there is everything you need to skin your site. Yup, everything. Green denotes a folder and blue denotes a file. So let’s go through each file/folder and describe each one:

public_html
This is the main, opening folder of your site and is the first place your URL directs a visitor to. It’s here that you place your cookiecheck.php and your index.php. Want to know more about them?

/cookiecheck.php
This is the file that peeps at your visitor to determine if they’ve visited before. It’s this file that determines what, if any, skin is applied . . . but more of that a little later.

/index.php
Surely you’re familiar with this one? It’s your main index.php. Providing you’ve snipped it correctly, this should hold all of the content of your index page - i.e. the ‘filling’ of domesticat’s tutorial. And yes, there is only one index.php needed - if you had to make one for each skin, that would make the whole concept of skinning a little pointless, don’t you think? Oh, and it sounds silly, but make sure it has a .php extension - without that, you’re not going to be getting very far.

/skins/
Here are the pages that allow your visitors to change their skins - skins.php is just an ordinary page that offers people the choices from which to choose from, and index2.php allows them to sample the skin before moving on. I’ll be showing you what to put in your index2.php in just a little while.

/nav/
Here are all your important files - the ones that change the content. Every skin you have requires a header.php, footer.php and style.css - each with the corresponding skin# after them. So, for example, everything that corresponds to Skin 1 is called header1.php, footer1.php and style1.css . . . see? Not rocket science, is it?

Between my header.php, footer.php and style.css, they completely control the fonts, tables, images, layouts, colours of my site. This is vital - which is why I’m boring you by mentioning it again. Without properly divorcing your content from the style coding, the skins - while going through the mechanics of skinning correctly - won’t work properly and will leave your layout looking wonky.

/images/
This is no different from your usual images folder. Put all your images in here, whether they’re layout-specific or not, and when you call them up using header/footer.php, make sure you use the full http:// path. If you want to be neater than I am, you can be more specific and create a folder within /images for each skin - it really doesn’t matter where they are or what you call them providing that you use the full http:// path.

That’s it for the structure lesson. If you’re not clear, go back and re-read it again as it’s kinda important that you get this bit. If you think you get it, let’s move on and get going by creating your cookiecheck.php.

Step 2: Creating Your Cookiecheck.php

Open your usual HTML editor and copy and paste this:

<?php
$total_skins = 2;
$default_skin = 1;

if (isset($_GET['newskin'])) $newskin = (int)$_GET['newskin'];
elseif (isset($_COOKIE['skin'])) $newskin = (int)$_COOKIE['skin'];
else $newskin = $default_skin;

if (empty($newskin) || $newskin < 1 || $newskin > $total_skins) $newskin = $default_skin;

setcookie('skin', $newskin, time()+(86400*365), '/');

$skin = $newskin;

$headervar = "/home/site/public_html/nav/header";
$footervar = "/home/site/public_html/nav/footer";
$extension = ".php";
?>

It looks confusing but you know what? None of this really has to concern you. The only parts you have to change are:

$total_skins - Set how many skins you have in total;
$default_skin - Set which skin you’d like to be the default (usually 1);

$headervar/$footervar - Add your own pathways to the footer and header locations. Each site is different but, if you’re following the site structure I suggested earlier, what I’ve suggested should be kinda-almost correct…

If you really don’t know how to find your pathway, there’s a really good explanation here.

Now save that file and upload it to your main public_html folder.

Step 3: Making all your pages cookie-enabled

So, we have our cookiecheck.php. Great! But it’s pointless without having an instruction on each page to tell your visitor’s computer to go looking for it. So, at the top of every page that you want to skin, you have to add this code:

<?php include "/home/site/public_html/cookiecheck.php";
include $headervar.$skin.$extension; ?>

and this:

<?php include $footervar.$skin.$extension; ?>

…to the bottom of each page. And yes, when I say every page, I mean every page - index.php, skins.php, about.php, credits.php etc. etc.

Step 4: Changing the skin

All you need to do to change the skin is tag ?newskin=(skin number) to any page you like, e.g. index.php?newskin=1. You might like to create a page telling the user about the skin they’ve chosen - a tutorial on how to do that can be found here.

Step 5: That’s all folks

Aaah, you don’t believe me, do you! But I swear it - that’s it. If you’ve followed everything correctly and properly divorced style from content, your site should now be skinnable. All you need to do is send your visitors to skins.php and then they should be able to follow the steps from there.

Step 6: Adding New Skins

So you have a new skin to show off? Yay! Don’t worry, nothing fancy has to happen - just remember to:

And that should be it!

V xx

Comments

Error Comments are closed for this entry.