border around page
 

Hello everyone,
First off lemme say that I appreciate all the people that are on here helping X-Cart newbies like me out. You all are the best!!!

So, I've looked around the forums and couldn't find out how to do this. I want to put a image border around the whole website (on the sides). I know how to do this in Dreamweaver, but could not find which .tpl to edit to put a table around the table that holds all the content. I added a 780 wide table around the table in customer/home.tpl, which is 770 wide, but that just messed everything up.

Thanks for any help!
-A

Start wrapping in rectangle_top.tpl and close in rectangle_bottom.tpl.

You are so awesome! Thank you!!!

Hi,

what do you mean by "start wrapping" and "close in"? I found both .tpl files, but don't know what i should add to the code to create the borders.

Thanks!
Rebecca
xcart version 4 gold

Rectangle_top.tpl contains a 'wrapper table'. Just add a border style to that table using CSS.

Thanks Balinor for the fast reply!

What i'm trying to do is just put a 1.5" border down the left side and the right side of the page to "frame" the content of the webpage. When i edit the wrapper table using the "border" and "bordercolor" code in the table, it ends up creating a box all the way around the content of the webpage. How do i only have it on the left/right side instead of on top and bottom as well?

Does that require two "wrapper" tables - one with three columns, with the left and right columns having the background color set the way i want it and the middle column being the original wrapper table?

Thanks,
Rebecca
x cart gold 4.0

No, you just need to use css, not the html 'border'. Copy this into your skin1.css file:

.main-border {border-left: 10px solid #000000; border-right: 10px solid #000000;}

Substitute the correct hex color for the #000000 (which is black) and adjust the width in pixels to whatever you want.

Now add this to the table tag in rectangle_top.tpl:

class="main-border"

Thanks Balinor!

That worked perfectly - i really appreciate it.

Best regards,
Rebecca
xcart gold 4.0

using images instead of background color?
 

Hi Padraic,

thanks for the help before - the border looks a little plain so i wanted to put in an image and was wondering how i use an image file in the border tag instead of just a color?

Thanks,
Rebecca

You can't use an image in a border...you'll have to use table cells and set a background image for those instead.

Hmm. That leads to three questions:

1) what file do i create the table in, and what part of the code do i place that in (i.e, at the beginning around the rest of the code, with ,</table> at the very end)?
2) where do i store the image file that the table cell will reference?
3) is there anything else i need to know for that? i've done tables before but not in conjunction with css or smarty

Thanks,
Rebecca

Ok, I had a look at your site, and I'm not entirely sure what you are trying to achieve. Are you looking to set a 'background image' for the far background and have your site appear in a fixed width window? Or are you looking to have some sort of custom drop-shadow border around the edges of your 'window'?

What i'm looking to do is use an image as a background in the left and right border columns instead of just that default light blue. (and yes, keep the middle "content" area as a fixed width) Is that possible?

Thanks,
Rebecca

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:


with this:


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:


with this:


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:


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

Worked like a charm. Thanks so much!

Cheers,
Rebecca

Re: border around page
 

Hi Padraic,
This is exactly the mod I've been looking for. I have a heavily modded site though and both rectangle tpls have been hacked. Is there any chance you'd point me to the most likely spots to add the modded code so I may give it a try?


{* $Id: rectangle_top.tpl,v 1.13.2.4 2005/02/21 08:58:49 max Exp $ *}
{ include file="common_js.tpl"}
{*if $config.Adaptives.isJS eq '' && $adaptives_action ne ''}
<FORM action="{$adaptives_action}" method="post" name="adaptiveform">
<INPUT type="hidden" name="{$XCARTSESSNAME}" value="{$XCARTSESSID}">
<INPUT type="hidden" name="send_isJS" value="Y">
<INPUT type="hidden" name="send_browser" id="send_browser" value="">
</FORM>
<SCRIPT type="text/javascript" language="JavaScript 1.2">
{include file="browser_identificator_js.tpl"}
document.getElementById('send_browser').value = browser_identificator();
document.adaptiveform.submit();
</SCRIPT>
{/if*}
{if $usertype eq "C"}
<TABLE align="center" border="0" cellpadding="0" cellspacing="0" width="{$width|default:"830"}" height="100%">
{else}
<TABLE align="center" border="0" cellpadding="0" cellspacing="0" width="{$width|default:"100%"}" height="100%">
{/if}
<TR>
<TD valign="top">




{* $Id: rectangle_bottom.tpl,v 1.8 2004/06/07 11:19:29 max Exp $ *}
</TD>
</TR>
{if $config.Adaptives.browser eq 'MSIE' || $config.Adaptives.browser eq ''}
<TR><TD height="100%"><IMG src="{$ImagesDir}/spacer.gif" width="1" height="1"></TD></TR>
{else}
<TR><TD><IMG src="{$ImagesDir}/spacer.gif" width="1" height="1"></TD></TR>
{/if}
<TR>
<TD>
{if $printable ne ''}
<HR size="1">
{/if}
{ include file="bottom.tpl" }
</TD></TR>
</TABLE>


Thanks in advance.