View Single Post
  #1  
Old 12-28-2009, 05:45 AM
 
user1 user1 is offline
 

Member
  
Join Date: Feb 2009
Posts: 29
 

Default Error in Light & Lucid 3-columns

Hello there.

In my current 4.2.3 x-cart installation I use "Light & Lucid 3-columns" template. Currently I use the option to "Display products list in multiple columns" (Admin > General settings > Appearance options) and I'm happy with it.

I'm trying to upgrade my store to 4.3.0 using a test installation in a sub-domain (http://xcart43.farmorethangames.com/?shopkey=4848521 - please do not make any orders in the test store) but I have problems. If the option "Display products list in multiple columns" is enabled then the products appear aligned to the left.

It appears that there is a problem with "Light & Lucid 3-columns" template.

I asked for some help from qualiteam support but the answers they give are too general and don't solve the problem. To fix it they consider it as "complex template modification" (for something they did wrong!) and want to be paid extra money (I didn't ask how much).

So I tried something on my own...

I opened the skin1/main.css version:

Code:
/* $Id: main.css,v 1.269.2.3 2009/11/10 15:58:44 joy Exp $ vim: set ts=2 sw=2 sts=2 et: */
and made some changes:


1. changed this:
Code:
.products-table td.product-cell-buynow .button-row { text-align: left; margin: 9px 0 5px; }
with this:
Code:
.products-table td.product-cell-buynow .button-row { text-align: center; margin: 9px 0 5px; }
(centered the buttons "Buy now" and "Add to wishlist")


2. changed this:
Code:
.products-table .image { padding: 0px; margin: 5px 0px; text-align: left; }
with this:
Code:
.products-table .image { padding: 0px; margin: 5px 0px; text-align: center; }
(centered the images)


3. changed this:
Code:
.products .price-row { margin: 0px; padding: 0px; text-align: left; }
with this:
Code:
.products .price-row { margin: 0px; padding: 0px; text-align: center; }
(centered "Our price" text)


4. changed this:
Code:
.products .buy-now .quantity { height: 30px; white-space: nowrap; vertical-align: middle; }
with this:
Code:
.products .buy-now .quantity { height: 30px; white-space: nowrap; vertical-align: middle; text-align: center; }
(centered "Quantity text" and quantity box)


So far everything seems ok on firefox and ie8. But I have to center the product title, SKU and the vote-bar.

I found a way to center the product title and the SKU:

5. changed this:
Code:
.products-table .product-cell { background: #ffffff none; padding: 0px; vertical-align: top; }
with this:
Code:
.products-table .product-cell { background: #ffffff none; padding: 0px; vertical-align: top; text-align: center; }
This centered the product title and the SKU but if I open my site with IE8 the vote-bar has moved and looks scrambled.

Finally I have found no way to center the vote bar...

As a last solution I can remove the vote-bar through the module control panel but I would like to fix it instead of bypassing it.

If anyone has any idea on how to fix the problem, I'm all ears

Merry Christmas !!!!

Best regards,
Andreas Nikolaidis
__________________
x-cart v4.3.2 gold
http://www.FarMoreThanGames.com
Reply With Quote