Product List - Spacing issue

I hope I am placing this question in the right place... I have read and re-read until my eye's hurt... so I am going to ask this one question.

Where/what file is it that I need to modify and where in that file to increase the space between the images displayed on the product list page.

I would like to increase the size of the images and I know to do that in Admin, but when I do that the product list page gets all funky so I would like to try and fix that.

Here is a link to the site http://www.stuffedpretzel.com/store/index.php?main_page=index&cPath=1 - Notice how close the images are???

Please be gentile, I am so green at this... have been working on it for days... guess you could say I am a Donkey on the edge... Shrek!

Thanks for you help

Add to your stylesheet

.productListing-data {padding: .8em .3em;}

Adjust to your liking.

This can be controlled with the css styles in the stylesheet.css file for your template that is currently "classic" and you ahould create your own but that is another subject:

Search and Find this tag in stylesheet.css or add it if you do not find it, if it is there and nested with other tags seperate it out into it's own entry and adjust the padding value to suit

.productListing-data {
padding-bottom: 3em;
}

Note: the second value in

padding: .8em .3em;

is for left and right sides, and will give you some breathing room between your text and image.

And yes, you want to make your own template folder so your hard work doesn't get erased when you upgrade to the next version of Zen Cart.

Thanks much! I am off to play around

Giddy Up! that worked perfectly... ok so one more quick question and I think I am done.

Where would I set the description margin... so that it doesn't push the right sideboxes off the page?

http://www.stuffedpretzel.com/store/index.php?main_page=index&cPath=1

Thanks so much for your help today you guys are awesome!

Ohhhh... I figured it out! Thanks.

For general enlightenment...
I had noticed that earlier. The immediate cause of the description pushing the right sideboxes out was a long unbroken string of letters typed in as a placeholder. By default, the description will be sized to fit in the space available, but a long word can mess that up.

...or was it? It might have been another site I saw that particular problem on today :)

Yes it was: jkfldjslkfjd;lskaflsdja;lkjfdlskjflkdjs;alkjfdlskjflfkdjslfkjdlskjflksdjlfk

;)

Hi,

I tried adding the snippet css code to my stylesheet (and increased the padding values) but it does not work. The images are still very close together.

Cab you please help me?

Hansi

hansi,

Post your url

Hi Kobra,

Thanks for responding to my query. I am testing the code on a local machine so I can post you the stylesheet, a screenshot of the product listing page, (and any php pages you need) instead?

Regards,

Hansi

Transfer it to a hosting account

Hi Kobra,

I have finally managed to transfer it to a hosting account.

Here is the URL:

As you can see there is no horizontal spacing at all between the 4 product images (e.g. Accompanied Visits, Filling-in forms, etc.).

I tried different combinations for the css code to increase the horizontal spacing. Here is one combination:

.productListing-data {padding: .8em .3em; padding-bottom: 3em;}

Thanks in advance for your informative help,

Hansi

Kobra: I tried now and it works so please ignore my previous message.

thanks,

HAnsi

Thanks for the info previously given in this post - just what I've been searching for for the past few days!!

Another question about a similar issue: how do I put a thin line between the various product items to further distinguish where one ends and the next one begins (such as would be done with the <HR> tag in HTML)?

Or, as an alternative, how can I use a different color background for each item (including photo and all text related to the item), as I could do in a table? An example of what I mean can be found at:
http://www.casadobosque.pt/index.php?main_page=index&cPath=34&zenid=5d7ec2e2977da164fb53e9c98bcfc8f1

Thank you in advance!

Laura

Ahroo,

And your url to this page is?? Not an example but your site

My site is http://www.createdbygayle.com/zencart

Thanks.

Try adding this to your stylesheet and adjust to suit:

.productListing-data {
        padding-top: 3.5em;
        border-bottom: 2px solid #000000;
        }

.productListing-odd, .upcomingProducts-odd, .productFeatured-odd {
        background: #9a9a9a;
        }

.productListing-even, .upcomingProducts-even, .productFeatured-even, .productsNotifications {
        background: #FFFFFF;
        }

Both of these questions are answered in the Adding space in between items thread.

Ninja'd! That's what I get for having several threads open and answering in order! :)