styling product listing pages with column layout grid

I also have an issue with firefox where if there are less than 3 products in a category the images move to the left please see attached pic. Anyone know what the problem could be it seems fine in internet explorer 6 and 7.

Adding these two rules to your stylesheet will get the spacing you are looking for. Adjust the numbers to taste.```
.centerBoxContentsNew img {margin: 1.0em 0;}

.centerBoxContentsNew .smalltext1 {
line-height: 2.0em;
position: relative;
top: 0.4em;
}

Change.listingimg{ text-align:center; margin-top:10px; }to```
.listingimg{
text-align:center;
margin:10px auto 0;
}

gjh42:

Adding these two rules to your stylesheet will get the spacing you are looking for. Adjust the numbers to taste.```
.centerBoxContentsNew img {margin: 1.0em 0;}

.centerBoxContentsNew .smalltext1 {
line-height: 2.0em;
position: relative;
top: 0.4em;
}

Hey Glen, this worked perfectly thank you very much!

gjh42:

Change.listingimg{ text-align:center; margin-top:10px; }to```
.listingimg{
text-align:center;
margin:10px auto 0;
}

Glen, This change didnt really do anything but move the listing up and the pic stayed to the left......

Any other ideas?

It worked when I tested it on your site. I don't know what else to say, except to be sure you change in the right place.

What browser are you using? Maybe IE doesn't handle the CSS right...

gjh42:

It worked when I tested it on your site. I don't know what else to say, except to be sure you change in the right place.

What browser are you using? Maybe IE doesn't handle the CSS right...

Ok i didnt completely do what u said i didnt remove top from margin and now its working....

Thanks Glen

Glen, do you know why the bottom gap btween new products and footer are different in ie and ff?
Posted via Mobile Device

I have found and fixed the bug that was preventing the "rows" setting and the CSS-only alternative from working. It was very simple, and anyone who has downloaded the second version of the mod can fix it by finding this section around line 86 in /includes/modules/your_template/product_listing.php (flex version; CSS-only version will have different line numbers):php case 'PRODUCT_LIST_PRICE': if ($skip_price) { $flex_skip_now = 1; $flex_skips++; } else { $lc_text = TABLE_HEADING_PRICE; $lc_class = 'listingPrice' . (PRODUCTS_LIST_PRICE_WIDTH > 0 ? '" width="' . PRODUCTS_LIST_PRICE_WIDTH : ''); $zc_col_count_description++; break; and change it to this:```php
case 'PRODUCT_LIST_PRICE':
if ($skip_price) {
$flex_skip_now = 1;
$flex_skips++;
} else {
$lc_text = TABLE_HEADING_PRICE;
$lc_class = 'listingPrice';
$lc_align = (PRODUCTS_LIST_PRICE_WIDTH > 0 ? '" width="' . PRODUCTS_LIST_PRICE_WIDTH : '');
//$zc_col_count_description++;
}// skip
break;

You will also need to find this around line 52:```php
$lc_align = '';//align settings moved to stylesheet
for ($col=0, $n=sizeof($column_list); $col<$n; $col++) {
```and switch the statements like this:```php
for ($col=0, $n=sizeof($column_list); $col<$n; $col++) {
$lc_align = '';//align settings moved to stylesheet
```I haven't tested this, but the way it was would definitely break the output in the way observed, and this fixes that problem.

However, I have also come up with a superior method of performing the "flexible listing" functions which will be much easier to use, so I have withdrawn the download until I finish the new version. It will require no user code changes at all, merely setting the sort order of the elements in admin in a certain way.

Per request, I am posting a preliminary copy of Flexible Product Listing v1.0. It is fully functional, but still needs more readme text and files cleaned up before final release.

Thank you Glenn,

I will be testing it and give feedback monday : )

Hello again

I tried the mod it is veyr nice, almost what I needed thanks a lot glenn

I hav a little problem though

I want to reduce this spacing

Also is there a way to put the price under the picture and the add to cart (ajouter au panier) under the price?

Thank you in advance and good luck

Easily done in the stylesheet. To move the price in the default Flex layout closer to the center divider, change this in stylesheet_flexible_product_listing.css.listingPrice {float: left; margin-left: 0.5em;} /*demo setup*/to this```
.listingPrice {float: left; width: 40%; text-align: right;} /demo setup/

To put the add under the price, eliminate the floats etc. from their stylesheet rules:```
.listingPrice {} /*demo setup*/
.listingButtonGroup {} /*demo setup*/

thank you very much glenn

your module is wonderful

I wish other members can download it from download section in zencart website

it is really great

thanks a million

Good info here.

I've got a question though. Looking at:

http://greenleafexhibits.com/index.php?main_page=index&cPath=1

Using this contrib, I've got the products layed out the way we want, but I am missing the neat box with round corners around the products. I'd like for it to look like that everywhere, not just on specials, like the way it is on the home page:

http://greenleafexhibits.com/index.php?main_page=index

But be in the new column product view.

I suspect this is a css issue, but can't seem to figure it out without breaking things. Always keep a backup :laugh:

You have a Template Monster template, which adds a ton of divs that they use for styling the rounded corners on bars and boxes. As this is completely nonstandard code and clumsily written, it would take some study to figure out where to add round corner styling.
But yes, it is a CSS issue, and there are enough extra divs around the individual product listings to add a couple of layers of round corners.

Ah, I see. and I agree with you. It's just over my head to find out where it would be needed to be fixed.

Is there one or two specific css files I should analyze?

You don't need to "fix" the code - the extra divs don't really hurt, they just complicate matters.
What you need is Firefox and its Web Developer extension, and possibly the Firebug extension as well.
The Web Developer's Information > Display Element Information button will give you all of the ancestors and other info for any element you click on. This can be used to cross-reference in the stylesheets and find what class tags are intended to do what. You may need to search through all of the css files to find where certain classes are styled.

Gotcha! I'll consider this a cosmetic, future item I can change after the site is up and running.

THANKS!

Hi,
Where can I download this? I can't find any link.