How To Add A Border To Each Panel

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.

This article will cover:

• How to add a border to just the Header Panel
• How to add a border to just the Main Panel
• How to add a border to all Panels

How To Add A Border To Just The Header Panel

Start by going to the the "Other" tab and select the "Scripts" button:

Copy and paste this script into the bottom box.

<style> td.XSP_HEADER_PANEL { border-top: solid 1px black; border-bottom: solid 1px black;  border-left: solid 1px black; border-right: solid 1px black; } </style>

It should look like this:

And the result will look like this:

How To Add A Border To Just The Main Panel

Start by going to the the "Other" tab and select the "Scripts" button:

Copy and paste this script into the bottom box.

<style> td.XSP_CENTER_PANEL { border-top: solid 1px black; border-bottom: solid 1px black;  border-left: solid 1px black; border-right: solid 1px black; } </style>

The result will look like this:

How To Add A Border To All Panels

Start by going to the the "Other" tab and select the "Scripts" button:

Copy and paste this script into the bottom box:

<style> td.XSP_HEADER_PANEL { border-top: solid 1px black; border-left: solid 1px black; border-right: solid 1px black; } td.XSP_CENTER_PANEL { border-top: solid 1px black; border-bottom: solid 1px black; } td.XSP_LEFT_PANEL { border-left: solid 1px black; border-bottom: solid 1px black; border-right: solid 1px black; } td.XSP_LEFT_PANEL_SPC { border-top: solid 1px black; border-left: solid 1px black; border-right: solid 1px black; } td.XSP_RIGHT_PANEL_SPC { border-top: solid 1px black; border-right: solid 1px black; border-left: solid 1px black; } td.XSP_RIGHT_PANEL { border-left: solid 1px black; border-right: solid 1px black; border-bottom: solid 1px black; } td.XSP_FOOTER_PANEL { border-left: solid 1px black; border-right: solid 1px black; border-bottom: solid 1px black; } </style>

The result will look like this:

Tip 1

Note that there are some borders in the code that appear to be missing. This is to prevent "doubling up" on borders. For example, if you had a Header Panel with a bottom border and a Main Panel with a top border, you would end up with a double border where these two borders meet, like this: (double border highlighted in red)

You can end up with an inadvertent double border (shown here with a red highlight) if you add a border to the bottom of the Header Panel and a border to the top of the Main Panel.

However, if you remove the bottom border from the Header Panel (or the top border from the Main Panel), you end up with all borders appearing correctly.

Tip 2

Also please note that XSite Pro uses "spacer panels" for SEO purposes. This means that the Left Panel is actually made up of two panels, and the same is true for the Right Panel. The The Left Panel SPC (Spacer) is a one-pixel high panel that exists solely so that the search engines will read your Main Panel (which is what your page is truly about) before they read your Left Panel (which is usually about your site in general as it contains your Navigation Menu). So when you are designing borders for your Left Panel, or Right Panel, you will need to keep this in mind.

For details on how to change the border's thickness, style and color, see How To Add Borders Around Your Site.

This article is based on tips posted by Hadrian and Jason from the XSite Pro Forum.

Click here to learn more about XSite Pro and what it can do for your business.