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).

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:

<TABLE class=repeat width=160 cellSpacing=0 cellPadding=0 background=images/left.jpg border=0>

The class td.XSP_LEFT_PANEL_SPC is already in the default XSite Pro HTML, so we don't have to do anything further with that.

The page footer has a dark grey background colour to match the background colour for the Web page.

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.)