Skinning Your Site With PHP

Created by: Sayami & Web Design Teacher ^^
Level: Intermediate
Must Have: PHP

Step 1 | Requirements

A text editor (Notepad, Frontpage, etc), you must have an idea what PHP is and you must of used it before, must know PHP Include, and PHP, duh.

Step 2-1 | Headers

First, you must create your header files. This is where the include knowledge comes into play, so if you get lost, I sugguet you learn how to do includes. The top portion of your site is going to be your header file. You know with th include you save it as .txt? Well, not this time, you're going to save it with a .php extention. For your 1st layout, the 1st layout header is going to be saved as header1.php. the number "1" represents the number layout it. so you'll save the header files as header1.php, header2.php and so on. Here's an example of what your header file should look like:

<html> <head> <title>Sitename | Here</title> <link rel="stylesheet" href="1/css.css" type="text/css"> </head> <body bgcolor="#000000" background="1/bg.jpg" style="background-repeat:repeat-y;"leftmargin=0 topmargin=0 marginwidth=0 marginheight=0> <img border="0" src="1/image.jpg" style="position: absolute; left: #; top: #" width="###" height="###"></p> <div id="Layer1" style="position:absolute; width:###px; z-index:1; left:###px; top:###px;">

Step 2-2 | Explaination

<link rel="stylesheet" href="1/css.css" type="text/css">

Well, you see how you have "1/css.css". That shows that the css file, should be called from folder "1". You should put all your pictures, layout, .css, andthing for layout 1 in subdirectory "1"

Step 3 | Footers

The footer is pretty much the same concept of header, except it's the bottom portion of your layout. Here's an example:

</div> </body> </html>

It totally depends on the type of layout you have determines how your headers and footers will look like. Don't look at my examples and think it's suppose to look like that.

Make sure you save your footers as footer1.php, footer2.php, etc. depending on the amount of layouts you have. Also save them in their layout subdirectory folder.

Step 4-1 | Cookie Check

The cookiecheck file is the file that checks the user's cookies for their default layout. If it's your first time visiting the site, the cookie check file will automatically show the default skin, most of them time it's the 1st layout, or whatever you choose it doesn't matter. But if the user chooses a layout other than the default one, when they return to the site the layout they chose will show all the time unless they change it. That's the best way I can explain it. ^^; Here's what the cookiecheck file looks like:

<? $total_skins = 3; $default_skin = 1; 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),'/'); setcookie('skin',$newskin,time()+(86400*365),'/','.domain.net'); $skin=$newskin; $headervar = "/path/to/your/public_html/header"; $footervar = "/path/to/your/public_hmtl/footer"; $extension = ".php"; ?>

COPY AND PASTE THE COOKIECHECK.PHP FILE FROM HERE! DON'T USE THE ONE ABOVE!

If it's not obvious to you yet, save this file as cookiecheck.php

Step 4-2 | Explaination

Out of that whole confusing code, only 3 parts are very important, but easy to modify.

$total_skins = 3;: Tells you how many total skins you have, so make sure you change this when you add on more skins.
$default_skin = 1;: Your default skin. this code is saying that the default skin here is layout #1

'.domain.net');: This is where you put in the link to your domain. Don't put the hypertext transfer protocol (http://). Replace it with a period (.). Example: .colourwalk.net. If you have a subdomain like me, do it like this: .sayami.colourwalk.net.

$headervar = "/path/to/your/public_html/header";
$footervar = "/path/to/your/public_hmtl/footer";
$extension = ".php";

This is one of the most important parts of the cookiecheck.php file. This is the part that tells your computer what layout to choose. The server path is just another name for your file location. You can either use your server path, mine is /hsphere/local/home2/kamiana/sayami.colourwalk.net OR just type the url without the http://. Example: /colourwalk.net/sayami/footer. <-- THAT ONLY WORKS IF YOUR HOST SET UP YOUR SUBDOMAIN ALSO AS A SUBDIRECTORY.

Step 5 | Make Your Pages Cookie Enabled

The following codes have to be added to EVERY SINGLE PAGE WITHIN YOUR SITE! When I say every page, I mean EVERY PAGE, otherwise it's not going to work.

Here is what you have to put at the top of every page:

Here is what you have to put at the bottom of every page:

Step 6 | Index2.php

You don't really need this page, but I recommend you to set it up because it's a good way to test the whole skinning process.

Copy and paste this code:

Step 7 | Finished!

See? That's it! It's not that hard, really. If you have any problems with this tutorial, e-mail me.

Leave your Comments -> Sayami stole |

#Close? | ---++