|
Main ContentUpdatesTo Do List You Health and Beauty Reads Jenni Quizzes Tutorials The Domain Dollmakers Link Star-Girl.org Question? Plug Your Site Index/Blog ExtraChange The SkinJenni Fanlisting Star-Girl.org Fanlisting Webdesign Question? Report An Error MT Blog Archives Nov-Apr 04 Archives Feb-Nov 03 Archives Sites and ProjectsShining Top SitesCreme De La Femme Starshine Boards Starstruck Zine Starshine.la LoginLinkageEtc.refreshes today |
What is skinning? Basically, skinning is where you have a number of layouts on your site, and your visitors can choose which one they want to use. This means that you don't have to change layouts constantly and also allows for some design flexibility. Skinning doesn't have to be hard; in fact, you don't even need to know php to skin your site, as long as you have a bit of common sense. You will need to make sure you have cookies enabled for this to work for you. 1. If you have never used any php files on your site before, you need to check that your server supports php. To do this, create a new page called phpinfo.php. Open it, and paste this code: <? phpinfo(); ?> Now save, and go to your-site.com/phpinfo.php. If you have PHP installed you will see a a long page with all the details of your PHP installation on it. Now you know php works, you can delete the file. 2. The most important thing is to tidy up your site. If you have a big site, this is a big job. Firstly, you need to rename all the files you want to skin to .php. So for example, menu.html would become menu.php. You will probably only need to change the extensions on .html files; you DON'T need to change any image files (.gif, .jpg etc.), nor do you need to change .cgi files. 3. Whilst you're doing this, you need you remove any stylesheets/CSS code from all your subpages. You need to replace it with some php coding. The first bit is: <?php include ("/path/to/your/site/skins/cookiecheck.php");?> <? include($headervar.$extension); ?> This goes at the very top of every page, before the actual content. Replace /path/to/your/site/ with the actual path; if you don't know this, contact your host. 4. At the very bottom of your page, you need to have: <? include($footervar.$extension); ?> 5. Once you've done that for every page of your site, you need to create a folder in your main directory called 'skins'. Next, create a file called 'cookiecheck.php' and upload it to this folder. 6. You need to copy and paste the code below, and paste it into the cookiecheck file. There should be no other coding at all in this file except what is below: <? $total_skins = 4; $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),'/','.yoursite.com'); $skin=$newskin; $headervar = "/path/to/your/site/skins/$newskin/header"; $footervar = "/path/to/your/site/skins/$newskin/footer"; $extension = ".php"; ?> 7. Open up the file so you can edit it. $total_skins = 4; $default_skin = 1; Change '4' to the number of skins you have; for now, just change it to 1. Default skin is the skin your visitors will get automatically if they don't pick their own skin. Keep that as 1 for now, as you will only have one skin. Further down the code, don't forget to change .yoursite.com to your site, so mine would be .star-girl.org for example. Be careful not to delete the . at the start by accident, and make sure you don't put a / at the end. You also need to change /path/to/your/site/ to the fielpath you used in step 3. Remember to keep skins/$newskin/header and skins/$newskin/footer the same though. 8. Now you need to create a folder in your skins directory called '1'. In this file you will need to create a footer.php file, a header.php file and a style.css file. 9. For this, you should use a layout you have already coded. You can't use i-frames, so I would recommend using divs or tables. The style.css file is the easiest; just upload the style.css file you should already have for the layout. If you don't, paste all your CSS code into a file and call it 'style.css', then upload. 10. Now, open up your header.php file. To make it as easy as possible for you, I've put together a basic header.php file which you can copy and paste: This assumes that your layout is using divs - if you're using tables, add the first part of your table code instead (make sure you don't end the code). Ok, for now, save the file. You can change the image and div coding later. 11. Now open up your footer.php file. Insert this code: 12. Save. Ok, now you should have noticed that half the code is on one page, the rest of it on the other. Basically, you need to view your site as HEADER (Your content) FOOTER, where it would normally be START OF LAYOUT CODE - CONTENT - END OF LAYOUT CODE. Basically, your layout is just split into 3 sections (or 2 sections + content). 13. Okay, once you've edited the code to fix your layout, you need to create a skins.php page in your 'skins' folder. Once you've done this, insert this code (don't forget to include the header and footer codes from steps 3 and 4 which you now need to include on every page): <a href="http://yoursite.com/skins/index2.php?newskin=1">Change to skin 1</a> <a href="http://yoursite.com/skins/index2.php?newskin=2">Change to skin 2</a> <a href="http://yoursite.com/skins/index2.php?newskin=3">Change to skin 3</a> It doesn't matter that you only have one skin for the moment, this page will be useful for when you have mulitple skins. 14. You also need to create an index2.php page. This is the page that will show up after someone has changed the skin they were using. It may look something like: You changed the skin! Your skin has been changed to skin <?= $skin ?>. If you want to continue using this skin, click <a href="index.php">here</a> to go to the main page. If it's not what you want, you can always <a href="skins.php">go back</a> and choose another. If you have any problems, please email me :) 15. Now all you need to do when you want to add a skin is make a new folder in the 'skins' folder: 2, 3, 4 etc. Then just make footer and header files and upload your style.css. You also need to change the $total_skins = 1; in the cookiecheck.php file. You're done! :) 16. But..what about if you want to skin parts of your site that aren't .php files, for example blog comments which use a CGI file? One solution is to include the code below in the HEAD of your CGI page, which will match the CSS file of the skin the person is using. Then if you set the page as a pop up, it will look fine. Don't forget to change yoursite.com. However, you will also need to copy your CSS files into your main skins folder and call them style1.css (for skin 1), style2.css (for skin 2), etc. You will probably also need to edit them - test the code out first to check it works and then edit the style1.css file etc. as you see fit. If you think this part is too complicated, just leave it out :) It's just a little extra. Back | Forward Advertised |