Adding space in between items

my product images are really close together. I would like to add some white space between them. Where would I do this?? Is is possiable?

In your stylesheet (/includes/templates/your_template/css/stylesheet.css), add

/* space & border between listing items */
.productListing-odd td, .productListing-even td {
text-align: left;
vertical-align: top;
padding:0.5em;
margin-bottom: 1em;
border-bottom: 3px double #aaccbb;
}

Change numbers, add, edit or delete properties as desired.

thank you, that worked wonderfully.

gjh42:

In your stylesheet (/includes/templates/your_template/css/stylesheet.css), add

/* space & border between listing items */
.productListing-odd td, .productListing-even td {
text-align: left;
vertical-align: top;
padding:0.5em;
margin-bottom: 1em;
border-bottom: 3px double #aaccbb;
}

Change numbers, add, edit or delete properties as desired.

This works ideally. But as All Products uses the same classes .productListing-odd & -even, the border shows surrounding the description. Is there any way to only add the border to the product listing?

Thanks!

Change the selectors to

#indexProductList .productListing-odd td, #indexProductList .productListing-even td

and it will only affect categoriy listings.

Thanks everybody for the helpful info....
Uh, what I had more in mind for spacing is like this page in the Wallet template.... what CSS code does this setup? ....METOOTECH

http://(sorry, site offline)/137/index.php?main_page=index&cPath=23&zenid=80b29ee4c414f2fbf8146f6be279be17

I forgot to add in the last post, how is the background color change on every other listing done? METOOTECH

The code automatically adds tags for productListing-odd and productListing-even, so all you have to do is style those in your stylesheet:

.productListing-odd {background-color: #ccddff;}
.productListing-even{background-color: #ffffff;}

Thanks for the info Glenn... where should these codes be added to the style sheet? How should the background code above be added to the code at the top of this thread ? METOOTECH

Put these two lines in as is, not inside something else. For convenience, you can find the other productListing* declarations and put these in the same area.

Glenn thanks for this I have been trying to work this out for ages
chrisx

Thanks, from a CSS *and *Zen Cart newbie.

Worked a treat for my site! :thumbsup:

I was pointed to this thread just moments after figuring out another way to approach this problem...

This is what I did:
http://www.zen-cart.com/forum/showthread.php?t=71275

Is there a "which is better" issue here?

StoryBook

To some extent, each method is equally easy and certainly effective.
Editing tpl_tabular_display.php does mean that there is another file to manage during upgrades, and as Kim pointed out, it affects everything that uses it. That might indeed be fine, but I know that tpl_columnar_display is used for additional images in the product info page as well as elsewhere, so a tweak I needed for that had to be wrapped in a conditional statement to only execute there; I don't know for sure whether tpl_tabular_display is used anywhere beside the listings.

You noted using <td colspan="3"><hr /></td>, which I presume fits with three items you have displayed in product listings; but if you decide to have four items in listings, you would need to re-edit the file.

The stylesheet method covers any variation without special adjustment. Also, if you want anything beside the standard hr color/style/thickness, you would need to make a special declaration in the stylesheet anyway.

Hi, I would like to know how to make 3 items picture across the page please? My specials and new listings etc are showing this way but my products are down the page and all squashed. Can I make them display accross the page as the special are?
Thanks Kylie