X-Cart forums - Error in Light & Lucid 3-columns

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

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

- - Error in Light & Lucid 3-columns (https://forum.x-cart.com/showthread.php?t=51522)

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

Re: Error in Light & Lucid 3-columns

try this...

***make a back up of the file below

open skin1/customer/main/product_t.tpl

find this line of code

{include file="modules/Customer_Reviews/vote_bar.tpl" rating=$product.rating_data productid=$product.productid}

try adding align="center' to the preceeding <td> or <div> tag.

Re: Error in Light & Lucid 3-columns

What happens if you have Products configured for 2 columns?
Does it still do the same

Re: Error in Light & Lucid 3-columns

Quote:

Originally Posted by Ashley

try this...

***make a back up of the file below

open skin1/customer/main/products_t.tpl

find this line of code

{include file="modules/Customer_Reviews/vote_bar.tpl" rating=$product.rating_data productid=$product.productid}

try adding align="center' to the preceeding <td> or <div> tag.

Hello Ashley,

Since I don't know html or css you 'll have to give me specific instructions on how to do this. :-(

Quote:

Originally Posted by gizmo

What happens if you have Products configured for 2 columns?
Does it still do the same

Hello gizmo. Yes, same thing happens when I choose to display products in tow columns.

Best regards,
Andreas

Re: Error in Light & Lucid 3-columns

How about, trying to reinstall light & Lucid, 2 columns, see what happens, if OK, the re-install light and lucid 3 columns....

Just a suggestion, before trying all these css edits, this should definitely not be happening..

On my local host at home test server, on clean install of light and lucid, I have no issues with both 2/3 columns setups, also I have just started redesigning these templates, to design and a fixed width layout, with my own tabs for review, ratings, etc.. (But I have no mods at all) Do you feel a bad mod may be causing an issue?

Re: Error in Light & Lucid 3-columns

Quote:

Originally Posted by gizmo

Well, same thing happens if I change to Light & Lucid 2-columns. Checked with other templates and still the same happens. The products appear aligned to the left.

I can't login to the admin part of my local installs (some cookie problem I can't understand), so I haven't tested this locally. But I think it's strange you don't have any issues. Maybe I haven't explained in detail what's the problem.

Bellow I have two pics of the same store in 4.2.3 and in 4.3.0

4.2.3:

http://www.zmpouf.com/sshot-2009-12-29-%5b3%5d%20%28Medium%29.png

4.3.0:

http://www.zmpouf.com/sshot-2009-12-29-%5b4%5d%20%28Medium%29.png

See the difference? I don't have any mods installed. Just a plain simple clean install with the upgraded database. If I make an clean install with new database same thing happens.

Re: Error in Light & Lucid 3-columns

Oh I thought you meant that in 4.3.0 your products where aligning centre....
By default as far as I know light and Lucid aligns to left.....

Am I assuming you want your products centred in 4.3.0?

Re: Error in Light & Lucid 3-columns

BTW - you testing on home server as well?
And you say you cannot log in, have you imported a database? if so make sure

blow fish

key is same as the database you imported..

Re: Error in Light & Lucid 3-columns

Ok Sorry Getting on track...
Since you have said you have done most

THE SKU Details

.products-table .sku {
margin-top: 5px;
text-align: center; (Added)
}

I have added in bold, looks ok in IE7, haven't got IE 8 on my desktop only on laptop so not tested that yet..

I tried for ages to get all centred but ran in to compatable issues with browsers, and for me it would take time to get all css correct, I hope above helps you..

BTW can you not leave it as it is in 4.3.0 as it doesn't bother me at all and I personally think it looks ok to the left..

Re: Error in Light & Lucid 3-columns

You can center the div with the stars in it by giving it a width and using margin auto, something like this:

Code:

.creviews-rating-box {

width:100px;

margin:5px auto;

}