WebsiteX5.info - The ultimate guide for Incomedia's WebsiteX5

Template.css contains the styles for the template, bringing it all together. Each model has its own template.css-file, defining the colours which are used, the background images and the height and size of some of the elements of the web pages.

An example of a template.css file:

body {margin: 0; padding: 0; background-color: #EFEEEA; }
#imSite {width: 960px; margin: 15px auto; text-align: left; }
#imHeader {height: 173px; background-image: url('top.jpg'); background-repeat: no-repeat; background-position: left top; }
#imBody {background-image: url('content.jpg'); background-repeat: repeat-y; background-position: left top; }
#imMenuMain {width: 134px; float: left; padding: 11px 0 0 57px; }
#imContent {width: 700px; float: left; margin-top: 1px; }
#imFooter {clear: both; height: 75px; background-image: url('bottom.jpg'); background-repeat: no-repeat; background-position: left top; }
#imFooter_L {margin: 16px 0 0 65px; float: left; }
#imFooter_R {margin: 16px 65px 0 0; float: right; }

Essentially the width, height, colours, padding, margin and also the background-images are defined in this css-file. The images which are used in this css are:

• top.jpg, which is the banner on the top site of the pages
• content.jpg, the background for the imBody of the page (not the whole body)
• bottom.jpg, which is used as the footer-image.

But other images can be used as well.

For example, the code-fragment

<div id="imMenuMain">
[imMenuMain]
</div>

Defines the main menu as having a width of 134 pixels

The div floats to the left, which means it is placed on the left site of the containing <div>
It has a defined margin of 13px 0 0 28 px; meaning the top-margin is 11px, the right-magin is 0px, the bottom margin is also 0px and the left margin is 57 px.
A little about the css box model.

Here an image of a content element (click to enlarge):

Each block on a page has a margin, a border, padding and content. When you define a block to be 100px in height and 200px in width these values doesn't include the margin, border and padding, so when you define the margin as 10px, the border as 2px and the padding as 8 px, the actual height the element takes on the screen which is left for the content 100 + 2x10 + 2x2 + 2x8 = 140px and the for the width 200 + 2x10 + 2x2 + 2x8 = 240px.

You can edit and change the template.css to suit your needs. On the internet there are several good css primers, in case you need one.

<-- Previous

Next -->