Using one single listing template

[schoolboy]

I made the following change to the product_listing.php MODULE FILE

includes/modules/YOUR_TEMPLATE/product_listing.php

ORIGINAL CODE:

  // Used for Column Layout (Grid Layout) add on module
  $column = 0;    
  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;
    } 

MY CHANGES

  // Used for Column Layout (Grid Layout) add on module
  $column = 0;    
  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;
    } else {
      $col_width = floor(100/PRODUCT_LISTING_COLUMNS_PER_ROW) - 1;
    } 

See how I changed it to SUBTRACT a whole number ( 1 full percent) rather than a fraction (0.5) which is a "half a percent".

And as niccol says... don't add margins AND borders AND padding.

You can gently "tweak" the CSS to nudge the display a bit, but by changing the FRACTION (0.5) to a WHOLE NUMBER (1) it works for me.

(You might be able to make that integer GREATER if you want extra space for padding and borders. Try "2" or "3" as well...)

[niccol]

You now have the inner box that you need.

(BTW. You need to work out how to use web developer tools in chrome or firebug in firefox so that you can look at this stuff easily on a live page. That is how we can say these things with certainty. It lets us play with the css of your site on our machines.)

Now you need to style the inner box. Something like:

.innerColumn{
border:1px solid red;
margin:10px;
min-height: 280px;
padding:5px;
}

.centerBoxContentsProducts {
height:auto!important;
}

the first bit is to style the inner box and the second bit is just to remove the styling that is already there. so you can adjust the values that are there in the first rule to suit what you want.

like this you can add styling in pretty much any combination you like and it won't break the layout.

No need to feel stupid. This isn't brain surgery or rocket science that takes real brains. It is just coding that relies mainly on having done it before.

[aperfecthost]

THANK YOU! THANK YOU! Nick and Schoolboy, I utilized both of your suggestions. I so much appreciate the help. I am going to love the developer's tools! Bit confusing still, but I did play with it some and found how I like it! Awesome tips!

[aperfecthost]

One more question... hopefully then I'll leave you guys alone.

I have the boxes the way I like, except I'd really like to align the inner contents at the bottom, not at the top. I read up on vertical-align and understand it won't work here, at least the way it is set up. I've played around in the developer's tools and still can't figure it out.

Any suggestions? Once again, the website is: http://paisleyposey.com/shop/index.p...=index&cPath=5

Thanks!

[niccol]

One thing to keep in mind is that the contents may change as other factors change. So, for example if you have a specials price added to a product that will cause the contents to 'grow'. Or for that matter a very long product name. So, that is why I tend to use min-height rather than height in the css rules.

Aligning to the bottom is possible but is complex. Actually, if I absolutely have to do it then I tend to use javascript as it has better cross browser compatibility. But that is a bit beyond the scope of a forum post.

The quicker fix is to keep your images consistent sizes. Or if not, at least add a rule to make them so. Something like:

a.product_listing_image_link{
display:block;
height:135px
}

Which at least means that the text under them is kept aligned.

[schoolboy]

I think it is Glenn Herbert who has developed a module to allow styling of individual elements in the product listing boxes.

[aperfecthost]

THANKS! Perfect! I used that code and now it's great!

You guys are awesome!

[waterbender]

Hi just a quick question, is this module compatible with the latest zen cart version 1.5.1?

[mikeel100]

Ditto to Waterbender's question 1.5.1?

I just upgraded to a responsive package and the regular product listing does not work well with small screens (scrunches pictures down to a thin line on products search results listings).

I would prefer to have all of my listings look like the all, new, or featured listings...completely replacing the product listing, search results product listing, and new listing but retaining the sort functions.

Thanks.

[torvista]

is this module compatible with the latest zen cart version 1.5.1?

It states clearly on the download page that this mod was last used with 1.39.

A common template system will be introduced in ZC 1.6.

I can guarantee it will take you far less time to modify your Zen Cart templates individually than attempting to implement this mod, incorporate the changes since 1.39, go nuts trying to understand how it works, and then take it all out again for the 1.6 upgrade.
Its a merging nightmare and I removed it all recently when upgrading to 1.53.