goodly designs for the average tasteful chapHow to Skin Your Site
If you're one of those people who may have some difficulty choosing one layout to use, skinning your site is a solution for you. This tutorial will show you how to allow your visitors to choose from a variety of skins the one they want to use. I must credit Tutorialtastic, for the codes.
To begin
First make sure the pages are in .php format. You should be able to convert .htm or .html's over by simply renaming them and fixing any links. However, some hosting services do not allow the use of PHP and if this is true for yours you won't be able to skin your site with PHP.
Create a skins directory
The first step is to create a folder (a directory) called skins (or something to that effect) in your root directory. For this tutorial I'll have this directory named skins, so anywhere it says "skins" in the coding, you should change it to whatever your directory is called (if you choose to call it something else).
Help! I don't know what you're talking about!
If you don't know what the root directory is, or even what a directory is, never fear--I have whipped together a nifty diagram for you. The large bold words are the names of directories, and the small ones are files.
Directories are pretty much folders when you're talking about a website. The root directory is the motherload--Everything in your website is within it. Within the root directory you can have more directories; in this diagram they are Graphics, Layouts, and Tutorials. And inside these you can have even more directories...And so on and so forth...Of course, you can have regular old files in the directories as well.
Create a directory for each skin
Inside the skin directory create a directory for each skin you have. I'll name the directories with numbers (1, 2, 3, etc.). If you can, name them with numbers as well, because if you don't it'll be insecure and prone to whatever evil lurks in the hearts of men.
Create Stylesheet, Header, and Footer files
Pick one of these numbered directories to start with and create three files inside. One should be named stylesheet.css, another header.php, and the last footer.php.
The stylesheet.css file will be the external stylesheet for this layout. That means you put all your CSS on this file (you don't need style tags).
The header.php file will include everything from your doctype to where you would start typing the content of your page. It should reference the stylesheet page with a tag similar to the following:
<link rel="stylesheet" type="text/css" href="/skins/1/ stylesheet.css">
The footer file will have everything that comes after your content like the closing div tags, disclaimer, etc.
Open a plain text editor and paste in everything in your header.php file. Now instead of the line of coding that references the external stylesheet, paste it in as an internal stylesheet encompassed by style tags.
Following everything you've pasted in so far put some text, or whatever it is that makes up the content of your webpage. Finally, paste in the stuff in the footer.php file at the bottom.
If putting all this together as directed gives you a functioning webpage, you've done it correctly.
Repeat
Do the same thing for each of your skins. Your website's directories should be laid out like something akin to the following.
Create header.php in the root dir
In the root directory create a file named header.php and paste the following in there.
<?php
$pathtoskins = "/home/username/public_html/skins/";
$defaultskin = XXX;
if (isset($_COOKIE['myskin']) && file_exists($pathtoskins .
$_COOKIE['myskin'] . '/header.php') && file_exists($pathtoskins
. $_COOKIE['myskin'] . '/footer.php')) {
$header = $pathtoskins . $_COOKIE['myskin'] . "/header.php";
$footer = $pathtoskins . $_COOKIE['myskin'] . "/footer.php";
$styles = "/skins/" . $_COOKIE['myskin'] . "/stylesheet.css";
} else {
$header = $pathtoskins . $defaultskin . "/header.php";
$footer = $pathtoskins . $defaultskin . "/footer.php";
$styles = "/skins/" . $defaultskin . "/stylesheet.css";
}
include($header);
?>
Change the "XXX" to the number that corresponds to the skin you want as default. Also, you need to make sure that the path to the skins directory (which is what's in quotations after "$pathtoskins = ") is correct. My path is rather funky--
/www/zzl.org/f/i/g/figmint/htdocs/skins/
It looks weird because its the "absolute path". You can learn how to find yours here.
Create footer.php in the root dir
Now do the very same thing, but with the following code. The only difference is that it says footer instead of header at the bottom.
<?php
$pathtoskins = "/home/username/public_html/skins/";
$defaultskin = XXX;
if (isset($_COOKIE['myskin']) && file_exists($pathtoskins .
$_COOKIE['myskin'] . '/header.php') && file_exists($pathtoskins
. $_COOKIE['myskin'] . '/footer.php')) {
$header = $pathtoskins . $_COOKIE['myskin'] . "/header.php";
$footer = $pathtoskins . $_COOKIE['myskin'] . "/footer.php";
$styles = "/skins/" . $_COOKIE['myskin'] . "/stylesheet.css";
} else {
$header = $pathtoskins . $defaultskin . "/header.php";
$footer = $pathtoskins . $defaultskin . "/footer.php";
$styles = "/skins/" . $defaultskin . "/stylesheet.css";
}
include($footer);
?>
Select a skin page
In the root directory, create a page called setskin.php. This is the page where you'll have all the links to click in order to switch the skin.
Paste this in:
<?php
if (isset($_GET['skin']) && is_numeric($_GET['skin']) &&
is_dir('/home/username/public_html/skins/' . $_GET['skin'])) {
setcookie("myskin", $_GET['skin'], time()+(31*86400));
header("Location: setskin.php");
}
include('header.php');
if (isset($_COOKIE['myskin'])) {
echo "You are currently set to skin ".(int)$_COOKIE['myskin']."</p>";
} else {
echo "<p>You are currently set to the default skin.</p>";
}
?>
<p>Switch to...
<a href="setskin.php?skin=1">...skin 1.</a>
<a href="setskin.php?skin=2">...skin 2.</a>
<a href="setskin.php?skin=3">...skin 3.</a>
</p>
<?php include($footer); ?>
is_numeric($_GET['skin']) &&
Make sure to replace "/home/username/public_html/skins/" (on line three of the code above) with the absolute path to your directory. For example, mine is /www/zzl.org/f/i/g/figmint/htdocs/skins/. Its my absolute path plus the additional /skins/ that leads to the skins folder.
Almost done...
Now at the top of every page in your root directory that you want to display the layout, paste:
<?php include('header.php'); ?>
and at the very bottom:
<?php include('footer.php'); ?>
And finally...
If you have pages in subdirectories that branch of from the root directory and you want them to display the layout, you will need to post the full path to the header and footer pages (in your root directories).
That means it'll look like this:
<?php include('/home/username/public_html/header.php');
?>
Welcome to my site! Blah blah, blah, etc.
<?php include('/home/username/public_html/footer.php');
?>
Or, in my weird case:
<?php include('/www/zzl.org/f/i/g/figmint/htdocs/header.php');
?>
Welcome to my site! Blah blah, blah, etc.
<?php include('/www/zzl.org/f/i/g/figmint/htdocs/footer.php');
?>
