X-Cart forums - Nifty Corners?

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

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

- - Nifty Corners? (https://forum.x-cart.com/showthread.php?t=17488)

I was wondering a) if your can use this code http://pro.html.it/esempio/nifty/) to get round boxes in x-cart because I think this would be a much more flexable option than photoshop tables. I would also like to know where I would put it to get some round edged colour :P behind the caegories boxes?

Thank i hope for a reply

Chris

X-CART Gold the 4 one? new one anyway! :wink:

how I add nifty corner it to menu categories, bestseller etc?
i try modify menu.tpl dont work :(

Try this:

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

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:

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}

Zaja, you forgot to mention that you need to add the same code in skin/skin1.css to /skin1_admin.css .

Not doing so will break (make the boxes disapear) around the admin menus. :wink:

add to /skin1_admin.css

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}

it looks pretty good...

if you would like round corners without using images or tables..

http://www.phpmyborder.com

Neat. This is exactly what Cart-Lab's CSS skin needs.

nice really thanks..

just looking at the phpmyborder page.

so where and how would i place this code then

Code:

<?

require_once("phpMyBorder.class.php"); 

$pmb = new PhpMyBorder();

?>



<=$pmb -> begin("260px","DDDDFF","78AAFF") ?>



-- YOUR CONTENT GOES HERE --

        

<=$pmb -> end() ?>

im looking at changing the rounded border on products_t.tpl

so the code that i would need to put in the bith where it says your content goes here would be

Code:

<TABLE cellpadding="0" cellspacing="0" border="0" ><TR><TD align="center">

{*{include file="product_thumbnail.tpl" productid=$products[product].productid image_x=$config.Appearance.thumbnail_width product=$products[product].product tmbn_url=$products[product].tmbn_url}




*}

{*** Cart-Lab.com mod ***}

{if $product.image_type ne "application/x-shockwave-flash"}

{* SAFETYNET DSEFU MOD *}

{if $enable_seo_links == "Y"}

{include file="product_thumbnail.tpl" productid=$products[product].productid image_x=$config.Appearance.thumbnail_width product=$products[product].product tmbn_url=$products[product].tmbn_url}




{else}

{include file="product_thumbnail.tpl" productid=$products[product].productid image_x=$config.Appearance.thumbnail_width product=$products[product].product tmbn_url=$products[product].tmbn_url}




{/if}

{* END SAFETYNET DSEFU MOD *}

{else}

{capture name="myurl"}{strip}product.php?productid={$products[product].productid}&cat={$cat}&page={$navigation_page}{/strip}{/capture}

{include file="flash.tpl" productid=$products[product].productid image_y=$config.Appearance.thumbnail_width image_x=$config.Appearance.thumbnail_width product=$products[product].product tmbn_url=$products[product].tmbn_url myurl=$smarty.capture.myurl}

{/if}

{*** Cart-Lab.com mod ***}

{* BCSE Begin *}

{if $products[product].new_arrival ne ""}

{$lng.txt_new_arrival_products} 

{/if}

{* BCSE END *}

</TD></TR>

  <TR>

{* SAFETYNET DSEFU MOD *}

{if $enable_seo_links == "Y"}

        <TD align="center" ><u><h2>{$products[product].product}</h2></u>

{else}

        <TD align="center" ><u><h2>{$products[product].product}</h2></u>

{/if}

{* END SAFETYNET DSEFU MOD *}

        </TD>

  </TR>

  <TR>

    <TD align="center" valign="top">

{if $active_modules.Subscriptions ne "" and $products[product].catalogprice}

{include file="modules/Subscriptions/subscription_info_inlist.tpl"}

{else}

{if $products[product].taxed_price ne 0}

{if $products[product].list_price gt 0 and $products[product].taxed_price lt $products[product].list_price}

{math equation="100-(price/lprice)*100" price=$products[product].taxed_price lprice=$products[product].list_price format="%d" assign=discount}

{if $discount gt 0}

{$lng.lbl_market_price}: <S>

{include file="currency.tpl" value=$products[product].list_price}

</S>




{/if}

{/if}

{* <FONT class="tprice"> {include file="currency.tpl" value=$products[product].taxed_price}</FONT>

{include file="customer/main/alter_currency_value.tpl" alter_currency_value=$products[product].taxed_price}{if $discount gt 0}, save {$discount}%{/if} *}

{* xcp - start alternate currencies module    *}

{* replaces 1 line comment out above *}

<span class="fromprice">{$products[product].other_prices}</span><FONT class="tprice">{include file="currency.tpl" value=$products[product].taxed_price}</FONT>

{include file="customer/main/alter_currency_value.tpl" alter_currency_value=$products[product].taxed_price}{if $discount gt 0}save {$discount}%{/if}

{* xcp - end alternate currencies module    *}

{* comment out by Adam

{if $products[product].taxes}

{include file="customer/main/taxed_price.tpl" taxes=$products[product].taxes}{/if}

*}

{else}

<FONT class="ProductPrice">{$lng.lbl_enter_your_price}</FONT>

{/if}

{/if}

{*** Uncomment it if you need 'Buy Now' button ***

{if $usertype eq "C" and $config.Appearance.buynow_button_enabled eq "Y"}

{include file="customer/main/buy_now.tpl" product=$products[product]}

{/if}

*** Uncomment it if you need 'Buy Now' button ***}

{*** Cart-lab.com (Votes on products listing) ***}

{if $active_modules.Customer_Reviews ne ""}

{section name=votes loop=$allvotes}

{if $allvotes[votes].vote_max_cows gte 1}

{if $products[product].productid eq $allvotes[votes].productid}



Customer ratings: ({$allvotes[votes].vote_max_cows}/5)

 

{section name=full_cows loop=$allvotes[votes].vote_max_cows}

[img]{$ImagesDir}/star_4.gif[/img]

{/section}

{if $allvotes[votes].vote_little_cow ne "0"}

[img]{$ImagesDir}/star_{$allvotes[votes].vote_little_cow}.gif[/img]

{/if}

{section name=free_cows loop=$allvotes[votes].vote_free_cows}

[img]{$ImagesDir}/star_0.gif[/img]

{/section}

{/if}

{/if}

{/section}

{/if}

{*** Cart-lab.com (Votes on products listing) ***}

</TD>

  </TR>

</TABLE>

Has anyone attempted using nifty or phpmyborder code yet??? i havent got it working myself and wonder if anyone else has come across any probs

I'm using phpmyborder and it's working well:

http://www.geehowquaint.com

The only problem i'm finding is that it's not always good at working out the correct height of the box, so the bottom part of the contents can disappear, requiring you to tab down to it to scroll the content up in the box. I can't work out how to fix this at the moment.
it doesn't happen often though

cheers
steve

Quote:

Originally Posted by steveparks

I'm using phpmyborder and it's working well:

http://www.geehowquaint.com

Problem with that link im getting

Code:

The encoded file /home/httpd/vhosts/geehowquaint.com/httpdocs/rewrite_mod.php is not permissioned for 70.86.101.151

Hi

You were quick off the mark!

Yes I'm just putting the site live, so i'm switching from the temporarily licensed files i was provided with (very kindly by the developers) for a range of mods that allowed me to develop the site without the domain being available.
I'm now ready to go live, so have uploaded the properly licensed files, I'm just waiting for the domain to resolve properly.

Give it an hour or so and it should be fully live - hopefully!

:)
cheers

heheh its just coz im dying to see it, my products_t.tpl is so heavily modified code is all over the place so im finding it hard to seperate it all and just have the correct content within the phpmyborders. might get x-cart team to do the work as im too busy with selling at the moment :D

Quote:

Originally Posted by steveparks

I'm using phpmyborder and it's working well:
http://www.geehowquaint.com

It looks very nice... exept the right side of the dialog box on cart and checkout pages.

btw. Nice buttons.

yes, that's a problem only in IE - its fine in firefox.
I'm trying to figure out how to fix it at the moment.

ps...glad you like the buttons, but I'm afraid they're not on brand, I just haven't had a chance to design new ones yet - so they're just the ones from my store at www.podexec.com. Watch out for new, on-brand buttons soon. :)

Quote:

Originally Posted by steveparks

No problems Steve, just use it if you like it.

where abouts are you putting your

Code:

<?php

require_once("phpMyBorder2.class.php"); 

$pmb = new PhpMyBorder();

?>

are you putting it in home.tpl as

Code:

{php}<?php

require_once("phpMyBorder2.class.php"); 

$pmb = new PhpMyBorder();

?>{/php}

here is an extract of my menu.tpl

Code:






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

Code:

{* $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

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;

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.

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

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

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

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

Code:

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

Code:

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

Code:

<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

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

Personally I like this guys approach:

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

And used a similar method on a recent client site:

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

Re: Nifty Corners?

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

Quote:

Originally Posted by Zaja

Try this:

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

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:

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}