How to Create Unique XSitePro Templates!

(By Disguising XSitePro's Footprint!)

1. Compuaid Computer Services - Sample XSitePro Template #1
2. Compuaid Computer Services - Sample XSitePro Template #2
3. Citywide Towing Co. - Sample XSitePro Template #3

1. Compuaid Computer Services - Sample XSitePro Template #1

View working version of this XSitePro template here...

This XSite Pro template shows a nifty way to create different "headers" for each page in your XSite Pro Web site. While XSite Pro doesn't allow you to use different headers at the top of each page, you can create a narrow top template with no photos in it and then create a table at the top of each page and place a photo and the page title in the table. This table then blends into the main header and makes it appear as though each page has a unique header (you can think of it as a sub-header).

If I had wanted to extend this illusion even further, I could have put an image or text in the top part of the left hand panel and started the navigation below that. If I had chosen to do this, I probably would have made the elements that make up the page header (page title) narrower so the navigation wouldn't be pushed down too far.

This design lends itself to top navigation links, so if you don't mind losing XSitePro's automated navigation, you could create a top navigation bar under the main header and remove both right and left panels.

The tricky part was dealing with the small "gutter" that XSitePro leaves around the table even though the table's border and cellspacing are set to zero and the main panel's padding is set to zero. I dealt with this by incorporating the gutter into the design of the site. I added white borders on the left panel to match the gutter on the main panel. Update: I have since resolved the problem with the 1px gutter. I explain the solution here. (Note: this is an issue no one else had been able to resolve!)

And I also added a white strip to the top and sides of my main header graphic when I created it in Photoshop. To complement the site colours and to set off the white gutter, I added a thick dark blue border to the outside of the page itself.

Note: I used JavaScript to pre-load the images for the sub-headers so they load immediately as you click to each new page.

The navigation in the working version has a rollover effect. I used CSS to accomplish this and for other effects, too. Here is the CSS that I used:

<style type="text/css">

TABLE.XSP_OUTLINE
{
HEIGHT: 100%;
WIDTH: 750px;
border: 10px solid #0a1771;
}

td.XSP_LEFT_PANEL_SPC
{
border-top: solid 2px white;
border-left: solid 2px white;
border-right: solid 0px black;
}

td.XSP_LEFT_PANEL
{
border-left: solid 2px white;
border-right: solid 0px black;
border-bottom: solid 2px white;
}

TD.XSP_FOOTER_PANEL
{
border-left: 2px solid white;
border-bottom: 2px solid white;
border-right: 2px solid white;
border-top: 2px solid white;
}

A.NAVBAR_LEFT:hover {background-color: #adb6f5;}

.nav {border: 1px solid #0a1771;
padding: 10px;}

.special {font-size: 14pt; color: #0a1771; margin-left: 10px;}

.copyright {margin-top: 5px;}

</style>

2. Compuaid Computer Services - Sample XSitePro Template #2

View working copy of this XSitePro template here...

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 by putting another table cell (column) to the left of the navigation. 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 (&nbsp;) 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 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>

3. Citywide Towing Company - Sample XSitePro Template #3

View working copy of this XSitePro template here...

I like to try to recreate sites in XSitePro that were originally built in Dreamweaver or other HTML editors. This site was inspired by one created by a local Web design company. Because of its simplicity, I knew I could make a similar site in XSite Pro. Here's a link to the original site: www.pioneerinvestcanada.com. I love its clean, airy, professional design.

This template avoids the usual XSite Pro footprint by the following techniques:

• No right panel
• A header with a lot of white space
• Matching blue bars at the top and bottom of the page. Note: To get the top bar effect I added a table with two rows to Page Layout > Header Panel > Designer. The top row is a solid blue colour, the bottom row holds the header image. The matching bar at the bottom is done using the Page Footer.
• No menu in either of the footers
• Left navigation set in a blue table instead of a coloured panel
• A complementary background image.

Unlike the original designer, I added some breathing space (20px) at the top and bottom of the page. FYI: I created my own background image because it's illegal to copy images from other people's Web sites.