Column Layout Grid for Product Listing for 1.3.7

inkuyo:

I have installed the mod and it seems to work fine, except I only get 2 columns when I have it set to 3 and the 3rd box carries over to the next row.

I have played with the classes and ID's with no avail. Currently my site is set to 3 columns. See it for a sample. http://www.hyltondesign.com

Any suggestions?

Dale

Can you turn it back on to columns? It's usually a padding issue.

Sweet ZouZou:

I captured a screen shot of my problem. Each cell has the contents positioned above the top margin. It looks like a well place "padding" command would solved this problem. I have tried to no avail. Anyone?

Thx!

This should be working in your template:

.centerBoxContentsProducts .itemTitle {
margin-bottom: 1em;
}

But the problem is is that you have commented out a lot of stuff in your stylesheet incorrectly. You have things like this:

body {
font-family: arial, verdana, helvetica, sans-serif;
font-size: 74.5%; /text size (default 79.5%)/
/ color: #333;/
margin:10px 0;
background:#fff; /color of page background (white default fff)/
background-color: transparent;
background-image: url('../images/fading_background_12.png');
background-position:top;
background-repeat:repeat-x;

}

And that's WAY messed up. There's probably a TON of things in your stylesheet that are not working because of things like this.

If you want the color part gone, do thi:

/* color:#333; */

There always needs to be a /* before hidden content and a */ after hidden content.

I think your biggest culprit might be this section:

#navColumnTwo {
/ padding: 0;
background:#663300; background color of right sidebox (light blue default F0FAFD
border-left:15px solid #933; right sideboxes border (default grey 333) */
}

It needs to be like this:

#navColumnTwo {
/* padding: 0; /
background:#663300; background color of right sidebox (light blue default F0FAFD
border-left:15px solid #933; / right sideboxes border (default grey 333) */
}

minneapolis_dan:

Does anyone know of a quick fix or mod out there for the layout grid that will put the just the product images in one table row and the product title, descriptions in their own table row underneath them?

Right now, for each product, the text and images are together inside the same table cell, and I'd like to separate them, so I can line them up, like it was done here: http://modernkid.com/index.php?main_page=index&cPath=66_108

I'm poking around in the code for "product_listing.php" but I'm a bit lost for what to do. My PHP skills are ok, but not great.

You may not want to do this, but the way I get around this issue (I'm assuming you're saying that since some images are taller than others, the text for the names are not lined up vertically. SO, I go to "Configuration", "Images", and change my Product Listing heights to however tall I want the images to be (say 90), and I set the widths to 0. Now, every image will be 90 pixels tall... the width just changes. Now the text will line up.

indigo-island:

Hello! I love my columns and rows - thank you! But is it possible to show more rows per page. At the moment I've a 3 by 3 grid - but as my side menu is longer than that - and I don't want to put new products/featured products in the centre box - I've got a page that feels too short compared to its surrounds.

Yes, just go to "Configuration", "Maximum Values", and change the value for:

Products Listing- Number Per Page

Sermonzone:

This mod looks like it may be the closest thing to what I want to accomplish.

I want to display only the product image for any listing except the individual product page.

Has anyone done anything like this?

Under "Configuration", "Product Listing", you can turn off anything you don't want on.

jettrue:

Can you turn it back on to columns? It's usually a padding issue.

Ok it is back to columns. The product wrapper is 674px (in my view with FF) while the 3 productboxes are style=width:32.5% but the width is 229px. Obviously 229 times three is more than 674 (687 or 13 pixels larger). See my delima?

Thanks,
Dale

inkuyo:

Ok it is back to columns. The product wrapper is 674px (in my view with FF) while the 3 productboxes are style=width:32.5% but the width is 229px. Obviously 229 times three is more than 674 (687 or 13 pixels larger). See my delima?

Thanks,
Dale

Well, there's no setting of "229px" anywhere is there? So it should theoretically fit, as 32.5% x 3 is less than 100%.

Remove the padding:5px from this section:

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg

and the padding from:

.centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix

and see if that helps.

thanks for the help! I fixed my errors and the spacing is now where it should be :cool:

jettrue:

Well, there's no setting of "229px" anywhere is there? So it should theoretically fit, as 32.5% x 3 is less than 100%.

Remove the padding:5px from this section:

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg

> 
> 
> and the padding from:
> 
> ```
.centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix

and see if that helps.

Neither one help. Just squish the boxes a little close together. Funny thing is the 3rd product has different spacing.

inkuyo:

Neither one help. Just squish the boxes a little close together. Funny thing is the 3rd product has different spacing.

Open up includes/modules/YOUR_TEMPLATE/product_listing.php and change this:

  if (PRODUCT_LISTING_LAYOUT_STYLE == 'columns') {
    if ($num_products_count < PRODUCT_LISTING_COLUMNS_PER_ROW || PRODUCT_LISTING_COLUMNS_PER_ROW == 0 ) {
      $col_width = floor(100/$num_products_count) - 0.5;
    } else {
      $col_width = floor(100/PRODUCT_LISTING_COLUMNS_PER_ROW) - 0.5;
    }
  }

to this:

  if (PRODUCT_LISTING_LAYOUT_STYLE == 'columns') {
    if ($num_products_count < PRODUCT_LISTING_COLUMNS_PER_ROW || PRODUCT_LISTING_COLUMNS_PER_ROW == 0 ) {
      $col_width = floor(100/$num_products_count) - 1.5;
    } else {
      $col_width = floor(100/PRODUCT_LISTING_COLUMNS_PER_ROW) - 1.5;
    }
  }

Hello Jade,

The above post...changing .5 to 1.5 seemed to do the trick. I was having the same problem of my third product of a three column grid being kicked down to the next line. However, now I'm curious....WHY did it work? What was altered by switching the value?

creative:

Hello Jade,

The above post...changing .5 to 1.5 seemed to do the trick. I was having the same problem of my third product of a three column grid being kicked down to the next line. However, now I'm curious....WHY did it work? What was altered by switching the value?

It changed 32.5% to 31.5%.

jettrue:

Open up includes/modules/YOUR_TEMPLATE/product_listing.php and change this:

if (PRODUCT_LISTING_LAYOUT_STYLE == 'columns') {
if ($num_products_count < PRODUCT_LISTING_COLUMNS_PER_ROW || PRODUCT_LISTING_COLUMNS_PER_ROW == 0 ) {
$col_width = floor(100/$num_products_count) - 0.5;
} else {
$col_width = floor(100/PRODUCT_LISTING_COLUMNS_PER_ROW) - 0.5;
}
}

> 
> 
> to this:
> 
> ```
  if (PRODUCT_LISTING_LAYOUT_STYLE == 'columns') {
    if ($num_products_count < PRODUCT_LISTING_COLUMNS_PER_ROW || PRODUCT_LISTING_COLUMNS_PER_ROW == 0 ) {
      $col_width = floor(100/$num_products_count) - 1.5;
    } else {
      $col_width = floor(100/PRODUCT_LISTING_COLUMNS_PER_ROW) - 1.5;
    }
  }

Great. It worked. Looks like I need ot do the same thing for new products too. Thanks.
Dale

inkuyo:

Great. It worked. Looks like I need ot do the same thing for new products too. Thanks.
Dale

For the New products on the main page:

Actually for the new products I DID have to change my padding for the class .centeredContent from 5px to nothing.

I have got this mod installed and working with a 3 column layout, which looks almost how I want it.

The only thing that I can't figure out is the text line spacing. I have some items with longer descriptions than others, which means they can have 1,2 or 3 lines of text. Currently this causes the item price to drop down relatively, rather than leave a fixed distance, meaning that the prices may not be in horizontal alignment.

I have seen some sites on the showcase where the price aligns, and the description takes up a fixed height of 3 lines - it will leave 2 blank for a single line description. This is what I want to do, as I intend to box the items, which will look odd if there are different sizes.

Does anyone know how to achieve this, thanks.

dab:

I have got this mod installed and working with a 3 column layout, which looks almost how I want it.

The only thing that I can't figure out is the text line spacing. I have some items with longer descriptions than others, which means they can have 1,2 or 3 lines of text. Currently this causes the item price to drop down relatively, rather than leave a fixed distance, meaning that the prices may not be in horizontal alignment.

I have seen some sites on the showcase where the price aligns, and the description takes up a fixed height of 3 lines - it will leave 2 blank for a single line description. This is what I want to do, as I intend to box the items, which will look odd if there are different sizes.

Does anyone know how to achieve this, thanks.

You can change the number of characters shown for the description, under "Configuration", "Product Listing", "Display Product Description". Now, if any of your descriptions have less characters than whatever you enter there, they will end up falling short..... SO, you either need to change that value to be smaller than your smallest description, OR add more to the description of those with short descriptions so they all end up looking the same. Try different values to see what looks best.

Thanks for your reply Jettrue.
I think I may have confused things here with my terminology. I can see where you are coming from, but I have this turned off (set to 0). What I am actually referring to is the Products Name, which is all I have turned on.

gjh42:

2. Get the Column Layout Grid mod from Downloads.

I've installed it but now I can't add products anymore. When I click on "new product" button inside a category via AdminCP, It shows this error:

Not Found

The requested URL /admin/piccolimediformati.php was not found on this server.

No matter what category I try to insert a new product in, it keeps showing me that error.

Mad_Griffith:

I've installed it but now I can't add products anymore. When I click on "new product" button inside a category via AdminCP, It shows this error:

Not Found

The requested URL /admin/piccolimediformati.php was not found on this server.

> 
> No matter what category I try to insert a new product in, it keeps showing me that error.

Any idea about this? Please...

Mad_Griffith:

Any idea about this? Please...

Did you upload the files in the correct spots? None of the files for this mod go in the admin folder.