so-youNET // Version 8 // Fresh and Funky

Skinning tutorial!

Domesticat's tutorial taught me how to do this! Although it is quite advanced, very good but in depth, so here I will break it down a bit -- this tutorial is still very long although if your site already uses classes and php includes you can skip alot of steps! its the initial setting your site up for the skinning thats hard!

What are skins?

What you need to use skins

Making your pages 'skin friendly'

Creating the stylesheet

Breaking your pages down

The cookiecheck file

Creating the header files

Creating the directories

The index.php file

Allowing users to change their skin

Problems?

What are skins?
Skins are individual layouts/appearances for your site. My site has these, see when you go to http://so-you.net you choose which layout you want...they all go to the same page but a different layout comes up!

What you need to use skins
This tutorial uses PHP and cookies, there are other ways but I love PHP so that's the way it is! You need some knowledge of PHP for this!

Making your pages 'skin friendly'
When you change a skin you want to use as little code as possible. You don't want to be changing all the colours of your tables, headings, etc individually for each skin, you want the stylesheet to do this for you! So I would recommend using my setting the class tutorial this will show you how to split your site up into groups.

You do not want any <font color=black size=1> tags for example in ANY of your pages, instead group them and put <font class="heading1">. Keep a note of all the classes you have set and the names you have given them.

Creating the stylesheet
You will need an individual one of these for each of your skins, this will change the way your site looks, it is where you set the font size, color, border, etc of all the different classes you set when making your pages 'skin friendly'.

You need to save your stylesheet as a separate page see my css tutorial for more help, and below you can download an example stylesheet, from one of my skins

An example style sheet

Breaking your pages down
I would SERIOUSLY recommend you break your WHOLE site down using my php includes tutorial, this will make it so much easier to update your site when you add more skins and pages.

The cookiecheck file
Click here. You will need to copy everything there and paste it into notepad.

$total_skins = 14;
$default_skin = 1;

Change the numbers in bold. The 14 is the total number of skins you have and the 1 is the number of the default skin.

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

change yoursite.net to whatever your domain is

$headervar = "/home/username/public_html/skins/$skin/header.php";

Now you will need to change the part in bold. This is where your header files are stored, in the above example the header file is stored in a folder called skins, in a subdirectory of whatever skin number it is. You need to put the absolute path here i.e. not http://yoursite.com/skins/$skin/header.php

Now save the file as cookiecheck.php

Creating the header files
OK this is my version of skinning, if you are good at php you can learn to to adapt it. Your header files will contain everything that needs to be changed in eachskin, i.e the stylesheet, the main image, the title, etc. Heres an example for one of my header files.

So basically all my layout is there but of course I have used includes to call up the pages -- If you do not understand includes then this tutorial really won't work for you! you must read the previous steps

Creating the directories
For each skin I would suggest making a folder called either 1, or 2, etc depending on the skin number, then put in all the files for that skin, like any certain images, stylesheets, etc. Because in the cookiecheck file it will look for the folder in the directory you specified called the skin number.

The index.php file
This file brings together the cookiecheck file, the header file for a particular skin and all the other code that is used on every skin. What codes would you use on every skin? well for example you should be using includes, so you will want to add your php to call all your pages, also if you have a popup code for paypopup or something. So look at this

<? include("cookiecheck.php"); ?>

<?php
if ($action == "girl") $action2 = "girl";
elseif ($action == "tuts") $action2 = "you/tutorials";
elseif ($action == "goodies") $action2 = "you/goodies";
else $action2 = "middle";
?>

<? include("$headervar"); ?>

This calls the cookiecheck file, checks what skin you are using and includes the header file for that skin! simple really!

Allowing the users to change their skin
This is simple, simply put a link, eg

<A HREF="http://yousite.com/index.php?newskin=2">Change to skin 2</A>

Change the 2 to whichever skin number you want.

Problems?
It IS hard to get your head around at first, but read through it, follow the steps exactly, read the tutorials I said. It will take a long time if you have a html page where every page has countless <font> tags, etc and it doesn't contain php includes. But once you sort it out you will be SO happy, it is so much easier to update!

Still don't understand, or have I just written something stupid (I do apologise if I have but I have written this after a long day at school!) then feel free to email me at char@so-you.net and I'll try to help all I can!

! All tutorials © char, do not copy !