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;

}

Re: Error in Light & Lucid 3-columns

Thank you all for your responses.

Quote:

Originally Posted by gizmo

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..

Well, I managed to import the database and make the cart work in a local installation, but the problem is I can't login to the admin part of my site. When I give my username and password I get a message saying that I can't login because my browser does not accept cookies. I tried with firefox, ie and chrome but every time I get the same message.

Quote:

Originally Posted by gb2world

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;

}

Nice! That centered the stars but now I have another problem.

If i click on a star to vote for a product the alignment returns to the left. To see what I mean, go to my test site and rate a product.

Best regards,
Andreas

Re: Error in Light & Lucid 3-columns

Quote:

If i click on a star to vote for a product the alignment returns to the left. To see what I mean, go to my test site and rate a product.

It appears the module is adding in-line css, probably with javascript, after you rate something that is over writing your width setting to be style="width: auto;" It will not center with this in-line code.

At this point - you are going to have to experiment to see if the writers of this code have a reason for adding this in-line style for rated products. You can use webmaster mode to find the template where they are doing this. You can take it out and see the impact. You can also use Firefox/Firebug to see the css that is controlling all this and experiment using these tools. You can also try creating your own div with width and margin set to center it, and place it around the cre-views-rating-box div. This is essentially what Ashley suggested above - only use a div with width, not a td.

Re: Error in Light & Lucid 3-columns

Happy new year everybody!

Quote:

Originally Posted by gb2world

First of all accept my apologies for not answering for so many days.

After a lot of trial and error I finally found the solution. All I need now is to see if all pages appear correctly. And this has to be done in all browsers.

I 'd like you to check it and see if there is any change that may affect other things.

So here is the way to do it:

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 the following changes:

1. Replaced 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;

}

2. Replaced 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;

}

3. Replaced 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;

}

4. Replaced 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;

}

5. Replaced this

Code:

.products-table .sku {

  margin-top: 5px;

}

with this

Code:

.products-table .sku {

  margin-top: 5px;

  text-align: center;

}

6. Replaced this

Code:

.creviews-rating-box {

  margin-top: 5px;

  padding-bottom: 7px;

}

with this

Code:

.creviews-rating-box {

  margin: 0px auto;

  padding-bottom: 7px;

  width: 100px;

  text-align: left;

}

You may wonder why I added this "text-align: left". Well, If this doesn't exist for some reason the rating box appears out of place in Internet Explorer. I don't know why but this fixed it. And since it doesn't mess anything else I left it.

7. Replaced this

Code:

.creviews-vote-bar ul {

  list-style: none;

  margin: 0px;

  padding: 0px;

  overflow: visible;

}

with this

Code:

.creviews-vote-bar ul {

list-style-image: none;

list-style-position: outside;

list-style-type: none;

margin: 0 auto;

overflow: visible;

padding: 0;

width: 100px;

}

8. Replaced this

Code:

.creviews-rating {

  font-size: 10px;

  color: #8a8a8a;

}

with this

Code:

.creviews-rating {

  font-size: 10px;

  color: #8a8a8a;

  text-align: center;

}

9. Replaced this

Code:

div.market-price {

  margin-top: 4px;

}

with this

Code:

div.market-price {

  margin-top: 4px;

  text-align: center;

}

10. Replaced 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;

}

There are some more changes to be made (for example, if you use taxes you may need to center align the taxes row) but I won't go in further details right now.

Thank you all for helping with one way or another!
Andreas

Re: Error in Light & Lucid 3-columns

It looks like it works ok on firefox, ie 8 and chrome.

Unfortunately, there is a mess in ie 6 and probably in ie 7.

Any ideas?

Re: Error in Light & Lucid 3-columns

The centre looks ok As Far as I can see using IE7, not tested it on IE 8 on my laptop, but check the main.IE6/7 etc css files and also check altskin.css and the ie6/7 alt skins.............

I use to have a nice piece of sotware to check in all browsers, and use to work well, I have lost it and can't remember what it's called. (Maybe google it)