skip to content
.
logo picture logo text
Breadcrumb trail for Web Design:
Web Design -> Planning -> Best Practices -> Basic Skills -> Building -> Special Pages -> Publishing -> Testing -> More

Templates

Introduction

Sometimes you can find a template that is almost exactly what you had in mind. All you might want to do is add your logo and/or change a few colors. Then you could duplicate pages, add your content and links and be ready to take the steps to publish your site.

In this exercise, you can learn how to change the page background, border color, and the banner image. We will use one of the free templates from freecsstemplates.org - the Connections template. 

Compare the examples with the original template. All that was changed was the banner image, background color and border color.

The original Connections template
Example 1: Dog
Example 2: Butterflies

Gathering what you need

If you want to play along, there are some things you will need!

A Plain Text Editor

If you are new to using Notepad (comes free with Windows) or TextEdit (comes free with Macs), you might want to check out this file Notepad, Windows and TextEdit before you begin. It is best not to use a word processing program, such as MS Word.

The Connections Template:

  1. Create a folder named "my website" on your computer for your project. 
  2. Go to http://templated.co/connection and Click on "download .zip (Connections)"
  3. Save the zip file to your desktop or wherever you generally save downloads.
  4. Open the folder and unzip the file.
  5. Copy the contents of the "Connections" folder and put it in the folder that you created. Be sure you copy the "images" folder and it's contents, the index.html file and the default.css files to your "my websites" folder.

Note: Usually, you just double click on the zip file and your computer will unzip it. It will create a folder called Connections. Inside that folder will be another folder named Connections which contains an index.html page, a .css document, a copy of the license, and a folder named images with 3 images inside. These are the items to move to your "my website" folder. To check that all items have been moved, use your browser to open the index.html file in your "my website" folder. It should look like the preview of the template.

An Image to Use for the Logo (Optional)

If you would like to create your own logo (banner), the size is 600px X 200px. Name the image - mylogo.jpg - and save it to the "images" folder inside your "my website" folder.

The writing in the title is not part of the banner, so don't put words on the banner you create. Also, keep in mind where the writing appears when you make your banner. 

A Color Hex Code Chart

Although you can use common color names or RGB colors, since the original template css file uses hex codes, we'll be using those also to make it a little easier to understand the directions. There are different online color charts and sites, but we will use this one Cloford 216 Web Safe Colors

Getting Ready to Work

Ready! Set! Let's get started!

  1. Open the plain text editor you are going to use.
  2. Go to File --> Open-->and open the default.ccs file from your "my website" folder. Yikes, that's a lot of code!
  3. Your browser should be open or you wouldn't be viewing this page, so open a new window in your browser. Then, Go to file-->Open file and open the index.html file in your "my website" folder.
  4. Open a new browser window and then go to the Cloford 216 Web Safe Colors site.

Ah, now we have three windows open in the browser. One showing these instructions, one showing the Cloford chart and one showing the Connection template. And we have the default.css file open with either Notepad, TextEdit or the plain text editor of your choice.

As you make changes in the css file, save them and then refresh (reload) the browser window that has the index.html. You should see the changes that you make. (If you text editor asks if you want to append a suffix (.txt), click "no" or click "use css")

First change: The background color.

Very close to the top of the default.css file, you'll find this section:

body {
    margin: 20px 0;
    background: #7A0026 url(images/img01.gif);
    font: normal small Arial, Helvetica, sans-serif;
    color: #666666;
}

We're going to change the color in this line:

background: #7A0026 url(images/img01.gif);

#7A0026 is the color hex code for the background. Play around and put different hex code number in to see how the background changes. Each time you put in a new hex code, save your default.css file and refresh/reload the browser window that contains the index.html file. You should see the changes you just saved. Be sure the hex code starts with a pound sign # and ends with a semi-colon. You can use the Cloford chart to find some colors to use.

The designer of the Connections template did some things a little differently. The original template contains a partially transparent gif for the page background which allows the background color to show in the design and look as if it is part of the background image. That makes things easier if you simply want to change colors of the page.

Second Change - Border color

In this default.css file, the color that appears to be the border is set in three different places. The easiest way to find the next code to change is to use the find feature in your simple text editor. Search for -  #330010   We're going to change the color in the three different sections shown here. Change the #330010 to the color of your choice. Be sure to leave the # sign before the numbers and the semi-colon after them.   
#page {
    width: 600px;
    margin: 0 auto;
    background: #FFFFFF;
    border: 10px solid #330010;
}
#menu {
    height: 50px;
    background: #330010;
}
#menu a {
    display: block;
    float: left;
    margin-left: 20px;
    padding: 20px 0 2px 0;
    border-bottom: 4px solid #330010;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: bold;
    color: #FFFFFF;
}

Save the changes you want to keep in your default.css file. Refresh/reload the window with the index.html page and view the changes. 

Changing the background image in the header

Be sure the image you want to use for the logo is in the "images" folder inside your "my website" folder. All we will need to do to the code is change the name of the image.

Look for this code in the default.css file

#logo {
height: 200px;
background: url(images/img02.jpg);
}

Change

background: url(images/img02.jpg);

to

background: url(images/mylogo.jpg);

Save the changes to the default.css file. Refresh/reload the browser window that contains the index.html page. You should see your logo at the top of the page

What Next?

You have some different choices:
  • You could add your own content to the "Connections" template and use it if you want. The "Adding Content" page might give you some suggestions or tips about HTML editors you could use. If you know how to add content, you could go to the next secton, "Building Your Website" to learn more about what to change/add to the template.
  • You could find a free css template is more in the style you want and then add content. Some templates refer to the logo as the header, but you should be able to change the background image to one of your own and also change some colors, if you wanted. I've used templates from freecsstemplates.org. However, there are other sites which offer free templates which only require a link back to their site.
  • You could return to the "Basics" page and work through some of the other tutorials.
If you run into a snag, you could post in one of the Eons groups that is used as a forum, if you want or contact me there via PM.

<-- Return to the "Basics" page  |  Go to the next section "Building Your Website" -->