Skins

Skins are a way to have several layouts on your site, so your visitors easily can change between them. I've read several tutorials that have just lead me out on deep water, so I'll try to make this one easy to understand, so you can actually manage to integrate skins on your site. Remember to do everything right, the smallest mistake causes mayhem, believe me.

1. Make a new folder in your main directory called skins. In this folder, make a new folder called 1. In this, you'll have your first skin. For each skin, create a new folder, called 2, 3 and so on.

2. For this to work, your site must be in PHP. If you already have that, then you probably use PHP includes, and have your layouts in documents called header.php, footer.php and stylesheet.css, and the only thing on your pages is the content. This, and the file names, are important. In the 1 folder, you upload these. In header.php you have everything from the start of the document, with layout, sidebar and such. In header.php you have

</body>
</html>

and other stuff that appears on the bottom of your pages.

3. Make sure there are now a folder in your main directory called skins, and in it there are a folder called 1, with the contents header.php, footer.php and stylesheet.php. Make another folder in skins which you call 2, and upload another layout, just the same way you did in 1.

4. In all your header.php's, make sure that the stylesheets are linked like this, so that the stylesheet works properly with the current skin. Be sure that the number of skin, /1/ or /2/ and so on, is correct.

<link rel="stylesheet" type="text/css" href="http://yoururl.com/skins/1/stylesheet.css"/>

5. Now, make a new document which you call header.php. Paste this;

<?php
$pathtoskins = "/home/username/public_html/skins/";
$defaultskin = 3;

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 /home/username/public_html/skins/ to fit your own information. If you have a subdomain, you have to ask your host for their username, and add your subdomain like this; /home/username/public_html/your subdomain/skins/. Upload this to your main directory.

6. Now make a new file which you call setskin.php. This shall also be uploaded to your main directory. It's important that header and setskin does not go in your skin folder or anywhere else, just the main directory. In setskin, paste this;

<?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 "<h2>You have changed skin!</h2>
<h6><p>You have no changed your skin to Skin {$_COOKIE['myskin']}, so keep on surfin' with a flashy new layout!</p></h6>";
} else {
echo "<p>There is no skin currently set.</p>";
}
?>

<?php include($footer); ?> Again, change the path to the same as you did in header.php. Upload this as well to your main directory.

7. Now it's time to change your pages so that they respond to this. Change out the old php includes so that all your documents now look like this:

<?php include('header.php'); ?>

content here.

<?php include($footer); ?>

When you are sure all your files are changed, upload them. Make sure that header.php, setskin.php, and all the folders in your skins folder is properly uploaded.

8. Now it's time to paste in links so that it's easy to change themes. Paste this somewhere in all your headers, and make sure that the information is right. Either you want picture links;

<a href="setskin.php?skin=1"> <img src="http://imageurl.jpg"></a>
<a href="setskin.php?skin=2"> <img src="http://imageurl.jpg"></a>

or text links:

<a href="setskin.php?skin=1">Change to skin 1?</a>
<a href="setskin.php?skin=2">Change to skin 2?</a>

If you've done everything right, you should be ready to go when everything is uploaded! If something is unclear, or you need help, don't be afraid to ask, just make a comment in my blog.
Warning: include() [function.include]: http:// wrapper is disabled in the server configuration by allow_url_include=0 in /home/blackst/public_html/tutorials/skinning.php on line 83

Warning: include(http://black-stripes.net/footer.php) [function.include]: failed to open stream: no suitable wrapper could be found in /home/blackst/public_html/tutorials/skinning.php on line 83

Warning: include() [function.include]: Failed opening 'http://black-stripes.net/footer.php' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/blackst/public_html/tutorials/skinning.php on line 83