Skinning your site means your visitor will have the option of changing your layout whenever you want. It's quite handy. Then you won't have to change
layout as often as before. Also if your visitor doesn't like a layout they can change it. It is not as hard as it seems, but please make sure of the
following before you continue or else things might get difficult for you.
Read this before starting!
- Your site should be in PHP. This means all your file should be .php format. If you use freewebs or any other site host that does not provide PHP support, then you cannot skin.
- You should already understand PHP includes and CSS stylesheets. I have made a tutorial on PHP includes here.
Skinning your site
Making your Skins folder
Make a new directory called skins in your root directory. Meaning the place where you keep your index/homepage.
After you have created it, open in up. If you have, say, 2 skins already made, then create 2 directories. One directory called : 1. The other directory called : 2. And so on. The more layouts you have, the more directories obviously.
After you have created it, open in up. If you have, say, 2 skins already made, then create 2 directories. One directory called : 1. The other directory called : 2. And so on. The more layouts you have, the more directories obviously.
Putting stuff in your Skins folder
Now let's open the directory called 1. Create a file called header.php, footer.php and stylesheet.css. If you already understand
PHP Includes you should know what to do. But I will repeat myself for those who don't know. Or you could just read this
tutorial. Reading that tutorial will be more detailed.
In your header.php you put your sidebar, header image and stuff. Don't put your main content here. The main content goes in your index.php which is in your root directory. If you would like guidance on what to put, please feel free to visit one of my header.php files such as : this one
In your footer.php put your closing div and body tags. Or if you have those back / home / forward links like mine, put those there.
In your stylesheet.css you put your CSS.
In your header.php you put your sidebar, header image and stuff. Don't put your main content here. The main content goes in your index.php which is in your root directory. If you would like guidance on what to put, please feel free to visit one of my header.php files such as : this one
In your footer.php put your closing div and body tags. Or if you have those back / home / forward links like mine, put those there.
In your stylesheet.css you put your CSS.
Setting a Default Skin
In your ROOT directory. Make a header.php page if you haven't already. Paste the following code there :
Remember to remove the space between < ? and ? >.
Your path to skins might be different. If you want to find out your path check out my tutorial here. In the part where it says : defaultskin = 1, change it to whichever layout you want to be your default skin. So if you just made a new layout and you put it in folder 3. Then change the 1 to 3.
Remember to remove the space between < ? and ? >.
Your path to skins might be different. If you want to find out your path check out my tutorial here. In the part where it says : defaultskin = 1, change it to whichever layout you want to be your default skin. So if you just made a new layout and you put it in folder 3. Then change the 1 to 3.
Allowing visitors to set skins
Make a new page called setskin.php in your ROOT directory.
This is the page that allows your visitors to change the skin.
In that page paste this code :
Remember to remove any of the spaces between the < ? and the ? >.
Also remember to change the path to your skins folder.
This is the page that allows your visitors to change the skin.
In that page paste this code :
Remember to remove any of the spaces between the < ? and the ? >.
Also remember to change the path to your skins folder.
Including each page
Now, for each page you should put this :
In order to make all the layouts same. Remember to remove the spaces between any of the < ? and the ? >.
In order to make all the layouts same. Remember to remove the spaces between any of the < ? and the ? >.
And you're done
You should manage to skin your site by now. If anything is wrong or you cannot do it. Please feel free to ask for help. I've tried
to make everything as flawless and clear as possible.
REMINDER! I also put spaces in the < ? and the ? >. So if something doesn't work. Please make sure that you have removed the spaces. If you don't the code will not work. I had to add the spaces because if I didn't the layout on my site will crash. And the codes won't show.
REMINDER! I also put spaces in the < ? and the ? >. So if something doesn't work. Please make sure that you have removed the spaces. If you don't the code will not work. I had to add the spaces because if I didn't the layout on my site will crash. And the codes won't show.
The skinning code is provided by Tutorialtastic's skinning tutorial.