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

Chances are your design doesn't look right. The header and footer of the page are out of place and the parts of the website do not fit. For example, the design for this tutorial looked like this:

To get things right you'll have to edit the file template.css.

First set the background color of the whole page to suit your design.

body {margin: 0; padding: 0; background-color: #F3F3F5; }

Adjust the total width of the design. Our design is 1025 pixels in width

#imSite {width: 1025px; margin: 15px auto; text-align: left; }

The 15px margin makes that at all around the design there a whitespace of 15 pixels.

Adjust the widths of the menu- and the content part of the design. This requires some calculation.
We want a menu width of 180px, but there's a padding defined in the style rule.

padding: 11px 0 0 12px means:

• padding at the top is 11px
• padding at the right is 0
• padding at the bottom is 0
• padding at the left is 12 px

(start at the top ad go clockwise)

So the 180px containt 12 pixels of for the left padding. This leaves 180-12=168 pixels for the actual menu.
So we change the width parameter to 168px.

#imMenuMain {width: 168px; float: left; padding: 11px 0 0 12px; }

For the content we have 1025-180=845 pixels left. There are no left or right margins defined, so we can change the width to 845px.

#imContent {width: 845px; float: left; margin-top: 4px; }

The footer image is 88 pixels in height. So we change the width of the footer to 88px:

#imFooter {clear: both; height: 88px; background-image: url('bottom.jpg'); background-repeat: no-repeat; background-position: left top; }

The placement of the footer note and the email address is not yet right. We need to push them down. You can do that by adding a padding-top parameter to the containing div or by changing the top margin of the note and email-address. Just experiment until you feel it looks right. You can also change the horizontal positioning of these elements.

#imFooter_L {margin: 60px 0 0 28px; float: left; }
#imFooter_R {margin: 60px 28px 0 0; float: right; }

The next thing you have to do is to change the value for the content width in Settings.ini.

[Model]
ContentWidth = 845

Now you are ready to test the design. When I looked at it I didn't like the way the content flowed all the way to the right hand side of the design, so I changed the width of the content to 825, both in template.css and Settings.ini. This is the result:

<-- Previous

Next -->