X-Cart forums - Boxes with round corners...

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

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

- - Boxes with round corners... (https://forum.x-cart.com/showthread.php?t=11565)

Boxes with round corners...

Does somebody know how to make in html the boxes with the round
corners, such as used on genpi.com?

http://home.zonnet.nl/jumpers/corners.jpg http://home.zonnet.nl/jumpers/corners2.jpg
Till now I managed to (re)produce the 4 round corners en the 2 horizontal lines,
but I can't figure out how the close the box with the 2 vertical lines.

I hope that somebody can help me.
Many thanks in advance!!

Genpi uses CSS for the vertical images (lines)

.menutable {
BORDER-RIGHT: #cccccc 1px solid;
BORDER-TOP: 0px solid;
BORDER-LEFT: #cccccc 1px solid;
BORDER-BOTTOM: 0px solid;
FONT-STYLE: normal;
}

applied to the table that holds their product image.

Wonderfull - that did it !! :D :D :D

Thanks alot for helping!!

Jerrad,

Did you create the 2 horizontal lines as images and add them using CSS? I am trying to do exactly the same as you and have created the images, but I can't seem to work out how to get these round the tables in featured products.

H

Hi Bigmac,
For the horizontal line I used two gif's, which I gave a table cell width
of 100%.

I've put them here for you to download. They're very small but they
are the grey dots on the right of the arrows.
I've used this one for the top line:
> http://home.zonnet.nl/jumpers/top.gif

And this one for the bottom line:
> http://home.zonnet.nl/jumpers/bottom.gif

Just right click on it and save them.
Hope this helps - good luck!

thanks works like a charm!

http://www.oneidasuzuki.com/

Hi,

I need the same round corner for my product image but i dont have any where i start, i new to xcart please help.

Thanks

For your product image? You mean in product.tpl?

Thanks for reply, yes in my product.tpl and producs.tpl

Did the code above not work for you?

i have squire boxes for my products page but i dont where how to make it round corner

www.eaglemobiles.co.uk

You need to follow the instructions above. Open product_t.tpl and apply the style to the table containing the product. Then, create the style in your style sheet (skin1.css) as shown above.

Many thanks Jerrad for your help and for putting the images on your reply.

Am I right in saying I add a row with 3 columns and place the corners in columns 1 & 3? Also, I seem to be having problems getting the images on 2 and 3 column format. When I add the images in products_t.tpl, it adds the images around the first column but misses columns 2 & 3.

Would very much appreciate anyones help with this.

Kindest regards,

Bigmac

I have now inserted two columns to the left and right of the main body in products_t.tpl and inserted my 2 top corners. Everything works fine and I have my two top images visible in home.php. When I insert a row below and place my images for the bottom 2 corners, only the first product has the 2 bottom images in place. I have tried adding the images using Background in CSS, but when I put my side borders in place, they go to the end of the line extending past the corners and look a mess. Can anyone point out where I am going wrong please?

H

Rounded Box Corners - Coming Along Slowly!

I have had some considerable help from Jerrad on this and it is starting to come about. However, I don't know what I did to make everything go in to a column and not across (by 2) for my center display. Here is the code I am using for products_t.tpl:

Code:

{* $Id: products_t.tpl,v 1.10.2.7 2004/12/23 09:11:59 max Exp $ *}

<TABLE border="0" width="100%" cellpadding="0" cellspacing="0"><TR><TD class="TableThumbnailBorder">



<TABLE border="0" width="100%" cellpadding="5" cellspacing="1">



{math equation="floor(100/x)" x=$config.Appearance.products_per_row assign="width"}



{section name=product loop=$products}

{assign var="discount" value=0}



{if %product.index% is div by $config.Appearance.products_per_row}

<TR>

{assign var="cell_counter" value=0}

{/if}



{math equation="x+1" x=$cell_counter assign="cell_counter" }



<TABLE border="0" cellpadding="0" cellspacing="3" id="table1"> 



<TR> 



<TD valign="top" class="DialogBox"> 

<table width="100%" height="5" border="0" cellpadding="0" cellspacing="0" background="{$ImagesDir}/top.gif" id="table2"> 

      <tr> 

        <td align="left" valign="top"> 

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

        <td align="right"> 

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

      </tr> 

    </table> 

   <TABLE width="190" height="220" border="0" align="center" cellpadding="2" cellspacing="2" class="menutable" id="table3"> 

              <TR> 

                <TD align="center" valign="top" width="100%" class="DialogBox"> 



{$products[product].product}

 

 

{if $active_modules.Special_Offers ne "" and $products[product].have_offers} 

{include file="modules/Special_Offers/customer/product_offer_thumb.tpl" product=$products[product]} 

{else} 

<TABLE cellpadding="3" cellspacing="0" border="0"><TR> 

   <TD height="100" 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}

 

</TD></TR> 

</TABLE> 

{/if} 

{$lng.lbl_see_details}



 

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

<FONT class="MarketPrice">{$lng.lbl_market_price}: <S> 

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

</S></FONT>

 

{/if} 

{/if} 

<FONT class="ProductPrice">{$lng.lbl_our_price}: {include file="currency.tpl" value=$products[product].taxed_price}</FONT>

<FONT class="MarketPrice">{include file="customer/main/alter_currency_value.tpl" alter_currency_value=$products[product].taxed_price}</FONT>{if $discount gt 0} {$lng.lbl_save_price} {$discount}%{/if} 

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

{if $active_modules.Feature_Comparison ne '' && $products[product].fclassid > 0} 



 

{include file="modules/Feature_Comparison/compare_checkbox.tpl" id=$products[product].productid} 

{/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 ***} 

</TD> 

              </TR> 

            </TABLE> 

      <table width="100%" height="5" border="0" cellpadding="0" cellspacing="0" background="{$ImagesDir}/bottom.gif" id="table4"> 

        <tr> 

          <td align="left" valign="top"> 

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

          <td align="right"> 

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

        </tr> 

      </table> 

        </TD> 

</TR> 



</TABLE> 



{capture name=prod_index}

{math equation="index+x+1" index=%product.index% x=$config.Appearance.products_per_row}

{/capture}

{if $smarty.capture.prod_index is div by $config.Appearance.products_per_row }

</TR>

{/if}



{/section}



{if $cell_counter lt $config.Appearance.products_per_row}

{section name=rest_cells loop=$config.Appearance.products_per_row start=$cell_counter}

<TD class="DialogBox"></TD>

{/section}

</TR>

{/if}



</TABLE>

</TD></TR></TABLE>

{if $active_modules.Feature_Comparison ne '' && $products && $printable ne 'Y'}

{include file="modules/Feature_Comparison/compare_selected_button.tpl"}




{/if}

Could someone make heads or tails out of this and point me in the right direction please? My website is: www.ourgiftshoppe.com.

First of all, I'm not a programmer. I was just playing around with the rounded corners.
Maybe someone can inprove this a little: (this is my products_t.tpl)

Quote:

{* $Id: products_t.tpl,v 1.10.2.7 2004/12/23 09:11:59 max Exp $ *}
<TABLE border="0" width="100%" cellpadding="0" cellspacing="0"><TR><TD class="TableThumbnailBorder">

<TABLE border="0" width="100%" cellpadding="2" cellspacing="1">

{math equation="floor(100/x)" x=$config.Appearance.products_per_row assign="width"}
{section name=product loop=$products}
{assign var="discount" value=0}
{if %product.index% is div by $config.Appearance.products_per_row}
<TR>
{assign var="cell_counter" value=0}
{/if}
{math equation="x+1" x=$cell_counter assign="cell_counter" }
<TD align="center" valign="top" width="{$width}%" class="DialogBox">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="9" width="9">[img]skin1/images/border_left_top.gif[/img]</td>
<td valign="top">[img]skin1/images/border.gif[/img]</td>
<td height="9" width="9">[img]skin1/images/border_right_top.gif[/img]</td>
</tr>
<tr>
<td height="200">[img]skin1/images/border.gif[/img]</td>
<td>
<TABLE cellpadding="0" cellspacing="0" border="0" align="center">
<TR><TD align="center">
{$products[product].product}

{$lng.lbl_sku}: {$products[product].productcode}

{if $active_modules.Special_Offers ne "" and $products[product].have_offers}
{include file="modules/Special_Offers/customer/product_offer_thumb.tpl" product=$products[product]}
{else}
</TD></TR>
<TR><TD height="100" 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}

</TD></TR>
{/if}
<TR><TD align="center">
{$lng.lbl_see_details}

{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}
<FONT class="MarketPrice">{$lng.lbl_market_price}: <S>
{include file="currency.tpl" value=$products[product].list_price}
</S></FONT>

{/if}
{/if}
<FONT class="ProductPrice">{$lng.lbl_our_price}: {include file="currency.tpl" value=$products[product].taxed_price}</FONT>
<FONT class="MarketPrice">{include file="customer/main/alter_currency_value.tpl" alter_currency_value=$products[product].taxed_price}</FONT>{if $discount gt 0}, {$lng.lbl_save_price} {$discount}%{/if}
{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}
{if $active_modules.Feature_Comparison ne '' && $products[product].fclassid > 0}

{include file="modules/Feature_Comparison/compare_checkbox.tpl" id=$products[product].productid}
{/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 ***}
</TD></TR>
</TABLE>
</td>
<td align="right">[img]skin1/images/border.gif[/img]</td>
</tr>
<tr>
<td height="9" width="9">[img]skin1/images/border_left_bot.gif[/img]</td>
<td valign="bottom">[img]skin1/images/border.gif[/img]</td>
<td height="9" width="9" align="right">[img]skin1/images/border_right_bot.gif[/img]</td>
</tr>
</table>
</TD>

{capture name=prod_index}
{math equation="index+x+1" index=%product.index% x=$config.Appearance.products_per_row}
{/capture}
{if $smarty.capture.prod_index is div by $config.Appearance.products_per_row }
</TR>
{/if}

{/section}

{if $cell_counter lt $config.Appearance.products_per_row}
{section name=rest_cells loop=$config.Appearance.products_per_row start=$cell_counter}
<TD class="DialogBox"></TD>
{/section}
</TR>
{/if}

</TABLE>
</TD></TR></TABLE>
{if $active_modules.Feature_Comparison ne '' && $products && $printable ne 'Y'}
{include file="modules/Feature_Comparison/compare_selected_button.tpl"}

{/if}

These are the five images that I used to create the rounded corners and the lines:
http://luster.ca/xcart/skin1/images/border_left_top.gif, http://luster.ca/xcart/skin1/images/border_right_top.gif, http://luster.ca/xcart/skin1/images/border_left_bot.gif, http://luster.ca/xcart/skin1/images/border_right_bot.gif and http://luster.ca/xcart/skin1/images/border.gif.

I know this needs some more attention.

Not sure if this can be of any help for someone but I like to contribute the very little I can because of all the great work I've seen here so far.

Regards,
Kristiaan.

Rounded Box Corners - Triumphet at Last

Thank You so Very Much - You have accomplished what I have been trying to do for so long now. This works for 4.0.13 and I know that will make a lot of people happy. Check it out at www.ourgiftshoppe.com. Thanks to you, Jerrad and all the other people in this forum for helping us nu-b's out so much.

Re: Boxes with round corners...

has anyone got this to work is 4.1.9?

Re: Boxes with round corners...

You can check out this one. It is a cleaner modifiaction.

http://forum.x-cart.com/showthread.php?t=33828&highlight=round+corner