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)

paul@dimoda.com.au 02-26-2009 04:34 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Hey Stizz
Is it possible that because the thbnail image is smaller in box 1 then the box is also smaller.

If so I beleive you may be able to address this by fixing the height of the product box.

You should be able to use something like height: 150px (you may need to add in your body class height :100% to get this to work)

stizz 02-26-2009 05:57 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Hi Paul,
Thanks for your reply. The thumbnails are all the same size. Since my post i've been working on it, here's what it looks like now:
http://www.stizz.nl/skin1/prtscrn_roundboxes2.jpg
As you can see the box in the middle is larger than the other 2 because of the double lined text (RED). I would love to have the boxes with only one line of text as large as the middle box. So there should be a break between product name and price for boxes with 1 line of (productname) text.
Haha can you still follow me?
I really hope someone knows some sort of code for it :) i can't get it done..

Cheers from Holland.

Yorick
Stizz

JWait 02-26-2009 06:59 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Ok.. in skin1.css or skin1_c.css (depending on which you use), add the class...

.ProdTitle { height:53px; }

Then in products_t.tpl find
Code:

<a href="product.php?productid={$products[product].productid}&amp;cat={$cat}&amp;page={$navigation_page}" class="ProductTitle">{$products[product].product}</a><br />
{if $config.Appearance.display_productcode_in_list eq "Y" and $products[product].productcode ne ""}
<font class="SmallText">{$lng.lbl_sku}: {$products[product].productcode}</font><br />
{/if}

and change it to...
Code:

<div class="ProdTitle"><a href="product.php?productid={$products[product].productid}&amp;cat={$cat}&amp;page={$navigation_page}" class="ProductTitle">{$products[product].product}</a><br />
{if $config.Appearance.display_productcode_in_list eq "Y" and $products[product].productcode ne ""}
<font class="SmallText">{$lng.lbl_sku}: {$products[product].productcode}</font><br />
{/if}</div>


Clear your templates cache (www.yoursite.com/cleanup.php) and see how it displays.

Then go back to skin1.css or skin1_c.css (depending on which you use) and adjust the height at .ProdTitle { height:53px; } until you are satisfied.

JWait 02-26-2009 12:42 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
The answer I gave adjusts the height of the Product Title regardless or whether it is one line, two line, or even three lines. You simply make the .ProdTitle class height match the longest of your product titles. It is a matter of the length of the title as it will automatically wrap after approximately 20 characters (in the example given).

This could/should be done even if you don't use the rounded boxes as it makes the images line up evenly even without a "box" around the products. What it does is make the "shorter" boxes as tall as the "tallest" box.

stizz 02-26-2009 01:44 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
wow amazing jwait! it's perfect now! Nice rows, nice lines!
Thanks a lot!

Greets
Yorick
Stizz

JWait 02-27-2009 08:34 AM

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

Originally Posted by lewaff
with v4.2 could not use dialog.tpl
as it it crashes out the checkout register page
lewis


Ok, a simple fix here use this mod with Fast Lane Checkout for x-cart version 4.2...

Open skin1_original/customer/dialog.tpl and edit the title to say...
$Id: checkout-dialog.tpl,v 1.8 2008/11/26 06:31:47 cray Exp $

Then save as to skin1/customer/checkout-dialog.tpl
(note: this is a different folder than skin1_original)

Open skin1/modules/Fast_Lane_Checkout/checkout_0_enter.tpl
and find....
Code:

{include file="customer/dialog.tpl" title=$lng.lbl_returning_customer content=$smarty.capture.dialog additional_class="flc-left-dialog`$left_ext_additional_class`"}
and change it to...
Code:

{include file="customer/checkout-dialog.tpl" title=$lng.lbl_returning_customer content=$smarty.capture.dialog additional_class="flc-left-dialog`$left_ext_additional_class`"}
and find
Code:

{include file="customer/dialog.tpl" title=$lng.lbl_new_customer content=$smarty.capture.dialog additional_class="flc-right-dialog`$right_ext_additional_class`"}
and change it to
Code:

{include file="customer/checkout-dialog.tpl" title=$lng.lbl_new_customer content=$smarty.capture.dialog additional_class="flc-right-dialog`$right_ext_additional_class`"}

What we are doing is changing the instances of dialog.tpl to our new checkout-dialog.tpl. This will make the "returning customer" and "new customer" boxes square, but it should work. Please note that I have not tried it yet, but I will and make any corrections if necessary.

pfarcus 02-28-2009 06:56 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Hi, regarding post #143, I've tried this several times in from diff posts. Doesnt seem to do anything.

Are your instructions for 4.1.11?
Its customer/main/products_t.tpl right?
Does it matter where you put that code in skin1.css?
I don't have rounded boxes set up for the thumbs, just the center big box.
Here is the top part of my code from products_t.tp, can you see anything wrong? (or anybody?)

Thx in advance.

{* $Id: products_t.tpl,v 1.30.2.12 2008/07/15 12:07:40 ferz Exp $ *}
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>

<table 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" }

<td width="{$width}%" class="PListCell">

<div class="ProdTitle"><a href="product.php?productid={$products[product].productid}&cat={$cat}&page={$navigation_page}" class="ProductTitle">{$products[product].product}</a><br />
{if $config.Appearance.display_productcode_in_list eq "Y" and $products[product].productcode ne ""}
<font class="SmallText">{$lng.lbl_sku}: {$products[product].productcode}</font><br />
{/if}</div>
<table cellpadding="3" cellspacing="0" width="100%">
<tr>
<td height="100" nowrap="nowrap">
<a href="product.php?productid={$products[product].productid}&cat={$cat}&page={$navigation_page}">{i nclude 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 "" && $products[product].have_offers && $usertype eq 'C'}
{include file="modules/Special_Offers/customer/product_offer_thumb.tpl" product=$products[product]}
{/if}
</td>

JWait 02-28-2009 07:42 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
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. :)

pfarcus 02-28-2009 08:18 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
yeah, thanks, sorry I do understand. It just doesnt seem to do anything. I tried setting it as something crazy like 1053px but nothing ever budges. No movement. I started with a clean original products_t.tpl. I don't know where my problem is. (i do have some lines that long enough to wrap)

Thx for your quick response though.:-)

JWait 02-28-2009 03:20 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Well, products_t.tpl is only used if you display your products in columns 2 or 3 across the page. If you display your products 1 per line down the page then it uses products.tpl and this mod is unnecessary (unless you display featured products in columns). Which are you using? Also, most times changes will not appear until the templates cache is cleared. enter www.yoursite.com/cleanup.php in you browser to do this.


All times are GMT -8. The time now is 05:39 AM.

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