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

The template is almost right. The only thing that needs attention is the width of the menu buttons. WX5 generates a style.css. It uses the settings from the 'Advanced Settings' dialogs to generate this file. This makes that the top-level menu buttons are always 120px in width! And we need bigger ones.

When you decide on text-buttons it is possible to adjust the width by adding an extra style parameter to index.html. Using the Inspect option of FireBug you can find that the width of the buttons is defined by a style rule in style.css (#imMnMn ul a). Use a bit of trial to find a correct width for the buttons. 150px is a nice value.

Open the templates index.html and just before the </head> tag add the following lines.

<style>
#imMnMn ul a { width:150px; }
</style>

I've experimented with graphic buttons, but because they are generated by WX5 it isn't possible to adjust the width of these graphic buttons. Not even when you use a custom button image. Pity...

The completed template now looks like this (click to enlarge)...

To wrap things up open WX5 and create a new project using your new template. Add some dummy content on the Home page and press test. Take care the whole page fits on the screen!
Now use a screen capture utility to grab an image of the completed screen. Resize it to 330px in width and save the image with the name 'ImPrev.jpg in the template directory where your template.css and the other images are. Now WX5 can give a preview of your template.

The purple color style selector can easily be changed to a more fitting color by renaming the template
directory (the one with template.css) to another, more fitting colorcode.

If the placement of the blocks on the screen isn't quite right you can adjust this by changing or adding the padding and/or the margin settings or the height and width of the elements.

That's it. Enjoy!
Rbbrt

<-- Previous