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
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
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
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
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
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
4. Add the new content to the new pages.
5. Open your index.html page with your browser and test