EE Tutorial: Template Skinning

Here's the scenario:

You've got a blog.
You hate <insert platform that shall not be named>, so you opted to go with Expression Engine.
You discover Expression Engine doesn't have native (or plugin) skinning abilities.
Go go Googling but only wind up frustrated.

Enter: Yours Truly to save the day...

 
What You Need

• PHP on your web server
• FTP access to your web server
• The full server path to your Expression Engine directory (i.e. /home/username/public_html/)
• A text editor (if you use Word or any other rich text editor, don't come crying to me when you fuck it up)
• Knowledge of Expression Engine templates and template groups
• Understanding of HTML and HTML tags
• Understanding of php includes and/or splitting up template files (i.e. header, body, footer)
• At least 1 template coded and ready to go
• $5 to donate to my paypal account¹

Setting up your EE for skinning:

Before you can jump into skinning your site, your EE template groups need to be prepared. We'll be using EE template embeds to complete the skinning process.

1. Create a new template group to store your skinned templates ("skins") usually work for me
2. When we skin, we use a numeric system for differentiating between skins (because our cookie checker uses math later)
3. Start splitting up your template into header, footer, body, etc.
4. Name your "skin" templates #_header, #_footer, #_main, etc (i.e. 1_header, 1_footer, 1_main for your first skin, 2_header, 2_footer, 2_main for your second skin, and so on)
5. Most importantly, don't forget to create a template for your stylesheet (and select CSS as the file type)

Quick tips:

• It's easier to name the file structure on your server (for images) in the same manner as your ee templates (i.e. all skin files go in the public_html/skins directory, each skin in its own subdirectory: skin_1).
• When referencing your CSS file, remember, you put it in the "skins" template group, so you'll want to use:

<link rel="stylesheet" type="text/css" href="http://www.sporadicmind.com/skins/1_stylesheet/" />
 or 
<link rel="stylesheet" type="text/css" href="http://www.sporadicmind.com/?css=skins/1_stylesheet.v.1229106386" />

Now that we setup your skins template group, we can start skinning your site.

 

Creating the cookiecheck.php file:

Copy and paste the following text into your text editor, save the file as cookiecheck.php. Edit the $default_skin (if your default skin is not the first skin you create (#1). Edit the $total_skins variable with the amount of total skins you have available. If you only have one skin ready, leave it as is:

<?php
$default_skin = 1;
$total_skins = 1;

if (isset($_COOKIE['skin']))
{
    $skin = $_COOKIE['skin'];
    if ($skin < 1) { $skin = $default_skin; }
    if ($skin > $total_skins) { $skin = $default_skin; }
}
else {
    $skin = $default_skin;
}
?> 

 

Creating the changeskin.php file:

Start a new file within your text editor, and paste the following text. Save the file as changeskin.php. Again, edit the $default_skin (if your default skin is not the first skin you create (#1). Edit the $total_skins variable with the amount of total skins you have available. IMPORTANT: at the bottom of the file, change yourdomain.com to your domain (make sure to leave all the extra dots where they are and DO NOT remove them):

<?php
$default_skin = 1;
$total_skins = 1;

if (isset($_GET['newskin'])) {
    $newskin = (int)$_GET['newskin'];
    if ($newskin < 1) { $newskin = $default_skin; }
    if ($newskin > $total_skins) { $newskin = $default_skin; }
}
elseif (isset($_COOKIE['skin'])) {
    $newskin = (int)$_COOKIE['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/');
?>

 

Creating the reset.php file:

Next, copy and paste the following into your text editor and save the file as reset.php. Change yourdomain.com to your domain:

<?php
setcookie('skin','',time(),'/');
setcookie('skin','',time(),'/','.yourdomain.com');
header('location: http://www.yourdomain.com/');
?>

Now that we've created our php files, upload those to your web server. I prefer to put mine in public_html so there's less to type out, but feel free to put then wherever you want (as long as it's web-accessible, and you remember where you put them).

 

Onward...to the templates:

Your templates need to have php enabled, so it'll be able to check the files we just uploaded. Select your main template group (i.e. default_site) and click on Preferences. Select Yes under "Allow PHP", and make sure "PHP Parsing Stage" is set to Output (unless you're using php already, and require input processing...in which this step is moot for you). Update the preferences.

Now, we can move to the actual template(s)...

Edit your templates to include the following, make sure you edit the /path/to/cookiecheck.php with your full server path to your cookiecheck file (i.e. /home/username/public_html/cookiecheck.php):

<?php include('/path/to/cookiecheck.php'); ?>

{embed=skins/<?php echo $skin; ?>_header}

{embed=skins/<?php echo $skin; ?>_body}

{embed=skins/<?php echo $skin; ?>_footer}

What the above code does is 1) include the contents of your cookiecheck file, so we know which skin to show to your visitors, 2) embeds the contents of your header, body, and footer skin templates. Do this for all of your templates. If you have different templates for things like archives and categories, create new templates in your skins group (i.e. 1_archives, 1_categories, etc), and change _body to whatever the new template is. Keep in mind that once you setup your template file structure, ALL OF YOUR SUBSEQUENT TEMPLATES must use the same file structure (i.e. #_head, #_foot, #_body, #_archives, etc)

 

Code the actual skin switcher menu:

Since the rest of the skinning process was done manually, you guessed it: we'll have to setup the skin switcher dropdown box manually, as well. We'll use a dropdown select form with javascript to select and switch the skin.

Add the following code to your template (usually located in the sidebar). Edit the yourdomain.com/path/to/changeskin.php?newskin=1 to the web path to your changeskin.php file (i.e. http://www.yourdomain.com/changeskin.php?newskin=1), edit Your Skin Name to the name you want your visitors to see for the skin. For each new skin you add, add a new line to your skin switcher, changing your skin # (where newskin=1 is the corresponding skin number) and skin name for each additional skin:

<form name="skinlist">
    <p>
        <select name="skins" onChange="document.location=document.skinlist.skins.options[document.skinlist.skins.selectedIndex].value;">
            <option selected="selected">-- skin this site --</option>
            <option value="http://www.yourdomain.com/path/to/changeskin.php?newskin=1">Your Skin Name</option>

            <option value="http://www.yourdomain.com/path/to/reset.php">-- Reset to Default --</option>
        </select>
    </p>
</form>

Note: The form code above is written for XHTML Transitional. If you require Strict validation, you can change the tags yourdamnself.

 

The End:

And that's it. That's how you skin an EE site. When you are ready to add new skins:

1. Follow the procedure for adding new templates (using the numbering scheme) to your skins template group
2. Edit cookiecheck.php and changeskin.php with your new default template number, and the new number of total skins you have in your collection
3. Edit the skinswitcher dropdown code to add a link to your new skin

If you don't know HTML or knowledge of php includes or EE embeds, I suggest you go buy a book and read up on it. I won't answer emails with stupid questions about embeds or includes or anything that you need to know before even creating a template in the first place. Take that up with the EE forum, or the W3C.

 
¹ Not really, but it was worth a shot, wasn't it?