Skinning your Site

ID: PHP - 2
Date Added: 2005-11-28
Category: PHP
Difficulty: Hard
Author: Rei

Starting Off

This is a very very advance PHP coding, and I would suggest if you're just starting PHP, that you refer to the other simple coding first. I'm not trying to discourage you from trying, I just want you to know that if you aren't successful the first time, it's not something that you should be crying about; try again some time later on in the future.

Skinning simply means literally "peel" your layouts into pieces, and allow you visitors to choose their favourite skins. Mine (site) is an example of skinned site. This tutorial will require your knowledge of PHP Includes; if you don't understand this tutorial, please refer to the PHP Includes tutorial.
Make sure you follow the steps very carefully, it's very easy to make a mistake and this can be really perplexing.

Organization

First of create a folder within your root directory called skins. Within the skin folder create a folder for each layout. I have two skins, so therefore I would make two folders, and name them as follows: 1, 2, 3, ...

In each numbered folder (1, 2, 3, etc), make sure you have a stylesheet (CSS) file, header, and footer if they are going to be different than the other layouts.

Layouts

You will need to create at least two layouts in order to be able to skin your website. Code them to your liking in their respectful folders. Each folder will most likely contain things such as:

/images - This folder contains all your images.
index.php - Your main page
header.php - Your header (PHP Includes; will be discussed more later)
footer.php - Your footer file (PHP Includes; will be discussed more later)
style.css - Your stylesheet (CSS) file.

`header`.php

Now this is the tricky part: you must separate your header.php, and footer.php file. You will need to create a file called something like header.php, and within that page you will include your stuff from <html> to <body>; this is an example of mine:

<html> 
<head> 
<title>Akatsuki Designs Tutorial</title>
<link rel="stylesheet" type="text/css" 
href="skins/4/style.css">

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function blockError(){return true;}
window.onerror = blockError;
//  End -->
</script>

<!-- You can add more stuff if you need 
to such as scripts, etc. -->

</head> 
<body>
<img src="YOUR LAYOUT">
<!-- Stop Here -->

This is my header.php, you might have something similar to that. Make sure that the path to various files such as style.css, and/or favicon is not a relative path, it must be an absolute path, like mine. Include the skins/2/style.css. Save it, and now, we're moving onto the footer.php

`footer`.php

This part of the file will include things that can be found after the BODY part, and before the ending tags. So an example of mine would be:

</div>
<center>
Disclaimer: Akatsuki Designs is © Rei, 
all contents found on this site is © 
Akatsuki Designs, and may not be redistributed 
without a written permission, and credits. 
All images, mangas, animes that are found on 
this site are © their rightful owners. All rights 
reserved. Akatsuki Designs is © 2005-2006 Rei
</center>
</body>
</html>

If you are wondering when we will start editing your main page, please be a little more patient. So that's the very basic. Now create a file called index.php, this part is where your PHP includes knowledge will come handy. You absolutely must have this code within your index file in each folder. Copy and paste the code below, I will explain more about the variables in CAPITALS.


<?php
// The path to your cookiecheck.php file.
include ("ABSOLUTE/PATH/TO/YOUR/cookiecheck.php");?>
<? include($headervar.$extension); ?>
<!--    YOUR CONTENT GOES HERE -->
MESSAGE, WHERE YOUR UPDATES GO, ETC.
<? include($footervar.$extension); ?>

You shouldn't modify anything except the variables in CAPITAL unless you really have to, or you know what you're doing. Legend

<?php include ("ABSOLUTE/PATH/TO/YOUR/cookiecheck.php") ;?> - is the cookiecheck file which you must have, and which we'll discuss a little later after this.
YOUR CONTENT GOES HERE... - that's where your content goes.

`cookiecheck`.php

This is the most essential part of your files, the cookiecheck.php file. It looks very hard, and seem to be really hard to understand, but it's not hard at all ^.^ I got through it done only once, if you really pay attention and follow the steps carefully, you'll get it right too ^_^


<?
// How many skins you have 
that will be able to be selected by visitors.
$total_skins = 2;
// The skin that will be the default skin when it's 
someone's first time visiting the site.
$default_skin = 1;

// Do not edit the following unless 
you know what you're doing.
if (isset($_REQUEST['newskin'])) {
$newskin=(int)$_REQUEST['newskin'];
if ( ($newskin<1) OR ($newskin>$total_skins) )
$newskin=$default_skin;
} elseif (isset($_REQUEST['skin'])) {
$newskin=(int)$skin;
if ( ($skin<1) OR ($skin>$total_skins) )
$newskin=$default_skin;
} else $newskin=$default_skin;


$skin=$newskin;
setcookie ('skin', "", time() - 3600);
setcookie('skin',$newskin,time()+(86400*365),'/');
// The site URL for the skins.
setcookie('skin',$newskin,time()+(86400*365),'/',
'.kyoukei.com');
$skin=$newskin;


// Replace USER with your username. 
If you are being hosted, include 
your subdomain name.
$headervar = "/home/USER/public_html/skins/
$newskin/header";
$footervar = "/home/USER/public_html/skins/
$newskin/footer";
$extension = ".php";

?>

Copy and paste the following to NotePad, and edit the variables bolded, following the instruction below:

$total_skins = 2; - How many skins there are. I only have two layouts, which means I will only have two skins. This can be changed depending on how many layouts "skins" you have.
$default_skin = 1; - is which skin you want to be displayed when your visitor first come. Say this is my first time to visit the site called Endless-Dreamz, and the default skin is set at #2 which means the layout within the folder called skins/2 will be the default layout.

setcookie('skin',$newskin,time()+(86400*365),'/', '.kyoukei.com'); - Change the kyoukei.com to your website WITHOUT the http://www. however you MUST leave the DOT there BEFORE the site URL.
$headervar = "/home/USER/public_html/skins/ $newskin/header"; - User should be replaced with the username that you were first assigned by your host. Say my username is steph, then I would have /home/steph/.... If you are still not sure on what your absolute path is please check out this tutorial by pixelfx.org on how to find your absolute path.
Save the file as cookiecheck.php.

Connecting Them All

You're almost done!! Now if you are staring fresh, login into your cPanel, then go to your file manager, and then to your public_html folder. After that, upload cookiecheck.php to your root directory. Upload an index file which also contains the following:


<?php include 
// Includes your cookiecheck.php file. 
("ABSOLUTE/PATH/TO/YOUR/cookiecheck.php");?>
<? include($headervar.$extension); ?>

    YOUR CONTENT GOES HERE

MESSAGE, WHERE YOUR UPDATES GO, ETC.

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

which is exactly the same as the other index files in each directory. Now add the pages you need for your site to finction properly, and if you wish to add the code that allows visitor to change their skins, here's the code:

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

Last Words

I hope this tutorial has helped you, this is a very complicated tutorial, and took me ages to complete. Don't give up because you're not successful the first time; it takes time and practice. Surf the net, ask questions, and feel free to contact me should you need help, I'd be more than happy to help out!

« back · clear ¦ reload · forward »

Site

Designs

Media