Deepillusion.net

General
ť Bookmark Deepillusion.net
ť News & Updates
ť Post News
ť Forums
ť Links!

Downloads
ť Screensaver

All About Jason
ť About Me
ť My Blog!
ť Portfolio
ť Work Progress
ť Things to Learn

Tutorials
ť Photoshop
ť Flash(FlashMX)
ť 3dsm
ť HTML

Contact Me
ť AIM: AsherKalvasce
ť Email me!

U s e r ( s ) O n l i n e :

<< Ultimate Layout 1 Photoshop Tutorial

Skinning Tutorial

You need to open Notepad FIVE times. Copy each block of text into each Notepad session, and save as noted. Save it all to the same folder. You should have the following:

test.php
header.php
footer.php
cookiecheck.php
main.php

SAVE AS "test.php", NO QUOTE MARKS

<?php include ("home/public_html/skins/cookiecheck.php");?> // SEE NOTE BELOW OR ASK YOUR HOST

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

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

SAVE AS "header.php", NO QUOTE MARKS

SAVE AS "footer.php", NO QUOTE MARKS

</body>
</html>

SAVE AS "cookiecheck.php", NO QUOTE MARKS

$total_skins = 1;
$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),'/','.yourdomain.com');
$skin=$newskin;

$headervar = "/home/public_html/skins/$newskin/header";
$footervar = "/home/public_html/skins/$newskin/footer";
$extension = ".php";

SAVE AS "main.php", NO QUOTE MARKS

HI THERE KIDS.

A Note

If you own your own domain, open up FTP and trace the folders you have to go through to get to your public HTML folder. Here's the one I used when I was hosted at whenshewasbad.org:

/home/alecia/public_html/x/skins

Replace /home/public_html/skins/$newskin/header with your own address.

NO TRAILING SLASH!

Uploading

Log into FTP and go to your main folder; if you're hosted, this should open automatically. If you're not hosted, you probably know how to get there.

Upload test.php and main.php into your main folder.
Now, make a new folder. Call it skins.
Upload cookiecheck.php into your skins folder.
It's time for another folder! Make a folder called 1 in your skins folder.
Upload header.php and footer.php into your 1 folder.

Bust out your browser of choice and go to http://yourdomain.com/test.php. Everything looking fine and dandy? Excellent. If not, either your host doesn't support PHP and you should quit now, you reject, or you specified the wrong place for your cookiecheck.php. If it's the latter, you should get a 404 telling your where cookiecheck.php *should* be. Open test.php, change the link for cookiecheck.php, and reupload. Tada!

You should see a plain page reading HI THERE KIDS. All that work for HI THERE KIDS. Yeah, I know.

Skinning Your Site

Most tutorials stop before this. Thing is, unless you're really good with spatial intelligence or have experience in skinning, it's going to take a bit of trial and error before you get your site running.

Open your current layout in Notepad. Make sure EVERYTHING in your site is defined by CSS. Everything. No font tags allowed. No tables, either, in most cases. And no <div style="blah blah">. EVERYTHING MUST BE IN YOUR CSS. Even if your site follows the same two-column layout every time, you must give each column an absolute location in CSS. Some sites can just leave tables in (see example below) but chances are you're using a two-column layout or something else entirely. P.S. everything must be in your CSS.

Now, look at your coding. Where does your formatting end, and your content begin? Copy everything ABOVE your content into another Notepad session, including your CSS. Trust me, externally linked stylesheets are a headache here... Don't bother with them. Save this over your header.php. Remember to change your image locations (more on that later).

Everything after your content should be saved to footer.php. Delete the header and footer sections from your layout when you have pasted them into other Notepad sessions. You should now be left with...

Your content. Save this as main.php so you can test stuff out later.

Now, we want to make a dynamic include for the blog. This way, we can target links to where the blog is. If this confuses you, type the words 'php dynamic inclusion' into google and you'll get more answers than you can shake a stick at.

This replaces your iframe but NOT the div layer that the iframe was in. I hope you put your iframe in a div layer, anyway. If you want this to act like an iframe, give the div layer a fixed height and add a little something called overflow: auto; to your CSS. Again, change main.php to reflect the filename of your blog.

<?php
$id=basename($id);
if(!$id)
include("main.php");
else
include($id);
?>

This is what you should have. Copy this into test.php.

<?php include ("home/public_html/skins/cookiecheck.php");?>

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

<?php
$id=basename($id);
if(!$id)
include("main.php");
else
include($id);
?>

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

Reupload everything again, including any images you may have (these go in /skins/1). Go to http://yourdomain.com/test.php again. Does it work? If not, make sure that you deleted all of your header and footer from your content, and that you defined everything in CSS, especially your blog's div layer if you were using an iframe before. If it's still not working, delete everything and start over again.

Remember, when you make new content pages for a two-column layout, you can't save them so that they look like your test.php. They have to look like your blog file, because we're using dynamic inclusions.

Important Note: Open your blog and remove the header and footer sections, just like you did with your 'content'. This way, your blog file will react to your different skins, and you can use your blog file as a guide for making new pages.

Almost Done

Rename your test.php to index.php. Upload it to your main folder, then open up another Notepad session. After this step, the whole world will be able to see your skinning attempts, so make sure your site works.

DirectoryIndex index.php

Save this as .htaccess and upload to your main folder. Now, go to your site, don't type in index.php, just the address of your site. Your skinned site will appear. Hurray! It's your old layout! Except now you can change looks on the fly and allow visitors to choose between layout. Rockin'.

Adding Skins

Wanna add a skin? Simple. Open up cookiecheck.php.

$total_skins = 1;
$default_skin = 1;

Change $total_skins to 2. Now, open FTP and go into /skins. See your /1 folder? Make another folder, call it 2. Go through the above process of skinning your site, but only make header and footer files. Upload the header and footer files to /2, along with all the images that the layout uses.

Changing Skins

This is easy.

Linking Different Sections of Your Site

So, you want things to open in the space that your blog is currently occupying, iframe stylee.

<a href="index.php?id=about.php">about me!</a>

Whatever you had saved in about.php will appear where your blog was. Make sure that your new file follows the same structure as your blog file did -- no header, no footer.

Extras

If you want to change the navigation throughout each skin, then simply do your navigation in your header or footer files.

Want to make a fancy "You've selected this skin" page? Open a content page (like the about.php file I mentioned), and change the text to "You've selected a new skin", even a redirect to the main page, and save it as skin.php, for example. Then, for your skin-change link, change index.php?newskin=number to skin.php?newskin=number.

Submit your own skinning tips! kthxdi@hotmail.com.

QUICK RECAP

In your main folder:

index.php, main.php
A folder called 'skins'
Any files that every skin uses, including images and other .php files

In /skins:

cookiecheck.php
A folder called '1'

In /1:

header.php
footer.php
Any graphics that the layout may need.

Remember to update the links for your images. Instead of <img src="top.gif">, you'll have to put <img src="http://yourdomain.com/skins/1/top.gif">.

Example - DeepILLUSION.net

HEADER.PHP

<html>

<head>

a:link { color: #823D34; font-weight: bold; text-decoration: none }

a:active { color: #823D34; font-weight: bold; text-decoration: none }

a:visited { color: #823D34; font-weight: bold; text-decoration: none }

a:hover { color: #823D34; font-weight: bold; text-decoration: underline }

p, td, table, body, input, textarea { font-family: Verdana; font-size: 10pt; color: #000000; text-align: center }

body { background-color: #000000; margin: 0px auto; text-align: center }

.table_1 { border-style: 1px solid #000000; width: 300px; padding: 5px; margin: 0px auto}

.table_2 { border-style: 1px solid #000000; width: 600px; padding: 5px; margin: 0px auto }

.td_title { background-color: #823D34; color: #CCCCCC; font-weight: bold; text-align: center; padding: 5px }

.td_body { background-color: #CCCCCC }

li { color: #823D34 }

.codes { width: 400px; margin:5px 0px 3px 30px; padding: 6px; background-color: #000000; border: 3px solid #823D34; }

.codes2 { font-family: courier; font-size: 10pt; font-color: #823D34 }

-->
</style>

<title>DeepIllusion.net</title>
</head>

<body>

<A HREF=http://www.deepillusion.net/aboutme.php></A>
<A HREF=http://www.deepillusion.net/tuts.php></A>
<A HREF=http://www.deepillusion.net/forums></A>
<A HREF=http://www.deepillusion.net/games.php></A>

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave
/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="720" HEIGHT="450" id="superring1" ALIGN="">
<PARAM NAME=movie VALUE="newlay.swf"></A>
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#000000>
<EMBED src="newlay.swf" quality=high bgcolor=#000000 WIDTH="720" HEIGHT="450" NAME="superring1" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"> </EMBED>
</OBJECT>

MAIN.PHP

Link Me!

</td>
</tr>
<tr>
<td class="td_body">

</td>
</tr>
</table>

HTML Tutorials

</td>
</tr>
<tr>
<td class="td_body">

<a href="http://www.deepillusion.net/hex.php">Hex Color Table</a>
<p>
<a href="php.php"><img src="http://www.deepillusion.net/phptut/php.jpg"><br>PHP Includes</a>
<p>
<p>

</td>
</tr>
</table>

FOOTER.PHP

</body>
</html>

Credits

I got my info from these pages. To be honest, I just needed a resource that covered everything-- for my own benefit--and that's why this tut exists. Some of them explain certain sections better than I do, so check them out.

http://tutorials.fire-trap.net/ http://www.girl-syndrome.com/content/tutorials/php_skinning.php http://wdt.silent-aurora.net/php03.php
Back