CompuAid Computer Services
Sample XSitePro Template

This XSite Pro template design is a little more complex than average. But you can see how, with a little ingenuity, you can overcome the typical XSite Pro "look" of your Web site.

To help lay out the left panel, XSite Pro's default navigation is placed in a table. Above the navigation is another cell in the table holding the image that fits under the header (comprised of the woman's hands and the lower part of the computer -- see below). The table and the left panel are the same width as the image in the top cell of the table. The navigation is aligned using another table cell (column) to the left of it. I could also have used some CSS to do this. The table looks something like this (I have added a border so you can see it better and left out the background image). The non-breaking space ( ) holds the left column open. The width of that column is set to 17 pixels.

&nbsp;	<<LINKS_MENU>>

The table also has a background image (see below). As links are added to the navigation, the table stretches down and the background image repeats nicely.

The left panel also has a background image (see below).

The "Repeating Images" Problem Repeating images cause some ugly problems and look very unprofessional. A little CSS can take care of these issues quite simply. If you're not confident with CSS, spend time checking the height and width of your panels, then try removing text or images that you have added. The answer will usually be that something you have added is pushing the panel open further than the height or width of the background image, causing it to repeat.

In case the navigation pushes the table wider than the background images, we can set up some CSS that tells the images to repeat only down rather than down and across which is the default.

<style>

.repeat
{
background-repeat: repeat-y;
}

td.XSP_LEFT_PANEL_SPC
{
background-repeat: repeat-y;
}

</style>

We then need to add the class .repeat to the <table> tag, like this:

The page footer has a background colour to match the background colour for the Web page, which helps disguise the recognizable page footer that XSite Pro creates.

The right panel is 20 pixels wide and is used only to give a little white space to the right of the text. The main panel footer is also set to 20 pixels and used for the same purpose. The reason for using these panels as spacers like this is because the left hand image includes a large white strip and adding padding to the main panel would make this gap even wider. Therefore our main panel padding is set to zero. We are compensating for this with the padding in the right panel and main panel footer. (I could have used CSS to accomplish this, but I figured I'd try to use XsitePro's built-in features as much as I could.)

The Copyright statement is snugged up close to the navigation links with a little CSS.

<style>
.copyright {margin-top: 5px;}
</style>