X-Cart forums

[enchanted1]

Originally Posted by balinor

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

[balinor]

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'?

[enchanted1]

Originally Posted by balinor

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

[balinor]

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:

<TD valign="top"><DIV style="position: absolute;" id="div_null"></DIV>

with this:

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

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

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

.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

[enchanted1]

Originally Posted by balinor

Ok, here's what you need to do.
...

Let me know if this works the way you want it to

Worked like a charm. Thanks so much!

Cheers,
Rebecca

[funkymonkey]

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.