Ok, here's what you need to do. Basically you need to insert two new table columns to the main layout, one on each side of the 'main' table cell. You are going to be editing rectangle_top.tpl and rectangle_bottom.tpl, both of which are in your root skin1/ directory. Make a backup of these files first in case this doesn't work!
First, in rectangle_top.tpl, add a new cell by replacing this:
Code:
<TD valign="top"><DIV style="position: absolute;" id="div_null"></DIV>
with this:
Code:
<td class="left" width="x">[img]{$ImagesDir}/spacer.gif[/img]</td>
<TD valign="top"><DIV style="position: absolute;" id="div_null"></DIV>
Replace 'x' with the width you want for the border.
Next, open up rectangle_bottom.tpl and add a new right hand cell by replacing this:
Code:
</TD>
</TR>
{if $config.Adaptives.browser eq 'MSIE' || $config.Adaptives.browser eq ''}
<TR><TD height="100%">[img]{$ImagesDir}/spacer.gif[/img]</TD></TR>
{else}
<TR><TD>[img]{$ImagesDir}/spacer.gif[/img]</TD></TR>
{/if}
<TR>
<TD>
{if $printable ne ''}
<HR size="1">
{/if}
{ include file="bottom.tpl" }
</TD></TR>
</TABLE>
with this:
Code:
<table width="100%" cellpadding="0" cellspacing="0"><tr><td align="center">{ include file="bottom.tpl" }
</TD></TR>
</TABLE>
</TD>
<td class="right"><image src="{$ImagesDir}/spacer.gif" width="x"></td>
</TR>
</TABLE>
Again, replace "x" with the width you want for the border.
Now open up skin1.css and paste the following code in at the bottom:
Code:
.left {background: url(images/left-border.gif); background-repeat: repeat-y;}
.right {background: url(images/right-border.gif); background-repeat: repeat-y;}
You'll need to name the images you want to use for the borders left-border.gif and right-border.gif (or just replace the code above with teh image names you want) and upload them to the skin1/images folder. They will tile vertically using the code above. If you don't want them to tile, just remove the background-repeat: y part.
Let me know if this works the way you want it to
