So far we have only set up some basic things without generating any remarkable visual output. Lets add some custom CSS code and tell the main template to use it. The following parts of the tutorial will heavily depend on the CSS code presented in this section, so make sure you do this part right.

The CSS code will tell the browser to use a custom background image, called "background.png". This image file is available from the following link: background.png. Grab and save the image as "design/tscm/images/background.png". Make sure that the webserver can read the image (e.g. chmod a+r background.png).

Creating a custom CSS file
Copy & paste the following lines (from the box below this text) and save the file as "design/tscm/stylesheets/tscm.css".

body

{

   background-color: #ffffff;

   background-image: URL("../images/background.png");

   background-repeat: repeat;

}

 

p

{

   font-size: 80%;

}

 

td

{

   font-size: 100%;

}

 

hr

{

   height: 0px;

}

 

a

{

   color: #444444;

}

 

a:visited

{

   color: #666666;

}

 

a:hover

{

   color: #aaaaaa;

}

 

.main

{

   width: 732px;

   margin-left: auto;

   margin-right: auto;

}

 

.border

{

   color: #ffffff;

   background-color: #333333;

}

 

.menu

{

   width: 80%;

   background-color: #474747;

   margin-left: auto;

   margin-right: auto;

   text-align: center;

   font-size: 80%;

   padding: 2px;

}

 

.menu a

{

   color: #cccccc;

}

 

.menu a:visited

{

   color: #bbbbbb;

}

 

.menu a:hover

{

   color: #eeeeee;

}

 

.content

{

   padding: 32px;

   text-align: left;

}

 

.footer

{

   color: #bbbbbb;

   background-color: #333333;

   padding: 4px;

   text-align: center;

   font-size: 70%;

}

 

.footer a

{

   color: #eeeeee;

}

 

.footer a:visited

{

   color: #eeeeee;

}

 

.footer a:hover

{

   color: #ef8e00;

}

 

.pagetitle

{

   font-size: 170%;

   padding-bottom: 8px;

}

Using the custom CSS file
Edit the main template file ("design/tscm/templates/pagelayout.tpl"). In the head section, add the following code after the already existing stylesheet-related lines:

<link rel="stylesheet" type="text/css" href={"stylesheets/tscm.css"|ezdesign} />

This line will tell Exponential to make use of the custom CSS file that we just created.

After you refresh the TSCM page in the browser. You should see that the background has changed from plain white to grayish vertical stripes. (If the background does not change, try to clear the cache.)