Look and Feel Makeover

by Craig A. Smith

This option is intended for existing sites that want to apply a new look without otherwise changing content, directory structure, or filenames. You must customize the template to before you apply it. A sample perl script is supplied to help automate the application process. It too must be customized for your site.

Step 1 Customize the template

You should tweak the template to your preferences. We recommend you change the header, footer, and left hand navigation links as necessary to work with your existing site. Customize it, add your organization's name, address, phone, etc. Make all links site-relative (starting with a slash) so they work from any subdirectory level. For example, images should be written <img src="/images"> - If you don't have your own top-level domain (TLD), you will need to take that into account. For example, our old site was located at http://www.unitarian.org/fus/ so we would have needed to write <img src="/fus/images"> instead. Do the same for stylesheet and javascript links.

A note about Relative links

You could use <img src=images> on your home pages, but subdirectories would have needed to use <img src=../images> or <img src=../../images> depending how deeply they were nested. Since we don't know how many subdirectories you have, we recommend you avoid documents-relative links in favor of simpler site-relative links <img src=/images> (note leading slash) which will work just as well from any subdirectory. Of course you could also use globally-absolute links (starting with http://) but that more to type and you cannot easily move your site to a new domain.

Step 2 Configure the Perl script

Perl is a powerful text manipulator. Since html is text, perl is often used for cgi scripts. Perl was selected for this project because it's fast, free, and runs on any platform. Perl is included in many operating systems, including Mac OS X. You can download perl, read the documentation, and learn more at http://www.perl.com/ You need to configure the supplied perl script before you run it to apply the template to all your pages. The script should preserve all <title> and <meta> tags from your existing pages. The trick is to identify something unique in the html so the script knows what to replace and what to keep. This was easy for our site (a frameset). Contact the author if you need help (include the site you want to change).

Many pages include standard introductory fluff. For example, the first table might contain a banner or masthead. Let's assume the next table holds some navigation links in its left hand (first) cell before the "meat" starts in the 2nd (main) cell. Let's edit the script accordingly. If you are familiar with Unix you'll find the syntax very familiar. The line

$a =~ s#(.*?).*?(.*?)#$1 $head $2 $tail#is;

tells perl to take the variable $a and substitute (s) the pattern between the first pair of delimiters (#) with the replacement pattern between the next set of delimiters (#) in a manner insensitive to case (i) and operating on a string (s). The semicolon ends the command.

Let look more carefully at the pattern and replacement.

#(.*?)<body.*?</table.*?>.*?</td.*?>(.*?)#$head $1 $tail#is;

This says to grab everything (and save it as $1) before the <body> tag (thus preserving the <title> and any <meta> tags). Next we match any character (.) zero or more times (*) but don't be greedy (?) - in other words, stop matching as soon as the first instance of </table.*?> is found. Next .*?</td.*?> matches the old navigation menu in the first cell of the next table. In this example, everything that follows is the "meat" we want to keep. We match it with (.*?) where the parenthesis tells perl to save it for re-use (as $2) in the replacement string. The template has been broken into 2 parts $head and $tail so we can insert the "meat" as $2 between. Note that since we've trashed some table tags, the replacement strings better put these back! Alternatively, you can add another line to remove all presentational markup.

Step 3 Apply the template

First run the perl script on a single file. If you don't get what you expected, adjust and try again. Once a single file can be converted, you're ready to convert the whole site. We don't expect you to do this on your production server. Use zip or tar to get a copy of your entire site on a staging machine (your PC should work just fine). Be sure to make a copy so you never have to download it again. We've included a Unix shell script that will apply the perl script to all files in a directory hierarchy. Perhaps someone can supply a perl or BASIC equivalent? I'm not a programmer but I have found something that works. Perl's moto TIMTOWTDI [tim-toe-tiddy] stands for "There is more than one way to do it." Best of luck with your method. I would be interested in any success stories as well as pitfalls to avoid.

Step 4 Site Maintenance

Say you want to make an identical change on all your pages. Relax, you've already done all the hard work. The template uses an external stylesheet to control presentation. Editing just that one file can affect all your pages simultaneously. But what if you need to change content or structure? For example, your area code has changed and it appears in the footer of every page. Since the template includes DreamWeaver comments, you can use that tool to edit the template and apply the same change to all pages. If you don't use DreamWeaver, you can adapt the perl script to do the same thing, but much faster.


Updated 2006-01-09 by Craig A. Smith