Changing the background in pop-up images and windows

How would I go about changing the color of the background in pop-up image windows? Currently it's the background image of my main site, but I would really rather it be white: the current background looks very bad with the images.

I've tried

#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp, #infoShoppingCart {

    background-color: #ffffff;

    }
``` and ```
#popupAdditionalImage, #popupImage {
    margin: 0em;

    padding: 0em;

    background-color:#FFFFFFF;
    background-image:none;
    }
```in stylesheet.css, but it's not working. Where would I change the pop-up window background color?

Thanks in advance for your help.

The answer is in that stylesheet somewhere, I've changed the color before. But I would recommend you download and install the Zen Lightbox module (under "Other Modules"). It enlarges your picture without creating a popup window (which some people have turned off in their browsers anyway and so they get an error message), and it darkens the rest of the page. Real cool!

Anyway, you can easily change the background color in the module's stylesheet, or even set it to transparent. There are threads about the lightbox module you can lookup.

I have it setup on my site if you want to look. Click on a product page: http://www.tebreitenbach.com/store

...a popup window (which some people have turned off in their browsers anyway and so they get an error message)

Popups sent by the server get blocked, but popups from user interaction (clicking a link for example) should not cause this. That would destroy the interactivity of sites. I always browse with popups blocked and the Zen [click to enlarge] link works just fine.

As to the style issue, there are odd things happening there. My popups have the background colour of my main window, but only below the image. When I applied a different colour to the background of .popupImage it changed the colour beside the image but not below it. When I applied a 2em margin on all 4 sides of .popupImage my new colour showed only in a 2em wide border to the right and left of the image but not above or below it, though the image was pushed down. Most peculiar!

Try this...

#popupImage { 
	background-color: #ffffff;
	padding: 2em 2em 2em 2em; } 

Change the padding values until you force enough white space around the image to make the background invisible.

Rob

rstevenson

Rstevenson, what browser are you using? Internet Explorer 7 does block ZenCart pop-ups when the pop-up blocker is on. I noticed this problem in the past, and I just tried it again on someone's live Zencart to make sure I was not mistaken. The zen pop-up box was blocked. However, the Firefox browser pop-up blocker does not behave like this. It let the programs popup box come up.

I haven't browsed with IE for years. I only use it as a test case, so I didn't know it behaved like that. That gets added to the very, very long list of things that make me say "What were they thinking!?!"

All my Mac browsers show the Zen pop-up okay, including the venerable IE 5.2 (perhaps because you can't set it to block popups - LOL.)

Interestingly, Opera has the choice "block unwanted popups" as well as "block all popups". The Zen popup window works no matter which you choose.

Rob

The other thing about the zen pop-ups that bothers me is that if you click off a pop-up window without closing it, and then try to enlarge another product picture, it doesn't appear to come up. Of course it's only hiding behind the open page. It's never good to have customers think our sites are not working.

I wonder how many zencarters are aware of these problems, especially with the IE pop-ups being blocked. Most of the hits on my site come from IE browsers.

I'm not much with javascript, but I'm sure the script that displays the popup can be changed so the popup window is brought to the front when it gets a new image.

Any scripters out there?

Rob

I ended up using a 2500x2500 or so background image, aligned just so so that the cart edges look drop-shadowed. The middle part behind the store itself is white, and that's the part that shows up as the background in pop-up windows.

http://store.csionline.org

I found this in another thread:

background-image: none;

Works great for this!

paul3648:

I found this in another thread:

background-image: none;

Works great for this!

Ah! Thank you so much! I couldn't figure out why it was ignoring the color but I guess the default store background image takes precedence over the background color you set for popups. Thanks again!