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

Now we have to create all the files which are needed for the new template.

Download the example files

The images
First we have to slice up the image, creating top.jpg, content.jpg and bottom.jpg. To get the rounded corners I decided to incorporate them into top.jpg and bottom.jpg. It is possible to create separate images for the top and bottom of the menu, but this means you have to create extra div's in index.html and some extra entries in the template.css file.

After slicing up the design you end up with the following three files.

top.jpg. This file is 1025x222 pixels. The rounded top of the menu-area is incorporated in this image.

content.jpg is only 8 pixels in height. It is repeated in the y-direction (verical), so it will fill the whole of the content area.

Creating the template structure
To create the folder-structure for you new template it is easiest to copy an existing template. Use the 'Style Template Selection' -dialog for a template which comes close to your own design in width and style and remember it's name.

Then open an Explorer and go to the 'C:\Program Files\WebSite X5 Evolution\Models folder' and find the selected template. Copy this template to a new name.

Next add your template to the list you see in the 'Style Template Selection' dialog. How you can do this is described on this page.

It is easiest to remove unneeded folder. In the Explorer go to your new template folder. When you are creating a horizontal lay-out delete the 'Ver' folder and when you are creating a Vertical layout remove the 'Hor' folder. The example in this tutorial is a vertical layout, so I removed the Hor-folder.

In the remaining 'Ver' (or 'Hor' ) folder remove all but one of the folders starting with the '#´-sign. This makes that you can see only one color in the Style Template Selection dialog when you select your own template. You can add more color-variations later.

Now copy the graphics you have created to the 'Ver' folder, overwriting the original top.jpg, content.jpg and bottom.jpg.

Now stop and start Incomedia WX5, create a new project and select your own template. You could also add some dummy content...

Now test the website and examine the result. Chances are it does not look right at all!

<-- Previous

Next -->