X-Cart forums

[steveparks]

here is an extract of my menu.tpl

<DIV style="padding-left: 5px;">
{php}
$menuborder = new PhpMyBorder();
echo $menuborder -> begin("180","ffffff","ffffff"); //(width, fillcolor, edgecolor)
{/php}
<TABLE border="0" cellpadding="0" cellspacing="0" width="100%">

.........
........

</TABLE>
{php}
echo $menuborder -> end();
{/php}
</DIV>

you do a very similar thing for the dialog.tpl:

{* $Id: dialog.tpl,v 1.19 2004/06/24 09:53:29 max Exp $ *}
{if $printable ne ''}
{include file="dialog_printable.tpl"}
{else}
{php}
$pmbdialogborder = new PhpMyBorder();
echo $pmbdialogborder -> begin("590","FFFFFF","FFFFFF"); //  (width, fillcolor, edgecolor)
{/php}
<TABLE border="0" cellpadding="0" cellspacing="0" {$extra}>

......
......

</TABLE>
{php}
echo $pmbdialogborder -> end();
{/php}
{/if}

remember to include the class file somewhere where it will get called - i just called it from the end of func.php.


cheers
steve

[MythNReality]

I know the following code works with the FF but not the IE, if you don't mind this, you could use it where ever you like with the skin1.css file:

-moz-border-radius: 25px;

[cotc2001]

Hmm doesnt seem to want to work for me Steve
I end up with a blank central column

I'll open a ticket with x-cart to see if they can do it, might as well use some of my support points up.

[steveparks]

Have you included a call to the class file in your func.php? You also need to upload the class file to your server.

other than that it should all work

cheers
steve

[cotc2001]

Yeah i got it working if i had the include within my menutable.tpl (which is the tpl that i use for the old style surrounds, as soon as i try and put it into func.php though the whole site breaks

[stevep]

tried this and my site changed to a three column from a two ?

[liquorsruz]

<note>
Sorry to revive a thread that was last used in MArch, however most forums like you to re-use threads whose titles apply provided they are not ancient. If that is not the case here and a new topic is preferred, please tell me.
</end note>

I have looked at several round corner borders how-to's and have tried a few. The one that has brought me closest to a real rounded border is one named "Snazzy Borders" by Stu Nicholls at: http://www.cssplay.co.uk/boxes/snazzy.html

The css and code are in his source file. I will post them here for reference:

styles to add (I put them in skin1.css)

#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;}
#xsnazzy h1 {font-size:2.5em; color:#fff;}
#xsnazzy h2 {font-size:2em;color:#06a; border:0;}
#xsnazzy p {padding-bottom:0.5em;}
#xsnazzy h2 {padding-top:0.5em;}
#xsnazzy {background: transparent; margin:1em;}

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#ffffff; border-left:1px solid #c0c0c0; border-right:1px solid #c0c0c0;}
.xb1 {margin:0 5px; background:#08c;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}

.xboxcontent {display:block; background:#ffffff; border:0 solid #08c; border-width:0 1px;}

The code to add the borders:

<div id="xsnazzy">
<b class="xtop"><b class="xb1">[/b]<b class="xb2">[/b]<b class="xb3">[/b]<b class="xb4">[/b][/b]
<div class="xboxcontent">


content here</p>
</div>
<b class="xbottom"><b class="xb4">[/b]<b class="xb3">[/b]<b class="xb2">[/b]<b class="xb1">[/b][/b]
</div>

I am trying to add borders only around specific menus (which means I can't just use the menu.tpl file). So am trying to put them around individual menus, plus items like the search box, specials, etc.

Regardless of what I've tried, the top looks fine, however the border on the bottom is awful. The left and right borders hang down longer than the corners. I have tried changing all the heights and margins in the css to no avail.

The search box has the problems with the side borders being longer than where the bottom corners and border are.

However the side menu boxes have that issue, plus the right margin being way out to the right. I have tried adding a specific size to every combination in the skin1.css, main.tpl, and search.tpl. Nothing will change it.

I took a print screen to show what I am talking about:

http://www.dmozeditors.com/corners.jpg

the code I am using is:

<div id="xsnazzy" align="left" width="160">

<b class="xtop"><b class="xb1">[/b]<b class="xb2">[/b]<b class="xb3">[/b]<b class="xb4">[/b][/b]
<div class="xboxcontent">	
{ include file="help.tpl" }
<b class="xbottom"><b class="xb4">[/b]<b class="xb3">[/b]<b class="xb2">[/b]<b class="xb1">[/b]
[/b]
</div></div>

I'm sorry for the length of the message, however I thought the more facts I include, the better someone may be able to see what I am doing wrong.

Any ideas?

Thank You,

Alex

[PhilJ]

[spam] I've added a free rounded corners mod to my site, which you might like to try.

[B00MER]

Personally I like this guys approach:

http://www.schillmania.com/projects/dialog/

And used a similar method on a recent client site:

http://www.bahamablue.com/
(yes I know it doesn't look well in FF, yet!)

[Qdox]

I tried to use this code on my web site, and basically does what I need. There are lot of implementation on the web but none get the solution I'm looking. My issue is with IE7 where I'm getting the box painted like the picture below. Any Ideas??

Originally Posted by Zaja

Try this:

1. open skin/menu.tpl and replace existing content with following code:

<div id="angleMenu">
<b class="rtop"><b class="r1">[/b]<b class="r2">[/b]<b class="r3">[/b]<b class="r4">[/b][/b]
<h1>{$menu_title}</h1>
 
 
{$menu_content}</p>
<b class="rbottom"><b class="r4">[/b]<b class="r3">[/b]<b class="r2">[/b]<b class="r1">[/b][/b]
</div>

1. open skin/skin1.css and add this code:

h1,h2,p {margin: 0 8px}
h1 {font-size:13px; color:#B70000}
p {padding-bottom:1em}
#angleMenu {background:#FFE595}
b.rtop, b.rbottom {display:block; background:#FFF6DB}
b.rtop b, b.rbottom b {display:block; height:1px; overflow:hidden; background:#FFE595}
b.r1 {margin: 0 5px}
b.r2 {margin: 0 3px}
b.r3 {margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4 {margin: 0 1px; height: 2px}