How to Adapt the UU Web Template Makeover Script

Return to the UU Web Templates Home.

This option is intended for existing sites that want to apply the new template to their own directory structure without otherwise changing content, directory structure, or filenames. You can customize the template to your own needs before you apply it. The template comes with a sample Perl script to help automate the application process. Note that the resulting web site will have all the same pages as your original web site, but will not have the Greenfield version's feature that allows authorized users to edit pages using their web browsers.

Table of Contents

1. How the Makeover Script Works

2. Technical Requirements

3. Making Over Your Congregation's Site

4. Troubleshooting

5. Technical Support

1. How the Makeover Script Works

The Makeover script doesn't come with any web pages other than an HTLM template; instead, it modifies the web pages that you already have. The Makeover version allows you to dress up your web site with a professional design.

Before you apply the web template to your site, you download the Makeover script and files to your web server and configure it with information about your congregation (like its name, city, and state or province) and how you want its menus to look. Then you run the Perl script to modify your web site's pages to use the new format.

2. Technical Requirements

In order to perform the makeover on your congregation's web site, you need to be comfortable with the following:

  1. Transfering files to the web server, usually using an FTP program.
  2. Running programs at the web server's command prompt, either Linux/UNIX or Windows.
  3. Modifying web pages, using HTML and a web page editor.
  4. Modifying and running Perl scripts. The Makeover template comes with a sample Perl script for converting web pages to us the UU Web Templates, but you'll need to modify the script so that it works on the pages in your site.

The Makeover version of the UU Web Templates requires the following on your web server (the computer run by a hosting service or ISP on which your web pages are stored):

  1. A web server that runs Perl. Most web hosting services and ISPs support the Perl programming language for free. Your congregation's web server must be able to run Perl.
  2. A staging area to try out the Makeover script. You can use your own PC, or another. Don't change the files that make up your congregation's live, public site until you have tested the Makeover scripts. You can't test the Makeover scripts in a subdirectory; because come of the scripts congain hard-coded links based on the root directory of the web site. Instead, you can install Apache, the most widely used web serve rprogram in the world, for free on your PC; it's available from the Apache HTTP Server Site. You'll be able to see the web pages that your Apache server displays on your own PC, but they won't be viisble to rest of the Internet.
  3. Permissions to modify the files that make up your congregation's web site.
  4. Permissions to run Perl scripts. The makeover program is written in Perl, so you'll need to run a Perl script once when you apply the makeover to your site.

You will need the following programs on the PC or Mac from which you install the templates:

  1. A file transfer (FTP) program for transfering the template files to your congregation's web server. Windows comes with a dreadful FTP program, so don't try to use it. Instead, use Internet Explorer, your web editor (if you have one that supports FTP), or download a free FTP program (as explained in Getting an FTP program below).
  2. A web page editor. You can use a text editor or a web page editor like Dreamweaver, Homesite, or Mozilla Computer (which is free, from http://www.mozilla.org/products/mozilla1.x/).
  3. A web browser (usually Firefox, Internet Explorer, Mozilla, Netscape, Safari, or Opera) with cookies enabled.

In order to install the files on your congregation's web server, you'll need to know these facts:

3. Making Over Your Congregation's Site

Here are the steps for performing a makeover with the UU Web Templates. These instructions assume that your web server runs Linux or UNIX. If your web server runs Windows, substitute the equivalent commands.

a. Make a copy of your current site

The makeover script will make changes to the pages on your congregation's web site. Rather that working on the live site, make a copy of the pages somewhere where you can make changes and run the Perl script.

One method is to create a /backup directory and copy the entire site -- including subdirectories -- into that directory. Another method is to download the whole site onto your PC (assuming that you can run Perl programs on your PC) and make the changes there. If you have another web site available (perhaps space on someone's personal site?) you can copy the files there. Just don't modify the files on the live, publically-viewable site, since it may take hours or days to finish making your changes.

To make a copy in a backup directory, type these commands at the Linux or UNIX command prompt, adjusted for the pathname of your web site:

cd /
mkdir backup
cp -R * backup

To copy your site into a tarball (archive file) called website.tar, suitable for transferring to another web server, type:

tar cvf website.tar /

b. Transfer the Makeover version of the UU Web Templates to computer or server

Before you can use the Makeover version of the UU Web Templates, you transfer them it to the computer where you plan to make your changes -- your web server or your own PC. All the files that make up the Makeover version of the UU Web Templates have been zipped together into a ZIP or tar file.

To download the UU Web Template Makeover to your computer, follow these steps:

  1. Create a folder on your computer in which to store the web template file. For example, you might want to store it in C:\My Documents\Web Template.
  2. Type or copy this into your web browser: http://www.uuism.org/templateproject/makeover/
  3. Choose the files you need. If you are using a PC or Mac, download the ZIP files. If you are downloading to a Linux or UNIX system, download the tar files.
  4. Your browser should ask what you want to do with the file you clicked. Choose Save and specify where on your computer to store the file (choosing the folder you created in step 1).
  5. When the file is dowloaded, open it and extract the files that it contains. On a PC or Mac, open it by double-clicking it in Windows Explorer (or Finder on a Mac). The file is a ZIP file (called a Compressed Folder in Windows XP). When you open the ZIP file, you see a list of the files that the ZIP file contains. Then copy the files from the ZIP file to the folder you made in step 1. On a Linux or UNIX system, use the "tar -xfv" command.

If you transfered the files to your PC, next you need to transfer them to your web server using an FTP program

c. Configure the template

Before you run the makeover script to change your existing pages, tweak the UU Web Template to your preferences. We recommend you change the header, footer, and left hand navigation links as necessary to work with your existing site.

??? Copy instructions here for how to log in, change password, and make site-wide changes? Or refer to those sections of the Greenfields documentation? - Margy 3/12/2006

d. Modify your existing site if needed

The UU Web Templates are designed for the web site to appear to be in the root directory -- the top-level directory, written as "/". That is, they assume that when a user types www.yourdomain.org into a web browser, your site appears, with no additional pathname after the domain name. This issue comes up when pages contain pictures or links to other pages (which every page contains!), because these links must be either relative (that is, relative the location of the page that contains them) or absolute (that is, relative to the root directory of the site). The pages in the UU Web Templates use absolute links that assume that the pages are in the root directory of your site.

If you don’t have your own domain name (e.g., unitarian.org), you also need to modify the site-relative links (<a href> tags) and image (<img>) tags. For example, our old site was located at http://www.unitarian.org/fus/ so we would have changed <img src=”/images/logo.gif”> to <img src=”/fus/images/logo.gif”>.

e. Configure the Perl script

You need to configure the supplied Perl script before you run it and apply the template to all your pages. The script preserves all <title> and any <meta> tags from your existing pages. The trick is to identify something unique in the HTML of each of your pages so the script knows what to replace and what to keep. Many pages include standard introductory “fluff.” For example, the first table might contain the top banner. The next table might hold some navigation links in its left hand cell before the "real" content of that page. In this case, the real content starts in the second cell of the secnd table, so you edit the script accordingly.

$a =~ s#(<body.*?</table.*?>).*?</td.*?>#$1$newstring#is;

Here's what this line of Perl does:

  1. Start match with body to leave title, meta tags intact.
  2. First table is header - the $1 replaces whatever is found.
  3. The nav menu to replace begins with the next <td> and ends with the following </td>.

A note about Perl

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 free and runs on any platform. Perl is included in many operating systems, including Mac OS X. You can download Perl, read the dcoumentation, and learn more at www.perl.com.

If you are familiar with Unix you’ll find the syntax very familiar. Basically, the line

$a =~ s#(<body.*?</table.*?>).*?</td.*?>#$1$newstring#is;

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

Let look more carefully at the pattern and replacement.

#(<body.*?</table.*?>).*?</td.*?>#$1$newstring#

This says to ignore everything until you see the string <body followed by any character (.) zero or more times (*) but don’t be greedy (?). The non-greedy modifier means to stop matching as soon as the first instance of </table.*?> is found. The paranthesis tells Perl to save everything up to this point (as $1) to reuse in the replacement string. The next part of the match, .*?</td.*?> is thrown away. The replacement string is the first part of the match $1 plus a variable named $newstring.

Note that since we’ve trashed some table tags, the $newstring better put this back!

f. Apply the template

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). Make a copy of the original site so you never have to download it again. Next, run the Perl script on a copy. If you don't get what you expected, you can try again.

??? What's a better system: tell them up front to make a copy of the site in a subdirectory, then run the makeover? The Greefield site works fine in a subdirectory. Then test the pages, tweak as necessary, and then move the old site and replace with the new site? - Margy 3/12/2006

g. Site maintenance

For DreamWeaver aficionados: Say you want to make the identical change on all your pages. Relax, you’ve already done all the hard work. Since the new template includes DreamWeaver comments, you can now use Dreamweaver to edit the template and apply the change to all your pages automatically. The template includes all the Dreamweaver bits, like

<!-- #BeginTemplate "/templates/uutemplate.dwt" -->

necessary for Dreamweaver's template editing capability:  you can edit a single .dwt file and Dreamweaver will apply the change to every page that reference that template.  It's kind of a GUI way of doing what the Perl script does, but requires Dreamweaver.

If you don’t use Dreamweaver, you can adapt the Perl script to do the same thing, only much faster.

h. Test your new site

Try out the new version of the web site in both Internet Explorer and Firefox, and on both high-speed and dial-up lines. Adjust your pages and the sizes of your images accordingly. Check all the links and make sure that all the images appear where they ought to go.

i. Go live

When you are confident that the new version of the site is working, move the files from your old site into an archive directory (perhaps one named "old" or named with today's date) and move the test files into the root of your web site. Test again!

4. Troubleshooting

Instructions to come!

Types of links

There are three types of links in the scripts:

Watch out for these, especially if your site uses a deep directory structure or if you are running it from a location other than the root directory.

5. Technical Support

You can get help with installation and design by e-mailing one of the team that created these templates, at templates@uuism.org.

Or, join the UUTemplates mailing list:

UUTemplates support mailing list

If your congregation uses the UU Web Templates, please consider making a donation to help defray the cost of the project. Please email the same address.

This project was funded in part by the UU Funding Panel.

Thanks for using the UU Web Templates, and we hope that they are helpful to your UU congregation!

Documentation by Craig A. Smith

Last updated April 14, 2006, Margy Levine Young

Return to the UU Web Templates Home.