Here is my code for rounded edges.
If you need more you can read "extra" below.
Code:
<TABLE width=100% border=0 align="center" cellPadding=0 cellSpacing=0 bgColor=#e180d7>
<TBODY>
<TR>
<TD vAlign=top align=left width=4 height=4>[img]{$ImagesDir}/m1.gif[/img]</TD>
<TD>[img]{$ImagesDir}/1x1.gif[/img]</TD>
<TD vAlign=top align=right>[img]{$ImagesDir}/m2.gif[/img]</TD>
</TR>
<TR>
<TD vAlign=top colSpan=3><table width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td><div align="center" class="sub2">{$menu_title}
</div>
<div align="left">{$menu_content}
</div></td>
</tr>
</table></TD>
<TR>
<TD vAlign=bottom align=left width=4 height=4>[img]{$ImagesDir}/m3.gif[/img]</TD>
<TD>[img]{$ImagesDir}/1x1.gif[/img]</TD>
<TD vAlign=bottom align=right>[img]{$ImagesDir}/m4.gif[/img]</TD>
</TR>
</TBODY>
</TABLE>
-------------------------------------------------
EXTRA:
I'm no design whizz or anything like that but here is my code for rounded edges on a 2 columed site with 100% height.
It will look like this
http://www.urbanspirit.co.uk/store/pages.php?pageid=4
The corner gifs are named c1-c4 etc and any other gifs are just 1x1 spacers.
The main 2 colums for home.tpl
This includes the rounded edges for the main content section but not the for the menus which are below.
Code:
<table width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="100%" rowspan="3" valign="top" bgcolor="#FFB1F7"><table width="100%" height="100%" border=0 cellpadding="10" cellspacing="0">
<tr>
<td height="100%"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="170" valign="top"><TABLE width=100% height="100%" border=0 cellPadding=0 cellSpacing=0>
<TR>
<TD colSpan=3 vAlign=top>{ include file="customer/categories.tpl" } { include file="customer/menu_cart.tpl" } { include file="modules/Bestsellers/menu_bestsellers.tpl" } {include file="help.tpl"} {if $main ne "catalog" or $current_category.category ne ""} {if $active_modules.Manufacturers ne "" and $config.Modules.manufacturers_menu eq "Y"} { include file="modules/Manufacturers/menu_manufacturers.tpl" } {/if} {include file="customer/special.tpl"} {if $active_modules.Interneka ne ""} { include file="modules/Interneka/menu_interneka.tpl" } {/if} {/if} </TD>
<TR>
<TD width=4 height=4 align=left vAlign=bottom bgcolor="#e180d7">[img]{$ImagesDir}/XY.gif[/img]</TD>
<TD bgcolor="#e180d7">[img]1x1.gif[/img]</TD>
<TD height="100%" align=right vAlign=bottom bgcolor="#e180d7">[img]{$ImagesDir}/XZ.gif[/img]</TD>
</TR>
</TABLE></td>
<td width="10">[img]{$ImagesDir}/spacer.gif[/img]</td>
<td valign="top"><TABLE width=100% height="100%" border=0 cellPadding=0 cellSpacing=0 class="back">
<TBODY>
<TR>
<TD vAlign=top align=left width=4 height=4>[img]{$ImagesDir}/c1.gif[/img]</TD>
<TD>[img]{$ImagesDir}/1x1.gif[/img]</TD>
<TD vAlign=top align=right>[img]{$ImagesDir}/c2.gif[/img]</TD>
</TR>
<TR>
<TD vAlign=top colSpan=3><table width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td>{if $main ne "catalog" or $current_category.category ne ""}{include file="location.tpl"}{/if}
{if $main ne "catalog" or $current_category.category ne ""}{/if} {include file="dialog_message.tpl"} {if $active_modules.Special_Offers ne ""} {include file="modules/Special_Offers/customer/new_offers_message.tpl"} {/if} {include file="customer/home_main.tpl"}</td>
</tr>
</table></TD>
<TR></TR>
<TR>
<TD vAlign=bottom align=left width=4 height=4>[img]{$ImagesDir}/c3.gif[/img]</TD>
<TD>[img]{$ImagesDir}/1x1.gif[/img]</TD>
<TD vAlign=bottom align=right>[img]{$ImagesDir}/c4.gif[/img]</TD>
</TR>
</TBODY>
</TABLE></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr> </tr>
<tr> </tr>
</table>
The two gifs named XY and XZ are the bottom half of the last menu box(help).
The last menu box needs to be split in half because if you 100% height it you will get overscroll in mozilla.
This was the only work around i could find.
The top half of the last menu(help) is just a new menu.tpl with the top half code.
I called mine menu2.tpl and called that up in the the last menu (help.tpl)
Menu2.tpl code
Code:
<table width="100%" border=0 cellpadding="0" cellspacing="0">
<tr>
<td height="100%" valign="top"><TABLE width=100% border=0 cellPadding=0 cellSpacing=0 bgcolor="#E180D7">
<TBODY>
<TR>
<TD vAlign=top align=left width=4 height=4>[img]{$ImagesDir}/m1.gif[/img]</TD>
<TD>[img]1x1.gif[/img]</TD>
<TD vAlign=top align=right>[img]{$ImagesDir}/m2.gif[/img]</TD>
</TR>
<TR>
<TD height="100%" colSpan=3 vAlign=top><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="10">
<tr>
<td><div align="center" class="sub2">[img]{$ImagesDir}/spacer.gif[/img]{$menu_title}
</div>
<div align="left">{$menu_content}
</div></td>
</tr>
</table></TD>
</TBODY>
</TABLE></td>
</tr>
</table>
The last piece of code if for the bog standard menu boxes that don't need stretching (everyone but the last)
I just made another new menu.tpl (menu3.tpl) and called that up for all the menus that need round edges.
Code:
<TABLE width=100% border=0 align="center" cellPadding=0 cellSpacing=0 bgColor=#e180d7>
<TBODY>
<TR>
<TD vAlign=top align=left width=4 height=4>[img]{$ImagesDir}/m1.gif[/img]</TD>
<TD>[img]{$ImagesDir}/1x1.gif[/img]</TD>
<TD vAlign=top align=right>[img]{$ImagesDir}/m2.gif[/img]</TD>
</TR>
<TR>
<TD vAlign=top colSpan=3><table width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td><div align="center">[img]{$ImagesDir}/spacer.gif[/img]{$menu_title}
</div>
<div align="left">{$menu_content}
</div></td>
</tr>
</table></TD>
<TR>
<TD vAlign=bottom align=left width=4 height=4>[img]{$ImagesDir}/m3.gif[/img]</TD>
<TD>[img]{$ImagesDir}/1x1.gif[/img]</TD>
<TD vAlign=bottom align=right>[img]{$ImagesDir}/m4.gif[/img]</TD>
</TR>
</TBODY>
</TABLE>
If anyone has an easier solution please post it
FAQ
10-19-2005, 05:45 PM
