border for product listing

Hi all,

i want to add a border around each product under my product listing. I am using column display and did a mod to make it show in grid. i tried adding the following css codes:

.productListing-data img {
border: 1px solid #000000
}

this did nothing and

.listingProductImage {
border: 5px solid #4d4d4d
}

which only bordered the image and not price/description

anyone please help me!! thanks~ i need the grid to show in fix dimension, every grid 1 product

starry89:

Hi all,

i want to add a border around each product under my product listing. I am using column display and did a mod to make it show in grid. i tried adding the following css codes:

.productListing-data img {
border: 1px solid #000000
}

this did nothing and

.listingProductImage {
border: 5px solid #4d4d4d
}

which only bordered the image and not price/description

anyone please help me!! thanks~ i need the grid to show in fix dimension, every grid 1 product

Hey i was about to ask almost the same question!
hope someone will help. Thanks

Something like this should get you started:

.centerBoxContentsProducts {
border:1px solid;
}

wonderful mate!! thanks alot for your help! =DDDDDDDDD

thanks!

hi there,

now that my store got a border already, however when i add more products in, i notice that different sizes of image actually affects the layout, IE bigger image will generate a bigger border.

are there solutions for this? can i use image handler to solve tis problem?

thanks

stevesh:

Something like this should get you started:

.centerBoxContentsProducts {
border:1px solid;
}

Hi - I think this is what I need also as my product spacing when you click on the category does not make things looks too clear i.e. is the add to cart box for thr product image above or below? I know but customers may not without scrolling and checking. A box around the product image/price/code/add to cart button would be great, but if this is what this code does which page do I add it on?
thx

The statement would be added to your stylesheet.css file.

If you'll post a link to your site, we may have other recommendations.

Thanks - I worked out to add it to css sheet (mainly due to husband saying duh it goes in the stylesheet), but this creates a large box around everything as well as all the blank space either side of the product listing - is there a way to create a box just around the image/add to cart/price etc? e.g. adjusting the overalll size of the box so its more or less only as wide as the image?

As you can see from screenshot below its hard to tell which product the Add to Cart refers to and my husband who normally deals with all php and css stuff cannot work out how remove the extra spaces between price, product name, add to cart box etc so that they are all directly underneath each other under the relevant image (as the bottom image shows). Failing that some spaces after the add to cart box or a box around the image and related info should make it clearer which price/add to cart box relates to which product and would generally make it look neater. I checked in my zencart manual and searched forum but cant work this out. Any help appreciated.

As it is now:

In an ideal world:

Sorry, cant edit previous post.

The box around the product details I was refering to was something along the lines of this: http://templates.entheosweb.com/template_number/13600/13655-z-b.jpg or this: http://www.hosting22.com/site/upload/content_images/2008/1023/1525_lg20061210070257108osc.jpg
But it would still be in columns instead of rows as these websites have (I have no connection with these sites but they give an idea of what I am trying to do. The first example with the bevelled edge etc would be perfect if it can be done (these were found under search for zencart shops so looks like it is possible).