Skinning tutorial

| tutorials | | Comments (8) | TrackBacks (7)

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

Angel said:

Can you send it to me when you have time? I'd love to study it.

robyn said:

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.

Melissa said:

The Sandwich Analogy... Next week on The History Channel. wink

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. smile

Christine said:

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!!! grin

jane said:

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.

witchy said:

*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!

Courtney said:

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

Courtney said:

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

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

» Skinning simplified from scriptygoddess.com

This is specific to MT, but the concent should be applicable to other blogging software. Back when Statia and I Read More

» The Skins Game from Life in the Zu

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

» ok, i'm gonna' do it from Dreaming Witch - Off Tilt

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

» Just... Breathe from Confetti Falling

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

» Hit 'n' Run, 06-17-2003 from PromoGuy dot Net

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

» Getting closer all the time from Hey! ... it's Me!

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

About this Entry

This page contains a single entry by Lisa published on May 3, 2003 2:50 PM.

Bath day! was the previous entry in this blog.

M's Music Meme is the next entry in this blog.

Find recent content on the main index.

Me!

To make a bad day worse, spend it wishing for the impossible.—Calvin and Hobbes

About me... :: memes :: My Amazon wishlist :: My LJ :: My Twitter :: My Flickr :: Photos of me

Blog reading list

Contacts
· AIM, Yahoo!, MSN, Google Talk, LJ Talk... just ask
· Email me

Good Causes

       
Love is love.
Support gay marriage.

platinum.gif
East siiiiiiiiiiiiiiiiiiiide, baby!
Click to help
sponsor mammograms
Listen to good music! Radio Paradise

Silly Stuff

blogchalk:
Lisa/Female/41-45. Lives in United States/Mass/Boston and speaks
English. Spends 80% of daytime online. Uses a Faster (1M+) connection.
The
WeatherPixie
The weather in Boston

Flickr

www.flickr.com
jasra's photos More of jasra's photos
Powered by Movable Type 4.21-en

Copyright

Copyright © 2001-8 Lisa K Holsberg. Unauthorized use is prohibited.