skip to content
.
logo picture logo text

CSS Template - Exercise 01

The template used in this exercise is the Pomodoro template from http://templated.co. (formerly freecsstemplates.com) The free templates offered there include free images to use with the templates. All that is required to use the templates is a link back to the site. This link can be left in the footer of the template.

For this exercise, there are two examples of a "More About Me" page that was made to use with my profile on the Eons site. The first example shows the template being used without any changes to the images or external css file. The only thing different about the second example is that the four images were replaced with different images. No changes were made to the code.

The free HTML editor, Kompozer, was used to add the text. You can change the text with a different editor or use a plain text editor, if you know how to code from scratch.

Changing the images without changing code

This exercise will show you how you can change the look of a free css template without changing any of the css code. Instead, we'll create new images to replace the ones in the original files. You might be surprised at what a difference this can make.

Downloading the template

Create a folder on your computer desktop to hold your files.

Download the Pomodoro template zip file to the folder you set up.

Open the folder and unzip the file. Usually, you can just double click on the zip file and your computer will unzip it. It will create a folder called Pomodora. Inside that folder will be another folder named Pomodora which contains an index.html page, a .css document, a copy of the license, and a folder named images with 5 images inside.

Gathering / Creating the images

1. Navigate to the Pomodoro Folder

2. Right click and create a new folder named "images 2"

3. Move the images in the original "images" folder to the "images 2" folder. That will keep the original images safe.

4. Pick out and/or create the images you want to use. Follow this guide for sizes:

  • img1.gif is the background for the page.  (Any size, but use a .gif image)
  • img2.gif is the background for the content area. (Any size, but use a .gif image)
  • img3.jpg is the banner. You will need a banner that is 700 wide by 160 tall
  • img4.jpg is the little picture. You will need a picture that is 120 wide by 160 tall.

5. Change the names of the images you want to use to the names of the corresponding image.

6. Then save or move them to the original "images" folder inside the Pomodora folder.

7. Use your browser to open the index.html file in the Pomodora folder and view the new look.

Info about Creating the images

You can use any background .gif image for "img1" and "img2".  If you only have .jpg images, you can convert them to .gif images at http://www.ezimba.com/. (formerly Iaza.com) Since img2 will be the background for the content area, you will need to choose one that is muted so the text will not be difficult to read. Here a a few links to some free background sites.

There are also sites where you can create banners or small images. You could use a photo you've taken or get an image from a site which offers free images.

You can crop or change the size of an image with a graphics editor. There are some that you download and some you can use online.

Turning one page into many pages

1, Replace the text in the index.html file with your text.

2. Create links for the menu using relative links.

3. Create the pages for the links you just made by saving the index page with a new name for each of the links in the menu.

4. Add the new content to the new pages.

5. Open your index.html page with your browser and test the links.

Return to Basic Skills and Practice page or Go on to Building a Website