X-Cart: shopping cart software

X-Cart forums (https://forum.x-cart.com/index.php)
-   Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)
-   -   Pure CSS Rounded Boxes! (no images, no tables) (https://forum.x-cart.com/showthread.php?t=33828)

spyderwoman 04-17-2009 02:16 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Thanks, this is great!

cosy 04-23-2009 01:14 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
HI,

I Just install 4.2.1 and can i use this same code?

Thanks,

iWD 04-23-2009 09:06 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Read back through the thread there should be an updated version that should work for 4.2 and in theory 4.2.1

If there isn't then the code for the 4.1 version I know is NOT the same.

AusNetIT 04-26-2009 05:54 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Quote:

Originally Posted by stizz
Hello!

Wonderful mod! I used the round boxes in products_t.tpl to make round boxes on my thumbnails. It worked out fine, now i still got one problem.
The boxes i made look like this:http://www.stizz.nl/skin1/prtscrn%20roundboxes.jpg

As you can see the left cell is in height smaller than the other 2 cells. I would like to have all these cells same height same width. Besides that you might see that the productnames contain or 1 or 2 lines. When they contain 2 lines the picture is lower than with 1 line of productname text. I've been trying to get the product names, images and prices (below) all on the same rows like:

Product name Product name short
longer

Image image

Price Price

Could anyone please help me out on this? It's driving me crazy.
Thanks in advance! (sorry for the long codes, didn't know how to create a scrollbox)

Here's the code i'm trying to change in products_t.tpl:

{* $Id: products_t.tpl,v 1.30.2.4 2006/11/27 11:40:25 max Exp $ *}
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="680px" cellpadding="0" cellspacing="0">
<table bgcolor="#ffffff" border="0">

{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 width="{$width}%" class="PListCell">

<div class="xroundedthumb">
<b class="xtop">
<b class="xb1"></b>
<b class="xb2 color_a"></b>
<b class="xb3 color_a"></b>
<b class="xb4 color_a"></b>
</b>
<div class="xboxcontent">
{if $link_href}<a href="{$link_href}">{/if}
{$menu_title}
{if $link_href}
{/if}
</a>
<div>
<p>
<a href="product.php?productid={$products[product].productid}&amp;cat={$cat}&amp;page={$navigation_p age}" class="ProductTitle">{$products[product].product}</a><br />
{if $config.Appearance.display_productcode_in_list eq "Y" and $products[product].productcode ne ""}
{$lng.lbl_sku}: {$products[product].productcode}<br />
{/if}
<table cellpadding="3" cellspacing="0" width="100">
<tr>
<td height="100" nowrap="nowrap">
<a href="product.php?productid={$products[product].productid}&amp;cat={$cat}&amp;page={$navigation_p age}">
{include file="product_thumbnail.tpl" productid=$products[product].productid image_x=$products[product].tmbn_x|default:$config.Appearance.thumbnail_width image_y=$products[product].tmbn_y product=$products[product].product tmbn_url=$products[product].tmbn_url}</a>
{if $active_modules.Special_Offers ne "" and $products[product].have_offers}
{include file="modules/Special_Offers/customer/product_offer_thumb.tpl" product=$products[product]}
{/if}
</td>
</tr>
</table>

{*<a href="product.php?productid={$products[product].productid}&amp;cat={$cat}&amp;page={$navigation_p age}">{$lng.lbl_see_details}</a>*}
{if $products[product].product_type ne "C"}
<br />
<br />
{if $active_modules.Subscriptions ne "" and $products[product].catalogprice}
{include file="modules/Subscriptions/subscription_info_inlist.tpl"}
{else}
{if $config.General.unlimited_products ne "Y" && ($products[product].avail le 0 or $products[product].avail lt $products[product].min_amount) && $products[product].variantid}
&nbsp;
{elseif $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="%3.0f" 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><br />
{/if}
{/if}

<font class="ProductPrice">{$lng.lbl_our_price}: {include file="currency.tpl" value=$products[product].taxed_price}</font><br /><font class="MarketPrice">{include file="customer/main/alter_currency_value.tpl" alter_currency_value=$products[product].taxed_price}</font>{if $discount gt 0}{if $config.General.alter_currency_symbol ne ""},{/if} {$lng.lbl_save_price} {$discount}%{/if}
{if $products[product].taxes}<br />{/if}
{if $active_modules.Special_Offers ne "" and $products[product].use_special_price ne ""}
{include file="modules/Special_Offers/customer/product_special_price.tpl" product=$products[product]}
{/if}
{else}
<font class="ProductPrice">{$lng.lbl_enter_your_price}
</font>
{/if}
{/if}
</div>
</div>
<b class="xbottom">
<b class="xb4"></b>
<b class="xb3"></b>
<b class="xb2"></b>
<b class="xb1"></b>
</b>
</div>
{if $active_modules.Feature_Comparison ne '' && $products[product].fclassid > 0}
<div align="center" style="width: 100%; padding-top: 10px;">

{include file="modules/Feature_Comparison/compare_checkbox.tpl" id=$products[product].productid}
</div>
{/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 ***}
{/if}
</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="SectionBox">&nbsp;</td>
{/section}
</tr>
{/if}

</table>

</td>
</tr>

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



HI,

I want to do the same but i can not see any boarder around the product?
yes, i follow the Post #1

AusNetIT 04-28-2009 09:57 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Thanks guys all sorted

AusNetIT 05-11-2009 11:34 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Quote:

Originally Posted by JWait
What post #143 addresses is when you have a long product title it will wrap over to the next line. Since products_t.tpl makes your products display in columns, if you have one product title that wraps and one that doesn't it will throw the images off line (or if you have "boxes" around your products like the examples that the question was about, it makes the boxes different sizes). By making a "space" for the product title it doesn't matter if it wraps or not (unless it uses more of the "space" provided by the height=53px definition in the ProdTitle class). If your product titles don't wrap (are not long enough) it should do anything (except put more space between the product title and the image). Also, you probably need to clear your templates cache (www.yoursite.com/cleanup.php) before you would notice any change.

It shouldn't matter where you put the ProdTitle class, and it shouldn't matter what version of x-cart you are using.

I hope this makes sense. :)



i did all the above but still i got 3-4 lines for product Name?
how do i set to 2 lines and More... sort of thing

I found some other post to truncate: 300.....etc etc but didn't work too?8O

AusNetIT 05-12-2009 04:20 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
yes found the answer. it is in products.tpl

mrerotic 06-23-2009 11:40 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
This would be really nice to get completed and fixed for version 4.2.1 Please let me know. I know I would greatly appreciate it :) at least for the .dialog

benjyboy 07-22-2009 05:04 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Looks very nice on the sites here - what are the chances of a 4.2.2 rounded corners release?

mtputer.com 08-26-2009 11:23 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Has anyone come up with rounded corners for 4.2? I tried the code in this forum topic, but it did not do anything. Any help would be greatly appreciated as my customer is demanding rounded corners.

Thanks,

Jeff

mrerotic 09-05-2009 01:11 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
hmmm... please :) 4.2 please

PhilJ 09-06-2009 02:55 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Been asked for this many times, so I have this mod available if anyone's interested. Makes the job very easy, with minimal markup.

ARW VISIONS 10-26-2009 08:38 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
use this for 4.2 menus

<div class="menu-dialog{if $additional_class} {$additional_class}{/if}">

<div class="xrounded">
<b class="xtop"><b class="xb1"></b><b class="xb2 color_a">
</b><b class="xb3 color_a"></b><b class="xb4 color_a"></b></b>
<div class="xboxcontent">
<h1 class="color_a">{if $link_href}<a href="{$link_href}">{/if}{$title}{if $link_href}</a>{/if}</h1>
<div>
{$content}</div>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b>
<b class="xb2"></b><b class="xb1"></b></b>
</div>
</div>

JWait 10-26-2009 01:57 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
or (for v4.2.x)....

Code:

Mods - replaced entire contents to make rounded boxes *}
<div class="xrounded{if $additional_class} {$additional_class}{/if}">
<b class="xtop">
<b class="xb1"></b>
<b class="xb2 color_a"></b>
<b class="xb3 color_a"></b>
<b class="xb4 color_a"></b>
</b>
<div class="xboxcontent {if $additional_class} {$additional_class}{/if}">
<h1 class="color_a" align="center">{if $link_href}<a href="{$link_href}">{/if}{$title|escape}{if $link_href}</a>{/if}</h1>
<div class="menu-list content{if $additional_class} {$additional_class}{/if}">{$content}<br /></div>
</div>
<b class="xbottom">
<b class="xb4 color_a"></b>
<b class="xb3 color_a"></b>
<b class="xb2 color_a"></b>
<b class="xb1"></b></b>
</div>


The difference is the "additional classes" and the break tag at the end. Sometimes its needed, and sometimes its not. Yoou can tell you need one if you have a "blank" spot at the bottom of your rounded box.

You can use the same code for your customer/dialog.tpl and customer/menu_dialog.tpl. Just remember, it will screw up your checkout page, the one were it asks if you are a returning customer or a new one. What I did was use the original customer/dialog.tpl (renamed to flc-dialog.tpl) and called it in skin1/modules/Fast_Lane_Checkout/checkout_0_enter.tpl.

You can also change the colors between the two (menu and main page dialog) by adding the classes xboxcontent2 (for the main background) and color_b (use it at the bottom instead of color_a), making them whatever color you choose (everything else is the same).

Tim CDN 11-15-2009 07:38 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Great info for 4.2

Quick question though, when I implemented the code my menu items changed from:

Left justified with no bullets

to

Centered with bullets

Any ideas?

JWait 11-18-2009 04:31 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Quote:

Originally Posted by Tim CDN
Great info for 4.2

Quick question though, when I implemented the code my menu items changed from:

Left justified with no bullets

to

Centered with bullets

Any ideas?


Its probably the "additional class" thing. If you look at your .xboxcontent class in your stylesheet it probably doesn't have any settings for "li" or "ul" (those are called in the tpl for the particular "box" you are working on).

wplume 12-13-2009 09:09 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Great mod-just can't figure out how to completely fill the boxes with a backround color-it seems to come up short at the bottom of all the boxes. Any ideas?

www.icai-online.com

Tim CDN 12-13-2009 09:12 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Probably the border colour of the menu, change the border to the same as the background

wplume 12-13-2009 09:30 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Tim

Thanks for the quick response. I changed the border-left: 1px & border-right: 1px colors to the same color as the background color in the xboxcontent string and it made no difference-any other idea's?

Thanks

JWait 12-14-2009 03:45 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Quote:

Originally Posted by wplume
Great mod-just can't figure out how to completely fill the boxes with a backround color-it seems to come up short at the bottom of all the boxes. Any ideas?

www.icai-online.com


What I did was add

.color_b {
background:#000; /* Change the bottom part color here*/
}

to my skin1.css and modified my menu.tpl so that at the bottom it is

<b class="xbottom"><b class="xb4 color_b"></b><b class="xb3 color_b"></b>
<b class="xb2 color_b"></b><b class="xb1"></b></b>
</div>

You shouldn't have to mess with your borders.

wplume 12-14-2009 06:32 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Thanks-made the changes and works great in Firefox 3.5 but I lose the left and right borders (but not the bottom border) in IE 8-any idea why?

wplume 12-14-2009 11:15 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
JWait

Thanks again-got the IE8/Firefox problem worked out; it was a couple missing spaces between the "solid" and "color" hex number.

promart418 01-05-2010 06:31 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Is the code on page 1 of this post suitable for my v4.1.11 website?

The reason I want to replace my rounded corner images and boxes with pure CSS rounded boxes is to improve page load speeds and remove unnecessary images. The menus should look exactly the same as they do now. Is this worthwhile?

I am not very good at css, but I could follow the step by step instructions on page 1 if they still work.

Please help!

Yalokin 01-19-2010 09:24 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Hello.

thank you for your post.

Did anyone try it with 4.23 of 4.3?

Are there any mod to make side bar menu with rounded corner?
Are there any other posts on same topic?

thank you.

Yalokin 01-19-2010 10:42 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Quote:

Originally Posted by JWait
It is a great mod and should work with 4.2 without any problems.


did anyone tryid it with 4.23?
I have some problem.
I need ot have BG color and cusotm rounded image for header.
Aslo it break side border almost at the end of each blockhttp://www.webredesignpro.com/images/ROUNDED-CSS.jpg

Could you be so kind and give me some advice.

thank you.

Yalokin 01-19-2010 11:27 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Quote:

Originally Posted by PhilJ
Been asked for this many times, so I have this mod available if anyone's interested. Makes the job very easy, with minimal markup.


Please post link to I we can see it.
Is it paid or free mode?


Do you have demo?

thank you.

wplume 01-30-2010 06:54 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
1 Attachment(s)
Just need a little help-this mod workes perfect for me in IE8 but when I use Firefox 3.5 the bottom border of the center boxes is seperated from the rest of the box. This doesn't happen on the home page, just any subcategory page and only in the center box-the right and left vertical boxes display fine in both IE8 and Firefox. You can see this in action at: http://www.icai-online.com/series-1-1-1.5-2hp/. The code has been checked several times and I can't find any bad code and it does work correctly in IE.

Anybody have this problem? Any help would be appreciated.

Thanks

Wayne


Here's a screen shot: http://forum.x-cart.com/attachment.php?attachmentid=1833&stc=1&d=126490986 3

JWait 01-31-2010 04:24 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Try adding a break tag to the bottom div, like this
Code:

{*
$Id: dialog.tpl,v 1.8 2008/11/26 06:31:47 cray Exp $
vim: set ts=2 sw=2 sts=2 et:
*}
{* Mods - replaced entire contents to make rounded boxes *}
{if $printable ne ''}
{include file="dialog_printable.tpl"}
{else}
<div class="xrounded{if $additional_class} {$additional_class}{/if}">
<b class="xtop">
<b class="xb1"></b>
<b class="xb2 color_a"></b>
<b class="xb3 color_a"></b>
<b class="xb4 color_a"></b>
</b>
<div class="xboxcontent{if $additional_class} {$additional_class}{/if}">
<h1 class="color_a{if $printable ne 'Y'} title-with-sort-row{/if}">{$title}</h1>

<div class="dialog-search-sort-bar">
        {if $selected eq '' && $direction eq ''}
        {include file="customer/search_sort_by.tpl" selected=$search_prefilled.sort_field direction=$search_prefilled.sort_direction url=$products_sort_url}
        {else}
        {include file="customer/search_sort_by.tpl" url=$products_sort_url}
        {/if}
      </div>
<div class="content{if $additional_class} {$additional_class}{/if}">{$content}<br /></div>


</div>
<b class="xbottom">
<b class="xb4"></b>
<b class="xb3"></b>
<b class="xb2"></b>
<b class="xb1"></b>
</b>
</div>
{/if}


wplume 01-31-2010 07:24 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
JWait

I tried adding the break tag-it didn't fix the problem. Here is my dialog.tpl code:

{* $Id: dialog.tpl,v 1.25 2005/12/20 08:50:49 max Exp $ *}
{if $printable ne ''}
{include file="dialog_printable.tpl"}
{else}
<div class="xrounded">
<b class="xtop"><b class="xb1"></b><b class="xb2 color_a">
</b><b class="xb3 color_a"></b><b class="xb4 color_a"></b></b>
<div class="xboxcontent">
<h1 class="color_a">{$title}</h1>
<div>{$content}
&nbsp;</p></div>
</div>
<b class="xbottom">
<b class="xb4 color_b"></b>
<b class="xb3 color_b"></b>
<b class="xb2 color_b"></b>
<b class="xb1"></b>
</div>
{/if}

If you see anything that would fix the problem I'd appreciate it.

Thanks!

wplume 01-31-2010 07:55 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
JWait

Found the problem-it was the </p> tag in the middle of the code; thanks for taking a look.

JWait 01-31-2010 09:45 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Sorry I didn't catch that... I should have.

eaglemobiles 03-20-2010 06:10 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Thanks for this great MOD i have managed to use the code in all other places but i cant use in Rounded Boxes in product list page

I am using 4.3.1 and i cant find this code

<table cellpadding="3" cellspacing="0" width="100%">
<tr>
<td height="100" nowrap="nowrap">
<a href="product.php?productid={$products[product].productid}&amp;cat={$cat}&amp;page={$navigation_p age}">{include file="product_thumbnail.tpl" productid=$products[product].productid image_x=$products[product].tmbn_x|default:$config.Appearance.thumbnail_width image_y=$products[product].tmbn_y product=$products[product].product tmbn_url=$products[product].tmbn_url}</a>
{if $active_modules.Special_Offers ne "" and $products[product].have_offers}
{include file="modules/Special_Offers/customer/product_offer_thumb.tpl" product=$products[product]}
{/if}
</td>
</tr>
</table>

i have looked in customer/main/products_t.tp, customer/main/products.tp, customer/main/products_list.tp

Thanks for help

IBRP 04-19-2010 04:41 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Hi All, I am very new to this and can't get the rounded boxes to work at all, at best all it does is totally remove the boxes in the admin section. Please help as I am an absolute beginner.

PhilJ 04-29-2010 05:12 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
CSS and JS methods for you...
http://forum.x-cart.com/showthread.php?t=53519

Learner 06-18-2010 09:56 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Will not work on Safari??How to work smoothly on all browser??

Any solution??

Learner 07-06-2010 11:53 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Works perfect on all browser,problem solved.Thanks Jwait for your solution http://forum.x-cart.com/showthread.php?t=33828&page=18
post#174.Works perfect in 4.3.2.

xtech 12-07-2011 04:08 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Any update for latest 4.4.x version?

cflsystems 12-07-2011 08:07 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
This has nothign to do with cart version. Just google "css rounded corners generator" to find how to do with simple css


All times are GMT -8. The time now is 01:30 AM.

Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2022, Jelsoft Enterprises Ltd.