« Republican National Convention Day 3 | Main | Bush Freudian Slip? »
September 05, 2004
How to Skin a Movable Type Site
Regular readers of this site (all 3 of you) might have noticed that I recently added a drop-down box in the sidebar that allows the user to select a "skin" for the site. Thanks to Dasme over at movablestyle.com for the original inspiration, and the great country of Colombia for growing all of the great coffee that fueled the changes necessary to flesh out the original idea. If you'd like to read the article that started it all, you can find it here, or just keep reading if you want to find out how I did it.The Objective
One of my original intentions for starting this site was to be able to experiment with CSS (Cascading Style Sheets) in layout and design. It didn't take a lot of thought, however, to realize that I couldn't simply change the layout willy-nilly whenever I got a new design idea. That would simply be too jarring on those who visit the site regularly, and is generally frowned upon by web designers as a Really Bad Idea™. The answer is, of course, dynamic scripting. Being the good (read: lazy) programmer that I am, I immediately started searching the web for examples of dynamic scripts that would allow the user to switch styles on demand. My requirements were these:- An easy-to-use interface for the client side.
- The dynamic processing should be done on the server, if possible.
- Following requirement 2, little or no Javascript should be involved.
- Persistence of the selected style, so that the user would see the same style from one visit to the next.
The Requirements
Cool. I now had a plan to implement a style-switcher in PHP. However, I soon realized that a default Movable Type installation doesn't spit out .php pages, at least not until a few days ago when MovableType 3.1 was released. And that was when I discovered the MT Wiki at VirtualVenus and an excellent how-to on converting an MT site to PHP. All that's left at this point is to make sure that the web host has PHP installed, and we're ready to go. So take a moment to get yourself converted. Go ahead. I'll wait. Oh yeah, now is probably a good time to mention that I run this site on Linux/Apache/MySQL. If you're running a site on Window$ II$, you may need to make some slight changes. Maybe someday I'll write an article on how to do this in Window$. Of course, I don't really like Microsoft, so I probably won't.Ok, I've Got my PHP Mojo Working. Now What?
Now we have to get our directory/file structure in order. Make sure that your directory structure on your web site looks like this:- / - base directory of www.yourblog.com
- archives/ - your blog archives
- inc/ - PHP includes
- styles/ - style archives
- FilmNoir/
- style-sheet.css
- BlackNaugahyde/
- Black+White+RedAllOver/
- OrangesAreTasty/
- PhoneGuySez(1024x768)/
The PHP Code
Now it's time to get our hands dirty with some code. Here's what the basic script looks like:
<?php
// Where the script can find the list of style directories.
define(STYLE_BASE, 'path to base directory of www.yourblog.com/styles/');
// What the default style should be.
define(DEFAULT_STYLE, 'FilmNoir');
$style = $_GET['style'];
if (!$style) {
$style = $_COOKIE['style'];
} else {
setcookie('style', $style, time()+60*60*24*365, '/');
}
function get_style() {
global $style;
if (is_valid_style($style)) {
return $style;
} else {
return DEFAULT_STYLE;
}
}
function get_style_title() {
$s = get_style();
$s = str_replace('_', ' ', $s);
return $s;
}
function get_style_list() {
$result = array();
if ($d = @opendir(STYLE_BASE)) {
while ($f = readdir($d)) {
if (is_valid_style($f) && !is_hidden_style($f)) {
$result[] = $f;
}
}
closedir($d);
}
sort($result);
return $result;
}
function is_hidden_style($f) {
return file_exists(STYLE_BASE."$f/hidden");
}
function is_valid_style($f) {
return file_exists(STYLE_BASE."$f/styles-site.css");
}
function list_style() {
$list = get_style_list();
$curr = get_style();
$html = '';
foreach ($list as $r) {
$r2 = str_replace('_', ' ', $r);
$selected = ($r == $curr) ? ' selected="selected"' : '';
$html .= "<option value=\"$r\"$selected>$r2</option>";
}
return $html;
}
?>
Copy this script and upload it to the directory we made earlier named 'inc'. You will need to modify the second line of the script with the path to your 'styles' directory, and also modify the fourth line and substitute the name of your default style in place of 'FilmNoir'. Lines 5-10 of the script create a cookie to be placed on the user's computer so that the next time the user visits our site his/her chosen style will be remembered and displayed automatically. The cookie is set to auto-expire after one year. Don't forget to upload the script in ASCII mode, and also mark it executable.
To Auto-Prepend, or Not to Auto-Prepend?
If you're fortunate and have an accomodating web host, or if you host your own site, you'll be able to take advantage of PHP's auto-prepend feature. This allows the web server to automatically tack-on the PHP script to the beginning of any web pages that are served. In order to enable this you'll need to make a couple changes to your .htaccess file. If you don't know what a .htaccess file is, or you don't know where to find it, you'll want to click here. Go ahead. I'll wait again. I need a cup of coffee anyway. Here's what you'll need to add to your .htaccess file:php_value include_path path to base directory of www.yourblog.com/inc php_value auto_prepend_file "prepend.php"If you're unfortunate, or if you're me, your web host won't honor the php_value tag. In that case, things will be a little more difficult but not impossible. In order to get our PHP include to execute we'll need to insert a line at the very beginning of all of our MT Template files. Remember, this line must be the very first line in the template, even before the doctype declaration. If it is not the first line then the cookie will not function properly and you'll be scratching your head wondering why the site doesn't remember the style preference that you've chosen.
<?php include("path to base directory of www.yourblog.com/inc/prepend.php"); ?>
Getting the MT Templates in Shape
Next we'll need to make a few changes to our MT Templates so that the PHP style will be picked up by our pages. Copy the next line and paste it into your templates in place of the first stylesheet link in the <head></head> section:
<link rel="stylesheet" href="<$MTBlogURL$>styles/<?=get_style()?>/styles-site.css"
title="<?=get_style_title()?>" type="text/css" />
You will need to do this for the following templates:
- Main Index
- Master Archive Index
- Category Archive
- Date-Based Archive
- Individual Entry Archive
- Comment Listing Template
- Trackback Listing Template
<h2>Select-a-Style</h2>
<form action="index.php" method="get">
<select name="style" onchange="this.form.submit()">
<?= list_style() ?>
</select>
</form>
<br />
Comment Preview/Error/Pending and Search
Our last bit of tweaking concerns those templates which send CGI output directly to the browser. Since the output of a CGI script can't be re-directed to run through the PHP parsing engine before being sent to the client browser, we won't be able to use PHP to pretty these up. Here's where I decided to go with a bit of Javascript. Here's the code:
<script type="text/javascript" language="javascript"><!--
function GetCookie(name) {
var startIndex = document.cookie.indexOf(name);
if (startIndex != -1)
{
var endIndex = document.cookie.indexOf(";", startIndex);
if (endIndex == -1) endIndex = document.cookie.length;
return unescape(document.cookie.substring(startIndex+name.length+1, endIndex));
}
else
{
return null;
}
}
var style = GetCookie('style');
if (style==null) {style=FilmNoir;}
document.writeln("");
//--></script>
Copy and paste this entire block in place of the first stylesheet link in the <head></head> section of these templates:
- Comment Preview Template
- Comment Pending Template
- Comment Error Template
Voila!
Now that wasn't so hard, was it? The only thing left to do now is go get a cup of coffee and enjoy your newly-skinned MT site. And pick me up a latte while you're there, ok?Posted by bcoffee at September 5, 2004 10:39 PM
Trackback Pings
TrackBack URL for this entry:
http://www.icantthink.com/cgi-bin/mt-tb.cgi/19
