Skinning Layouts

Which layout do I put up? ARG! SO HARD TO CHOOSE! Well, it doesn't have to be. Why don't you put them ALL up? By skinning your layouts, you can. You can put all your layouts up, and have your visitors choose which one they want! But before you start with skinning, you MUST have background knowledge of PHP Includes and Absolute Paths. If you don't know what they are, you should find out, because you'll probably fail hardcore if you don't know any of that stuff.

Next, you'll need to download this zip folder so that you can have all the required files and an idea of how you're going to set all of this up on your site.

Assuming you know plenty about includes, we can continue. Skinning your site will consist of making several different header and footer includes, and organizing them into different folders. First, we're going to start by making a folder in your root directory (where all your files for your site are kept), and name it 'skins'. This is where we're going to keep all the different skin files.

In this folder, we're going to make several other folders. One for every skin, to be exact. So, let's just start with one skin. In this folder, you're going to have three files- header.php, footer.php, and style.css. These are going to be the exact same as if you were just doing regular includes in your site. So, we'll start with one layout. We'll make a folder called '1', and this will hold your header, footer, and stylesheet for your first skin.

Now that the easy part is done, we'll go on to the hard part- converting all your pages to skinned pages. Here, you'll replace your regluar includes (or convert your site to PHP to do this), with new ones. Your new pages will now look like this:

<?php include("/absolute/path/to/cookiecheck.php");?>
<? include($headervar.$extension); ?>

Content Goes Here

<? include($footervar.$extension); ?>


You'll have to change all your pages to look like this, or else the skins will not work. In the top line, you'll have to put in your absolute path, to a file that you'll be adding to your site next.

Next, you'll need to add and edit the file mentioned above. This file is included in the zip file you downloaded earlier, and it's called cookiecheck.php.

There are a few things you're going to look for in this file:

$total_skins = #;

Here, you'll change # to the number of skins you currently have. Every time you add a skin to your site, you'll need to change this number.

$default_skin = #;

This will be the number of the skin that you're going to want your default skin to be, so change # to the number of the skin you want your default skin to be. Each skin will have it's own unique number, so there SHOULDN'T be any problems, although I found that after I hit 10, my skins wouldn't work anymore.

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

Here, you'll change yoursite.com to your domain name, or if you're hosted, it'll be changed to you.yourhost.com.

$headervar = "/absolute/path/to/skins/$newskin/header";
$footervar = "/absolute/path/to/skins/$newskin/footer";


This is the last part you'll have to change. Where it says /absolute/path/to/, you'll have to put in the absolute path to all your skin files.

So now, you should have a new file on your site, cookiecheck.php, every file on your site should have all those includes on them, and you should have an all new folder on your site with all your skin files on them. If you have all this, and your files are all edited to suit your site, then your skins should now work. Now, you can add some more skins!

Basically, to add a new skin, make a new folder in your 'skins' folder called '2', add all your new header, footer, and stylesheets, and change your cookiecheck.php files accordingly. Your total skin count should now be 2, and if you wish, your default layout can be 2, as well. You won't have to edit any other files on your site, just upload all your new files and change your cookiecheck file. And just continue to do this for every other additional skin you add to your site.

To view or change between your new skins, put these links on your site:

<a href="?newskin=1">Skin 1</a>
<a href="?newskin=2">Skin 2</a>
<a href="?newskin=#">Skin #</a>


And that's about it! If this is difficult to follow, read it over again while looking over all the files included in the zip folder you downloaded at the beginning of this tutorial.

By Mahala