Drop shadow & rounded border on main product image & product listing images only?

Hello everyone,

Hope we are all well :)

Does anyone know how to add a drop shadow and a rounded border to both the products main image and the product listing images only?

I have tried:

.centerColumn img {
border: 1px outset #EEEEEE;
border-radius:5px;
box-shadow: 1px 1px 1px #888888;
}

Which give the desired effect but also adds a shadow & border to all of the images that I have manually inserted into the category pages and product pages etc.

I have also tried:

a img {
border: 1px outset #EEEEEE;
border-radius:5px;
box-shadow: 1px 1px 1px #888888;
}

Which gives the desired effect to just about every image on the website, along with the logo picture!

My last attempt was:

#productMainImage{
border: 1px outset #EEEEEE;
border-radius:5px;
box-shadow: 1px 1px 1px #888888;
}

Which works perfectly, but does not give the effect for the product listing pages, obviously.

I have just tried:

#productListingImage{
border: 1px outset #EEEEEE;
border-radius:5px;
box-shadow: 1px 1px 1px #888888;
}

But this doesn't do anything.

Does anyone know the seperate classes or combined code to make the product listing and the main products image have a drop shadow and border (I only want these two types of images to feature the border & shadow).

Many thanks for any help :)

There are literally thousands of other things going on that can effect what you are looking at.

Please reply with some answers to the Posting Tips and a URL to your site.

*NOTE: Search engines index this Zen Cart® support site very quickly. Posting your URL will cause your site and your post to show up in search engines. If you want to prevent that, put spaces between each letter of the domain name in your URL.

Hello,

Thank you for your reply,

Website: www. t r e a s u r e s b y c a z .co.uk

I am normally able to sort problems myself but this one is seeming to be a bugger (no doubt a rather easy fix)

Many thanks :)

Area that I am currently working on is:

http://www.t r e a s u r e s by c a z.co.uk/personalised-christmas-gifts

Please note: I am currently changing images as the previous ones had a border already in place, which was manually put in via Photo shop. The images to look at are the ones that are not so bold with the border.

If you don't have it yet, get yourself a copy of Firefox with the Firebug add-on. It is an invaluable tool in sorting out such matters.

Let's take the image in your define_main_page for example.

The image is actually nested inside a div like:

indexDefaultMainContent

That (and the fact that there is no div that I can find defined as centerColumn) is munging things up pretty good. Without an actual centerColumn div, the browser is unilaterally applying the img attributes to all images.

The closer you can get to an image with a class or id declaration the better. If it's in the page content that you create, just add a div to control the items on the page. For instance, you could assign an opening div of #tresaMainPage and use that div to control items on the main page.

For specific control, try something like

.centerBoxContentsProducts>a>img, #allProductsDefault td>a>img {
border: 1px outset #EEEEEE;
border-radius:5px;
box-shadow: 1px 1px 1px #888888;
}
#allProductsDefault td>br+a>img { /*this removes border on the buy now*/
border: none;
box-shadow: none;
}
``` Add other selectors for any other listings where you want this effect.

gjh42 I'd love to do something like this to Specials and New Products on the Main Page (Centerbox) as well as additional Specials and New Product pages. The only difference is I'd like the border to be a bit larger than the image and perhaps a stronger drop shadow. What pixels should I start with and then I can tweak it for desired effect.

If I wanted to add all Product Listing Pages but not the Product Info Page, what would I do different?

What file does this go in? Sorry, still new at this.

All style rules go in your stylesheet (/includes/templates/your_template/css/stylesheet.css).
These selectors will get the centerboxes:
.centerBoxContentsNew>a>img, .centerBoxContentsFeatured>a>img, .centerBoxContentsSpecials>a>img {your styling;}

This will get the specials listing:
.specialsListBoxContents>a>img {your styling;}

For the new listing page, use the same setup as all products.
#newProductsDefault td>a>img {
border: 1px outset #EEEEEE;
border-radius:5px;
box-shadow: 1px 1px 1px #888888;
}

Curious, what if I had a .png of a border I liked.

Hello Dbltoe & Gjh42,

Just wanted to say a huge thank you for your response and would like to confirm that both of your techniques have worked out perfectly!

Am really please :hug:

Many thanks :)

Glad it's working for you!

Curious, what if I had a .png of a border I liked. CSS3 does include the ability to use an image for a border; it's not something I have used yet, so I don't have much to say on specific implementation. There is plenty of documentation online (search for css3 border image).

I'm using this code and was wondering if I could create a larger border around the image. I tried varying pixels on the border-radius, but nothing changed.

.specialsListBoxContents>a>img {
border: 2px outset #EEEEEE;
border-radius:5px;
box-shadow: 2px 2px 2px #888888;
}

I'd also like a space between the bottom of the border and the text description of the product.

http://designerperfumesnob.authsafe.com/

It worked when I tested it on your site.
Add margin-bottom to get space below the image:

.specialsListBoxContents>a>img {
border: 2px outset #EEEEEE;
border-radius:11px;
margin-bottom: 0.5em;
box-shadow: 2px 2px 2px #888888;
}

I cannot get the border any larger. I am going to look into applying solid lines around the entire image as well as the description creating a box. Thank you very much for your time.

What exactly are you doing to try to get the border larger? And what exactly do you mean by "larger"? Changing border-radius will only affect the curve of the rounded corners. If you want the border itself to be thicker, change border: 2px to border: 4px or whatever you want.
If you want the border farther from the image, add padding to the image rule.

gjh42:

What exactly are you doing to try to get the border larger? And what exactly do you mean by "larger"? Changing border-radius will only affect the curve of the rounded corners. If you want the border itself to be thicker, change border: 2px to border: 4px or whatever you want.
If you want the border farther from the image, add padding to the image rule.

That's it! That's what I was trying to do! Get the border farther from the image. It looks terrific! Take a peek if you like.

http://designerperfumesnob.authsafe.com/specials.html

Excellent help!