Spacing between product images

I need help because I have been at this for ages.

I have read what is posted at the following links:
http://www.zen-cart.com/forum/showthread.php?t=55335
http://www.zen-cart.com/forum/showthread.php?t=46461
http://www.zen-cart.com/forum/showthread.php?t=38081

but cannot figure out where to go. I am using the classic template and have gone through the stylesheet at includes/templates/classic/css but cannot find anything to do with .productListing (Maybe I'm blind :down: )

Am I in the right place. I know basic html but have never used stylesheets so maybe I am in the wrong folders. I am almost finished setting up but this is the one I'm really having a problem with.

Are you using a good text editor with search function?
I find Notepad++ to be excellent for editing CSS & PHP files, with line numbers, color coding and error detection built in.

Alternatively, many classes and IDs are called in the HTML, but not given definitions in the stylesheet. They are provided as handy tags for users to add styling if they wish. If you don't find a tag in the stylesheet, you can just add it for yourself.

this will do most of what you want and you can adjust the values as you wish

.productListing-data {
padding-top: 15px;
padding-bottom: 15px;
padding-right: 15px;
margin-right:1.5em;
border-bottom: 1px solid black;
}

Legend!!!!!

kobra:

this will do most of what you want and you can adjust the values as you wish

.productListing-data {
padding-top: 15px;
padding-bottom: 15px;
padding-right: 15px;
margin-right:1.5em;
border-bottom: 1px solid black;
}

 
So, I tried the above on my stylesheet and nothing changed. I'm confused. I'm trying to change the spacing between product images once someone has clicked into a category. The images are jammed together on top of one another. Would anybody mind helping? Perhaps I've inserted the above code in the wrong place. Or maybe I misread this forum. Any help would be greatly apprecitated. Thanks.
 
cris

I have the same problem,

But when i look at this style sheet info
.productListing-data {
padding-top: 15px;
padding-bottom: 15px;
padding-right: 15px;
margin-right:1.5em;
border-bottom: 1px solid black;
}
I would thinkthere should really be some space (15 ox?) between the products.
you might try to change Border bottom to 10 px and another color then your background?
Pleas tell if this works for you?

I did get it to work. I'm not sure what made the difference, to be honest. I'm sure it was user error, initially, but it's working now.

Thanks for the suggestion, though. I apprecite it.

BEAUTY!!! Thank you soooo much!!!:hug:

kobra:

this will do most of what you want and you can adjust the values as you wish

.productListing-data {
padding-top: 15px;
padding-bottom: 15px;
padding-right: 15px;
margin-right:1.5em;
border-bottom: 1px solid black;
}

Hi, is is possible to change the solid black colour?  I have tried several things but can't alter it.

Thank you

What do you want to change it to?

Hi, I would like the colour to be #525d7d

If you know the color # you want, just replace "black" with that.

border-bottom: 1px solid #525d7d;

If you still have a problem, I'll need more details of what you are doing.

Thank you it worked - I'd tried all sorts of things but left the word 'solid' in for some reason so that's where I was going wrong.
:smile:

Well i guess i'm a little confused my stylesheet looks like this for productlisting-data where are you supposed to put the information you are saying to add.

.centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay,

You want to move .productListing-data out of the rule you mention and into its own where you can customize it without affecting other elements.

.centerBoxHeading,.rightBoxHeading, .accountQuantityDisplay, etc. {
}

.productListing-data {
/your custom styling/
}

.productListing-data {
padding-top: 15px;
padding-bottom: 15px;
padding-right: 15px;
margin-right:1.5em;
border-bottom: 1px solid white;
}

I have added this to my site to space products and it works thanks

beadinspired2.com

BUT I am not sure what I did.

I have black lines on the NEW/Specials/Feaured sections.

And no black lines in the rest of the site in categories.

I would rather the black lines gone. Have I put the code in two places? I have looked everywhere and can't find it anywhere except in my lavender template?

I have used the tool in admin to search for it and I cant find it.

HELP Please !

The black lines are from something else entirely. Add to your stylesheet

#newProductsDefault td>hr, #featuredDefault td>hr, #allProductsDefault td>hr {border-color: #ffffff;}

You don't have the borders in the specials listing.

OK thanks ;p Off on holidays so won't attack it till I return !

kobra:

this will do most of what you want and you can adjust the values as you wish

.productListing-data {
padding-top: 15px;
padding-bottom: 15px;
padding-right: 15px;
margin-right:1.5em;
border-bottom: 1px solid black;
}

I pasted it on line 1146 of the style sheet
worked perfect!! you rock!