How To Add Borders Around Your Site

UPDATE: The tips and tricks on this are to do with XSite Pro Version 1 only. Click here for news on XSite Pro Version 2.

Start by going to the "Other" tab and selecting the "Scripts" button.

Next, copy and paste this code into the lowest box:

Before You Go On: Work Out Your Site's Width

Next, you'll need to replace the text "785px" with whatever the width of your site happens to be. To work this out, simply add the widths of your Main Panel, Left Panel and Right Panel together. For example, if you had a Main Panel of 600 pixels, a Left Panel of 100 pixels, and a Right Panel also of 100 pixels, your overall width would be 800 pixels. In this example, you would replace "785px" in the code with "800px".

Note: I recommend you use 785 pixels for the width of your site (Main Panel + Left Panel + Right Panel). This is because sites with wider dimensions may not fit on old computer monitors.

How To Change The Border Color

To change the border color, replace the word "black" and replace it with your preferred border color. You can use any of the html-safe color names. These are:

aqua black blue fuchsia

gray green lime maroon

navy olive purple red

silver teal white  yellow

Otherwise, you can replace the word "black" in the code above with the actual HTML color number. For example, you might write:

<style>
TABLE.XSP_OUTLINE
{
HEIGHT: 100%; WIDTH: 785px; border: 1px solid #FF4500;
}
</style>

which would give you an orange-red border of 1px thickness.

How To Change The Border Style

The next thing you can do is change the border style. To change the border style, replace the word "solid" every time it appears in the code and replace it with the word "dashed", "dotted", or "double". Here's an example of each border style:

For example, you might write:

<style>
TABLE.XSP_OUTLINE
{
HEIGHT: 100%; WIDTH: 785px; border: 1px dotted black;
}
</style>

which would give you a dotted border of 1px thickness.

How To Change The Border Width

Finally, you can change the border width. To do this, replace the text "1px" with the text "2px" (which will create a 2 pixel wide border). Personally I prefer "1px" as I think it looks the most professional.

Some folks like to create a very thick border (8-10px wide) around their whole site for results that can be quite effective.