Skinning tutorial
Back when Statia and I were first skinning her site, Robyn used the sandwich anology (*) to explain how you "piece" out index.php for skinning.
1) the code at the top, up to but not including MTEntries [bread]
2) the MTEntries stuff [the all important sandwich filler]
3) the code after MTEntries to the end [bread]
Section 2 is the code that stays in index.php.
Section 1 is headerN.php (where N is the skin #).
Section 3 is footerN.php (where N is the skin #).
You can get more complicated and leave the javascript and the other code that is global to all of your skins in index.php. Then your header & footer would just contain the code that actually changes per skin, but it's not necessary.
(*) The sandwich analogy has been around for a while. Christine used it to explain skins to Robyn. And it's quite possible that Amy used it to explain it to Christine.
I'm working on a skin that lets you cut & paste from IE. Mozilla is perfectly happy with my skins and you can probably cut & paste from your RSS reader (if you have one). If you want me to email you the text file version of the tutorial, I'd be happy to while I work on the new CSS.
Updates:
» Donna pointed out over at ScriptyGoddess the following about people who are designing linkware templates or who are using them: "any CSS divs inside the MTEntries tags (like "date" or "entry" or "posted") need to be the same across all skins for styles to apply correctly."
» Amy updated her tutorial, so I'll have to update mine as well. She mentioned in her comments at SG that "[she] updated the code on my tutorial a while back - this code is not going to work for people whose webhost is configured to have register_globals turned off in PHP." I'm guessing that's the problem that I had at adi's site. Updated!
Updated again - 9/5/05: Added info to use skin changing dropdowns instead of the skin index page. (Disclaimer: My code is actually formatted properly but the spaces are being compressed.)
I've bolded the sections where you'll have to make changes.
Other parts - these are all New Index Templates:
1) cookiecheck.php - This is the workhorse that points people to the right skin (if they are new and don't have a cookie or if they have a cookie already). This gets added to the top of index.php (and any other pages you want to match your skin). Note: I've used 10 here as the limit for the number of skins I have, but you can set it to either the exact number of skins you have or some other number.
<?
$total_skins = 10;
$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),'/','.your_domain.com');
$skin=$newskin;
$headervar = "/path/to/directory/where/your/skin/pieces/live/header";
$footervar = "/path/to/directory/where/your/skin/pieces/live/footer";
$extension = ".php";
?>
2) skins/reset.php - This resets your visitor's cookie to the default skin.
<?php
setcookie('skin','',time(),'/');
setcookie('skin','',time(),'/','.yourdomain.com');
header('location: http://www.yourdomain.com');
?>
3) skins/changeskin.php - This is the guts of skin switching.
<?php
$total_skins = 7;
$default_skin = 1;
if (isset($newskin))
{
$newskin = (int)$newskin;
if ($newskin < 1) $newskin = $default_skin;
if ($newskin > $total_skins) $newskin = $default_skin;
}
elseif (isset($skin))
{
$newskin = (int)$skin;
if ($newskin < 1) $newskin = $default_skin;
if ($newskin > $total_skins) $newskin = $default_skin;
}
else
{
$newskin = $default_skin;
}
$skin = $newskin;
setcookie('skin',$skin,time()+(86400*365),'/');
setcookie('skin',$skin,time()+(86400*365),'/','.yourdomain.com');
header('location: http://www.yourdomain.com/');
?>
4) skins/dropdown.php - The dropdown menu.
<form name="jump">
<select name="menu"
onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;"
value="GO">
<option selected>Skin this site</option>
<option value="/skins/changeskin.php?newskin=1">Plain Jane MT default</option>
<option value="/skins/changeskin.php?newskin=2">New Attitude</option>
<option value="/skins/reset.php">Reset to default</option>
</select>
</form>
5) Add in your sidebar somewhere:
<?php include '/path/to/your/skins/dropdown.php'; ?>
8 Comments
7 TrackBacks
Listed below are links to blogs that reference this entry: Skinning tutorial.
TrackBack URL for this entry: http://www.beantowngeek.com/cgi-bin/mt/mt-pong.cgi/189
This is specific to MT, but the concent should be applicable to other blogging software. Back when Statia and I Read More
I do. I think I've got all the wonkiness taken care of, and you may now commence skinning the Zu. Thank you, thank you, thank you to Amy and Lisa for their respective tutorials and to Kristine, who responded to my cries (many and loud) for PHP help. S... Read More
Since I'm sure that most people are spending this time with family and friends, I'm going to try to set up this site for skinning the Read More
I declare skinning a success. I think. Let me know if you see any problems, but you should be able to click Skin this Site, choose a skin, and have it work. If there are problems, please let me know.... Read More
The Naked PC newsletter one day said ""I wish someone would make a unit that lets me take the memory card out of my digital camera and play a slideshow on my TV..." Then, they found someone who did! Sometimes, all you want to do is crop a photo and re... Read More
OK. I've been getting more closely prepared for skinning, trying to follow Lisa's tutorial combined with Amy's and I've got my static stuff separate from... Read More
Skinning tutorial... Read More





Can you send it to me when you have time? I'd love to study it.
I can't take credit for that analogy though -- it was explained to me by BPC Christine when she was teaching me how to skin my site.
The Sandwich Analogy... Next week on The History Channel.
I just wanted to say that your tutorial makes it total cake to do. Thank you so much for writing it up, and helping me.
It took me sooooo long to grasp the skin concept, and then that finally stuck - I would have to dig through my notes though - I think Domesticat Amy actually used the sandwich analogy to help me grasp it! (After two days of long rambling e-mails from me!)
Are you going to share these tips on ScriptyGoddess too? I hope so! Skin the world!!!
what doesn't work for me when i try to skin is anything in the sidebars that is a MT include. i guess i need to use the all famous php include. i am just too lazy. if, for example you go here you'll see what i mean.
*G* THANK YOU! (even though I did understand the 'sandwich' theory *G* even if I didn't know what to call it), it was putting it all together that had me stumped.... now off I go to try it out!
Thanks so much for writing this tutorial! I had tried it at several other webistes and I didn't figure it out! But once I read your tutorial over and understood it made simple sense! Thanks so much! You rock my socks! lol
Thanks so much for writing this tutorial! I had tried it at several other websites and I didn't figure it out! But once I read your tutorial over a few times and understood it made perfect sense! Thanks so much! You rock my socks! lol