Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls
 

Pure CSS Rounded Boxes! (no images, no tables)

 
Reply
   X-Cart forums > X-Cart 4 > Dev Questions
 
Thread Tools Search this Thread
  #141  
Old 02-26-2009, 04:34 AM
 
paul@dimoda.com.au paul@dimoda.com.au is offline
 

Senior Member
  
Join Date: Aug 2007
Location: Perth, Australia
Posts: 148
 

Default 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)
__________________
X-Cart Gold 4.1.10, 4.1.18, 4.4.4, 4.4.5
Reply With Quote
  #142  
Old 02-26-2009, 05:57 AM
 
stizz stizz is offline
 

Advanced Member
  
Join Date: Mar 2008
Posts: 51
 

Default 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
__________________
http://www.stizz.nl X-Cart version 4.1.9 & 4.5.
Reply With Quote
  #143  
Old 02-26-2009, 06:59 AM
  JWait's Avatar 
JWait JWait is offline
 

X-Man
  
Join Date: Nov 2005
Location: California
Posts: 2,440
 

Default 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.
__________________
Two Separate X-Cart Stores
Version 4.4.4 Gold - X-AOM - Vivid Dreams Aquamarine (modified) - Linux
Mods - Newest Products - View All -, and a few others. Numerous upgrades from 4.0.x series.
Integrated with Stone Edge Order Manager + POS

Version 4.1.12 Gold (fresh install) - X-AOM - Linux
Mods - XCSEO free
Reply With Quote
  #144  
Old 02-26-2009, 12:42 PM
  JWait's Avatar 
JWait JWait is offline
 

X-Man
  
Join Date: Nov 2005
Location: California
Posts: 2,440
 

Default 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.
__________________
Two Separate X-Cart Stores
Version 4.4.4 Gold - X-AOM - Vivid Dreams Aquamarine (modified) - Linux
Mods - Newest Products - View All -, and a few others. Numerous upgrades from 4.0.x series.
Integrated with Stone Edge Order Manager + POS

Version 4.1.12 Gold (fresh install) - X-AOM - Linux
Mods - XCSEO free
Reply With Quote
  #145  
Old 02-26-2009, 01:44 PM
 
stizz stizz is offline
 

Advanced Member
  
Join Date: Mar 2008
Posts: 51
 

Default 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
__________________
http://www.stizz.nl X-Cart version 4.1.9 & 4.5.
Reply With Quote
  #146  
Old 02-27-2009, 08:34 AM
  JWait's Avatar 
JWait JWait is offline
 

X-Man
  
Join Date: Nov 2005
Location: California
Posts: 2,440
 

Default 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.
__________________
Two Separate X-Cart Stores
Version 4.4.4 Gold - X-AOM - Vivid Dreams Aquamarine (modified) - Linux
Mods - Newest Products - View All -, and a few others. Numerous upgrades from 4.0.x series.
Integrated with Stone Edge Order Manager + POS

Version 4.1.12 Gold (fresh install) - X-AOM - Linux
Mods - XCSEO free
Reply With Quote

The following user thanks JWait for this useful post:
lewaff (02-28-2009)
  #147  
Old 02-28-2009, 06:56 AM
 
pfarcus pfarcus is offline
 

Senior Member
  
Join Date: Jan 2009
Posts: 179
 

Default 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>
__________________
CDSEO PRO
4.1.11 PRO
Dynamic images by xcartmod.com
X-Cart CSSTemplate/Skin for v4.1.11 PRO
Reply With Quote
  #148  
Old 02-28-2009, 07:42 AM
  JWait's Avatar 
JWait JWait is offline
 

X-Man
  
Join Date: Nov 2005
Location: California
Posts: 2,440
 

Default 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.
__________________
Two Separate X-Cart Stores
Version 4.4.4 Gold - X-AOM - Vivid Dreams Aquamarine (modified) - Linux
Mods - Newest Products - View All -, and a few others. Numerous upgrades from 4.0.x series.
Integrated with Stone Edge Order Manager + POS

Version 4.1.12 Gold (fresh install) - X-AOM - Linux
Mods - XCSEO free
Reply With Quote
  #149  
Old 02-28-2009, 08:18 AM
 
pfarcus pfarcus is offline
 

Senior Member
  
Join Date: Jan 2009
Posts: 179
 

Default 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.
__________________
CDSEO PRO
4.1.11 PRO
Dynamic images by xcartmod.com
X-Cart CSSTemplate/Skin for v4.1.11 PRO
Reply With Quote
  #150  
Old 02-28-2009, 03:20 PM
  JWait's Avatar 
JWait JWait is offline
 

X-Man
  
Join Date: Nov 2005
Location: California
Posts: 2,440
 

Default 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.
__________________
Two Separate X-Cart Stores
Version 4.4.4 Gold - X-AOM - Vivid Dreams Aquamarine (modified) - Linux
Mods - Newest Products - View All -, and a few others. Numerous upgrades from 4.0.x series.
Integrated with Stone Edge Order Manager + POS

Version 4.1.12 Gold (fresh install) - X-AOM - Linux
Mods - XCSEO free
Reply With Quote
Reply
   X-Cart forums > X-Cart 4 > Dev Questions



Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


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

   

 
X-Cart forums © 2001-2020