X-Cart forums - Rounded Corners - Almost there but not quite

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - Rounded Corners - Almost there but not quite (https://forum.x-cart.com/showthread.php?t=11818)

Rounded Corners - Almost there but not quite

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?

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

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

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

Thanks

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

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

Nice one

Replace:

<td></td>

with

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

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

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}

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.

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

Thanks for your time

A couple of tips for you if you really want to become adept at editing X-Cart templates:

1. Learn HTML. Not just a WYSIWYG editor, but the real code of HTML. It is a very straightforward programming language, and you can pick it up pretty quickly.

2. Learn CSS. All of the styles in X-Cart (colors, fonts, etc) are controlled by CSS.

The O'Reilly books are great if you are looking for a reference. Good luck!

Thanks for your help, i will be grateful if you help me out, i have made some changes to login manu, now i want to bring the forgot password text near to join go but i cant do it, and I want to remove the go button from join i want it same as forgot password.

Thanks

any difference for 3.5?

Closing the bottom & rounding the corners

Thanks eaglemobiles for doing the hard work.

The code

Code:

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

makes the title bar come out double.

Plus the style should go in the skin1.css file.

For those who want to enclose the bottom with a continuous line. Use a spacer.gif of the same color, like balinor suggested, and aligned it to the bottom at 100% width.

Here is the complete code for dialog.tpl.

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 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="0" width="100%">

<TR><TD class="DialogBox">{$content}



</TD></TR>

</TABLE><tr>

<td colspan="2">

<table width="100%" cellspacing="0" cellpadding="0" bgcolor="white">

<tr>

<td width="9">

<div align="left">



[img]{$ImagesDir}/smalldialogcnr_left.gif[/img]</div>

</td>

<td width="100%" valign="bottom">



[img]{$ImagesDir}/greyspacer.gif[/img]</td>

<td width="9">

<div align="right">



[img]{$ImagesDir}/smalldialogcnr_right.gif[/img]</div>

</td>

</tr>

</table>

</td>

</tr>

</td><TD></TR>

</TABLE>

{/if}

Next open up skin1.css file.and find .DialogBorder
And add this or whatever color and size you need

Code:

border-right: 1px solid #9C9EAA; border-left: 1px solid #9C9EAA;

Happy Coding

[spam] Just added a free rounded corners mod to my site if anyone's interested.

edit: Sorry I removed it a while ago, as some people had problems with it.