 | |||||||||
|
|
|
|
|
|
|
|
|
|
|
|
Skinning Your Site
Skinning a website means having multiple layouts available for use at the same time with the help of cookies and php. It is not terribly difficult to do, but many find it confusing. This tutorial hopes to help make this task less difficult. Note: this tutorial is based on the code originally explained at domesticat.net. I did not write these codes, I simply used them in my own way for my site. Step 1 -- testing for phpWe first need to make sure your server supports php. Open a notepad file and call it test.php. In this file write the following: Testing if my server supports php. Then save and upload the file. Try to view it through a browser (http://yoururl.com/test.php). If your server supports php, you should read the words you typed into the document. If you see errors, then your server does not support php, and the rest of this tutorial does not apply to you.Step 2 -- cookiecheck.phpThis file does the actual skinning. It checks for cookies, and sets them to specific skins. I checks if a cookie for your skins has been set in the browser. If a cookie has been set, it uses the one set (so the skin selected previously). If a cookie has not been set, this file sets it to the default skin. Important: this cookiecheck file has to be on the first line of code on each page otherwise this will not work. More on this later. Create a notepad file called cookiecheck.php and put the following code into it:OK, let's make sense of all of this. Firstly, you will have at least 1 skin. So that's why $first_skin is set to 1. If you only currently have one skin set up, make $total_skins = 1; when you add more skins, you will have to update this variable to the total number of skins. This code is making your default skin be chosen randomly if a skin isn't already set by the cookie. (If you would like to change this to having a specific skin be the default, set $default_skin equal to the skin number, for example $default_skin = 2; that set's the second skin as the default. Set $domain to whatever domain your are on. Even if you are hosted, just write the domain name (no http and no www, just mydomain.com). If you are hosted, we will take care of this in thepath part of this file. More on that later. Do not touch the next few lines of code. That is what does the cookie checking and setting. The very few last lines of this file are ones you have to update. $headervar and $footervar are the location of the header#.php and footer#.php of each skin. We now will need to figure out this path we mentioned above. This is very simple to do. Create a file called test2.php and inside write: Then upload it. You will see an error that looks a little like this: Warning: main(nonexistantfilephp): failed to open stream: No such file or directory in /something/somethingelse/blah/blahblah/test2.php on line 1 Warning: main(): Failed opening 'nonexistantfilephp' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /something/somethingelse/blah/blahblah/test2.php on line 1. So what does this mean? It means that /something/somethingelse/blah/blahblah is your path! So you will replace this for PATH in the cookiecheck file, for $headervar and $footervar. You are now done with your cookiecheck file. Please upload it to your root directory (the main directory where your files go, where an index.html would be). Step 3 -- the skinThis is the part where you make your skins (the layouts). Make a folder "skins" off your main directory. This is where you will store all your files for the skins, to make it more organized, so it's not all in your main directory with the rest of your pages. (We assumed you were going to be doing this back when we created cookiecheck, hense the /skins in the header and footer vars.) This part is the most tedious. You have to convert each of your files on your webpage to a php and skins file! (Try it with a few files first, make sure you get everything working (with the rest of the tutorial), then continue with the rest.) What I have found is the easiest way to do this is to make a divs style layout format and make all your skins follow this format. I have two divs, one is the actual main page, and the second div includes a menu/sidebar which has the navigation, basic information, and the other things you see the same on each of my pages. I don't know how else to help and explain this other than to show samples from one of my skins so you can get an idea. At the top of the html file you have your header, in which you will have the include for the headervar. Then you have your div for your page's content. Then you have your include for the footervar. This is the same template for every page.The normal page itself, contactme.php for example:
This is a sample header1.php
This is a sample footer1.php
This is a sample style1.css
Step 4 -- skin selection pageIn /skins, you will create a file called index.php. This file will contain a preview of each skin (a screenshot is best, you can add a description, etc) and a link to select the specific skin. This link uses cookiecheck.php to set the cookie on the browser to the chosen skin.This is the file that goes in the skins folder. I just have one example of a skin preview, the more skins you add, just update the screenshot, title, description, and link part. Just make sure to change newskin=# for each skin. You see how we are linking to index2.php?newskin1? Well now we have to create this index2.php! This file goes in your main directory (the one above skins!). I'm sure the template looks familiar by now. If index.php is not your main page, you will update that in the above message. Step 5Believe it or not, you have now skinned your site! All that is left is to check each page to make sure it follows the template and works with all of your skins. This tutorial assumes all of your files are in the main directory, other than the skin images, headers, footers, etc. This is why the very first line only looks like this:If you have any files in a different directory, you will need to put your path before the filename, like so: You will then also need to make sure all your other links work, as you do normally when files from a directory link to files from another directory.
| |||||||||