Customizing a Template for Your Town or Non-Profit

Introduction

Under the Small Community Website Project, the Center for Rural Development at Louisiana Tech University made available 8 website templates that can be customized for either towns or non-profit organization that do not have limited resources to hire a professional web designer.

In this tutorial, we will go over the process of customizing a template for a non-profit called "Humane Aid" (fictional).

1. Downloading the Template

First, you need to download the template. Please go to the Small Community Website Project's templates page and select the template that is most suitable for your needs.

After downloading template, which is stored in a zip file, you should extract it to a folder of your choice in your computer. Windows XP has a built-in ZIP extractor. If you cannot uncompress ZIP files, try downloading WinZip.

For this tutorial, we selected the Community Site #6.

Community Site #6.

2. Replacing the Banner

You need to change the banner featured in the template so it features the name of your town or non-profit and, if possible, the logo or seal that is associated with it. To do this, you need to use an image manipulation software. Please do not use Microsoft's Paint, as the result will look unprofessional. Instead, you can use any of the following programs:

• GIMP (http://www.gimp.org/). An open source image manipulation program. (Free)
• Adobe Photoshop (http://www.adobe.com/products/photoshop/). A professional photo editing software. $599 direct, $299 (Education Version).
• PaintShop Pro. (http://www.jasc.com) An affordable image editing tool. $79 direct.

For information on how to use any of the above programs, please refer to their documentation.

Each of the templates available through the Small Community Website Project will have information on the recommended size in pixels of the banner and the name of the file that holds the image. For instance the Community Site #6 has the following information:

You can use that information to create a new file in the image editing software of your choice. You do not have to adhere to the colors used in the template (we will show you how to change the color scheme later on).

We chose to go with a green hue and created a new banner for Humane Aid:

We then replace the new banner with the file title.jpg in the template and we can go now to the next step.

Progress after step 2.

3. Changing the Color Scheme (optional).

Each of the templates contains detailed information about the colors used for backgrounds, text, and links. Some of the templates use CSS (Cascade Styling Sheets) to define colors and others use inline HTML tag descriptions.

The Community Site #6 template uses Cascade Styling Sheets. We therefore need to open the style.css file and change the colors accordingly. You should use the information on the template's home page for reference and use a "Find and Replace" feature available in most text-editing application. We changed the color scheme as follows:

Changing the color scheme will give your website a more original look and will differentiate it from other websites that use the same template.

Progress after step 3.

4. Adding the Content

Once you have changed the banner and color scheme, you can proceed to add content to the site. The link categories on the template should help you organize the information for your website. Make sure to change the TITLE tags on the website since they are initially set to "Generic Town" or "Generic Non-Profit". The other topics in this website will help you make the rest of the changes you need for your webpages.

Human Aid's Home Page after adding the content.

[Back to Top]