Skinning simplified

This is specific to MT, but the concent should be applicable to other blogging software.

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’ve bolded the sections where you’ll have to make changes. You can download this section of the tutorial here (right-click and save) if you’re having problems copying & pasting from the site.

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.

<?
if (isset($newskin)) {
$newskin=(int)$newskin;
if ($newskin<1) $newskin=1;
if ($newskin>10) $newskin=1;
} elseif (isset($skin)) {
$newskin=(int)$skin;
if ($skin<1) $newskin=1;
if ($skin>10) $newskin=1;
} else {
$newskin=1;
}
$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/index.php - This is your skin selector page. It basically has links to /skins/index2.php?newskin=N for each of your skins. It lets people see what skins you have to offer. cookiecheck.php goes at the top of this page too.

<?php include(’/path/to/docroot/directory/cookiecheck.php‘); ?>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>

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

<table>
<tr>
<td valign=”top” class=”tableText”>1: Description goes here <a href=”/skins/index2.php?newskin=1″>Make this one your skin</a>.</td>
</tr>
<tr>
<td valign=”top” class=”tableText”>2: Description goes here <a href=”/skins/index2.php?newskin=2″>Make this one your skin</a>.</td>
</tr>
</table>

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

</body>
</html>

3) skins/index2.php - This is where people can test drive the skin they’ve selected. This has the same code at the top of the file as in cookiecheck.php. It also sets your cookie.

<?
if (isset($newskin)) {
$newskin=(int)$newskin;
if ($newskin<1) $newskin=1;
if ($newskin>10) $newskin=1;
} elseif (isset($skin)) {
$newskin=(int)$skin;
if ($skin<1) $newskin=1;
if ($skin>10) $newskin=1;
} else {
$newskin=1;
}
$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”;
?>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>

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

<b>Like it?</b><br /><br />

Your skin number has been reset to ‘<?= $skin ?>.’<br /><br />

If you like it, journey on to the <a href=”http://your_url.com/“>main page</a> of this site and play with it a bit. If it’s not quite what you want, you can always <a href=”/skins/index.php”>go back</a> and select another.

If you run into problems with any of the skins, <a href=”contact_info_here“>drop me a note</a>.

<? include($footervar.$skin.$extension); ?>
</body>
</html>

4) Example index.php (when I’m setting up skins for the first time, I like to name this test.php until I get all of the kicks worked out):

<?php
include(’/path/to/docroot/directory/cookiecheck.php‘);
?>

<?
$headervar = “/path/to/directory/where/your/skin/pieces/live/header“;
$footervar = “/path/to/directory/where/your/skin/pieces/live/footer“;
$extension = ‘.php’;
include(’$headervar.$skin.$extension);
?>

<MTEntries>
blah blah blah
</MTEntries>

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

</body>
</html>

27 Responses to “Skinning simplified”

  1. Donna Says:

    This is extremely helpful - the only thing I would add, particularly for people who plan on using linkware templates as skins, is that 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 - I usually just have to tweak the names of some styles in the new stylesheet in any skin I’m installing for everything to work. Thanks, Lisa!

  2. Intruder Says:

    That would be cool to implement… but I dont think I could…

  3. sparticus Says:

    Hooray! I’ve been using this code for a while now, and it’s amazing. On my site I needed a browser redirect, so I created one in php that set the variable $defaultskin depending on the browser. Then I used that to set the default skin.
    I just gave up on it though, as user agents are too hard to keep up with…

  4. TooMuchSexy.blog Says:
    MTWiki
    I just wanted to point out MTWiki, to all of my readers. MTWiki is a Wiki site, which in short means that everyone can modify everything, promoting free knowledge and helpfulness. I’d recommend checking it out, there is already tons of great helpful hi…

  5. Amy Says:

    Yup, the sandwich analogy’s mine, born of desperation and attempting to code+eat at the same time. Silly thing’s hung around longer than it probably should’ve, but that’s ok if it helps people. :)
    One thing I would suggest - I 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. (This code was written before catering to that particular setting became vital, as it is now.)

    Here’s the changed version of the code; hopefully you’ll be able to see which section of the code I’m changing:

    $total_skins = 14;
    $default_skin = 1;

    if (isset($_REQUEST['newskin'])) {
    $newskin=(int)$_REQUEST['newskin'];
    if ( ($newskin$total_skins) ) $newskin=$default_skin;
    } elseif (isset($_REQUEST['skin'])) {
    $newskin=(int)$skin;
    if ( ($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),’/',’.domesticat.net’);
    $skin=$newskin;

  6. Amy Says:

    There’s a code error in the first version of my comments, and I don’t have my password (I’m out of state right now) to edit it to make it right. Use this instead until I can make the old version disappear.

    Yup, the sandwich analogy’s mine, born of desperation and attempting to code+eat at the same time. Silly thing’s hung around longer than it probably should’ve, but that’s ok if it helps people. :)
    One thing I would suggest - I 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. (This code was written before catering to that particular setting became vital, as it is now.)

    Here’s the changed version of the code; hopefully you’ll be able to see which section of the code I’m changing:

    $total_skins = 14;
    $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),’/',’.domesticat.net’);
    $skin=$newskin;

  7. Live in the Delirious Cool Says:
    Template mania, all over again.
    New template finds - dress your website while they’re hot!

  8. Live in the Delirious Cool Says:
    Template mania, all over again.
    New template finds - dress your website while they’re hot!

  9. Allison Wonderlamb Says:
    Irony
    I heart Scriptygoddess.

  10. And She Said Says:
    Skinning
    Just last week, I tried skinning this site. I thought I was being brilliant by exporting all my entries, setting…

  11. Written on the Sky Says:
    it would be so much easier to be naked…
    so…what with these three skinning tutorials that are aimed at helping one skin one’s site with ease…. i’m screwed. i’ve run myself round in circles. i’m not too much closer than i was in the beginning. see…i thought i’d backed…

  12. dot lizard dot com Says:
    http://dotlizard.com/archives/000305.php
    and you know geeking out heavily is a good sign, right? so i did the skins, & yes, the beach is back. in the process, i rediscovered how much it annoys me to have all the cgi pages unskinned — the trackback popups, the comment preview & error template…

  13. liz(ard) Says:

    suggestion: for the header in particular, i find that the “bread” is best limited to the last few lines of the document head, and the first few of the document body — i’ve seen too many people putting the whole header in the skins header file, and what you end up having to do is update every skins header file to make just one addition or change to any page header.

    also, i have skins working on my CGI pages! which i just figured out how to do, and well, i had to share :)

  14. Annie Says:

    Hi, I’m getting this error when setting: http://www.bluestrawberry.net/skin/

    here are the files in txt: http://www.bluestrawberry.net/skin/cookiecheck.txt
    http://www.bluestrawberry.net/skin/index.txt
    http://www.bluestrawberry.net/skin/test.txt

    changing the skins works, but the index page won’t…, suggestions?

  15. Steen Says:

    I’d just like to know how the quick skinning is done - y’know, with the dropdown menus? Alot of people seem to have them and they seem better than the “index2.php” file… Idno, just a thought.

  16. Tek Says:

    if anyone can spend a little time to help me with this, I would be ever so grateful. I redid a part of my site, and I have found people don’t like it. I really want to skin it to appease both sides…

    I feel like I am not quite grasping this concept. =(

    Parse errors all over.

    please contact me if you can give me some pointers.

  17. Tek Says:

    Okay… here are the errors that you can see for yourself.

    It kinda works… but not!

    http://www.tekwh0re.net/skins/index.php

    And no… this isn’t a porn site so don’t worry!

    If you try to go to the test entry go here:

    http://www.tekwh0re.net/pain/fun.php

    I’t like I am almost there… *sobs*

  18. reality Says:

    i’m almost there. I’m having trouble with my index page…. getting an error. i’m sure it’s a tiny problem.

    can anyone can help me? I’d be willing to pay if necessary.

    http://www.divinereality.com/skinblog/

    Thanks.

  19. reality Says:

    i’m almost there. I’m having trouble with my index page…. getting an error. i’m sure it’s a tiny problem.

    can anyone can help me? I’d be willing to pay if necessary.

    error:
    Parse error: parse error in /home/divine/public_html/skinblog/index.php on line 23

    http://www.divinereality.com/skinblog/
    http://www.divinereality.com/skinblog/index.txt

    Thanks.

  20. Jennifer Says:

    When getting PHP errors - pay close attention to them. They give a lot away about what the problem is!

    It says there’s an error on line 23… look at line 23:
    <? include(’$footervar.$skin.$extension); ?>

    You’re missing a ‘ on the end…

  21. Jennifer Says:

    More specifically it should look like this:
    <? include(’$footervar.$skin.$extension); ?>

  22. reality Says:

    Thanks so much for your help…. I made the changes and still getting the same error.

  23. Jennifer Says:

    Just in case anyone else is following along these comments - this is what I get for rush commenting in the middle of the day…

    She actually doesn’t need ANY quotes around that string because it’s all php variables…

  24. Kristina Says:

    Eh… I’d really like to install this but…. I pretty much know nothing about PHP, and I’ve just installed MT on my site yesterday so… I’m not even familiar with it yet. Um, if anyone helps me, I’ll cry tears of joy.
    And I’d be glad to link your site or blog as well.

  25. rebekah Says:

    i dont understand, i can get how to change the skin and everything, but where do u put the code for each layout? do u have to make a seperate index2 file in each skin folder?

  26. Lisa Says:

    Actually, if you are still recieving errors after changing

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

    to

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

    TAKE OUT THE QUOTES!! It should look like this:
    < ? include($footervar.$skin.$extension); ?>

    That should solve that part of it.

  27. Lisa Says:

    oh sorry it didn’t show up. Just take out all the quotes from the
    < ? include(‘$footervar.$skin.$extension); ?>
    so it looks like this: < ? include($footervar.$skin.$extension); ?>