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

[spiggles87]

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 :)

[dbltoe]

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.

[spiggles87]

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 :)

[spiggles87]

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.

[gjh42]

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.

[traytray]

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.

[dbltoe]

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

P

a

img

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.