Rounded Corners - Almost there but not quite

wayfarer · #1 01-29-2005, 03:45 PM

Hi all,

I'm trying to round the bottom corners of my dialog.tpl dialog box and am almost there. I am trying to insert a 3 column table with corner graphics on either side. So far I have my left graphic where I want it but the right corner image is half way along the box. I am assuming that there is a two column structure somewhere in behind this and that the image is conforming to the edge of the first column, but I just can't seem to get the code right to deal with it (I am used to working in WYSIWYG and am a little rusty on hard coding in notetab).

Here's my dialog.tpl (working with 4.0.4, standard theme):

Code:

{* $Id: dialog.tpl,v 1.19 2004/06/24 09:53:29 max Exp $ *} 
{if $printable ne ''} 
{include file="dialog_printable.tpl"} 
{else} 
<TABLE border="0" cellpadding="0" cellspacing="0" {$extra}> 
<TR> 
<TD style= "border-right: 1px solid #9C9EAA; border-bottom: 1px solid #9C9EAA;" height="23" class="DialogTitle" background="{$ImagesDir}/dialog_bg_n.gif" valign="middle">{$title}</TD> 
</TR> 
<TR><TD style= "border-right: 1px solid #9C9EAA; border-left: 1px solid #9C9EAA;" class="DialogBorder"><TABLE border="0" cellpadding="10" cellspacing="0" width="100%"> 
<TR><TD class="DialogBox">{$content} 
 
</TD></TR> 
</TABLE><tr> 
<td colspan="2"> 
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="white"> 
<tr> 
<td width="9"> 
<div align="left"> 
[img]{$ImagesDir}/smalldialogcnr_left.gif[/img]</div> 
</td> 
<td></td> 
<td width="9"> 
<div align="right"> 
[img]{$ImagesDir}/smalldialogcnr_right.gif[/img]</div> 
</td> 
</tr> 
</table> 
</td> 
</tr> 
</td><TD></TR> 
</TABLE> 
{/if}

And here's an example of the result:

http://www.wayfarer.co.nz/forumexamples/images/cornersdemo.gif

What should I change to get that pesky right hand corner graphic over to the right where it belongs?

balinor · #2 01-29-2005, 06:01 PM

You have an empty cell between the two corner images:

<td></td>

Put a spacer gif in there or at least define the cell width and add a

That should fix the problem.

Also, FYI you can paste a template into Dreamweaver or your favorite WYSIWYG editor to help you view some of the more complex nested tables. It can't read Smarty, but it can at least give you an idea of what cell is what

wayfarer · #3 01-29-2005, 06:38 PM

Great thanks! I've got it sussed now. I didn't think I could give the central cell a value, because I want it to expand and contract with the browser. But I gave it a value of 100% and it did the trick!

eaglemobiles · #4 01-30-2005, 06:20 AM

I want the same style could you please post your code so i can put in my store please.

Thanks

balinor · #5 01-30-2005, 06:29 AM

He did, it is right there at the top of the thread

eaglemobiles · #6 01-30-2005, 06:31 AM

But i dont know how make that changes you told him, Many thanks for reply

Nice one

balinor · #7 01-30-2005, 06:34 AM

Replace:

<td></td>

with

<td width="100%></td>

You are also going to need to create your own rounded corner .gif images.

eaglemobiles · #8 01-30-2005, 06:52 AM

Here is my code but I dont know how to make is round corner,

{* $Id: dialog.tpl,v 1.19 2004/06/24 09:53:29 max Exp $ *}
{if $printable ne ''}
{include file="dialog_printable.tpl"}
{else}
<TABLE border="0" cellpadding="0" cellspacing="0" {$extra}>
<TR>
<TD height="15" class="DialogTitle" background="{$ImagesDir}/dialog_bg_n.gif" valign="bottom">{$title}</TD>
</TR>
<TR><TD class="DialogBorder"><TABLE border="0" cellpadding="10" cellspacing="1" width="100%">
<TR><TD class="DialogBox">{$content}

</TD></TR>
</TABLE></TD></TR>
</TABLE>
{/if}

balinor · #9 01-30-2005, 06:56 AM

I'm afraid you are not going to just be able to copy his code, you are going to need to create your own .gif images for the rounded corners. If you don't know how to do that, you can do a search on the web and find quite a few examples/tutorials.

eaglemobiles · #10 01-30-2005, 06:59 AM

Ok thanks, I will, to sort it out as i am new to this coding stuff.

Thanks for your time