A black background shop?

[Bluesplayer]

Check this out in explorer:

Joomla design black background shop. (http://bluesplayer.co.uk/shop-online)

Using this code:

img {
background-color:#111;
filter:alpha (style=3, opacity=100);
opacity: 0.65;
}

to fade the images. The overall design is one from my Joomla installation.

The above code doesn't work for Firefox so I am adding background images to various parts. Hotpicks and related is already working ok in Firefox and Opera. Creating images from a print screen when using explorer. These will be used throughout the design. The product image, which alters in size, will have to be surrounded with borders somehow. Shouldn't be too hard to work out though.

[Nodge]

Hi, that looks good.

I have a site with a black background and I was thinking the photos in the hot picks section and the product listings look a bit stark against the black background so I'd love to try your code. Would your code work in Shop Window Client V2? I'm afraid I'm new to all this coding but I'm guessing that I would need to add it to the .sw_hotpicks section in the styles.css file, and also somewhere under the sw_product listing section in style.css. Trouble is I don't really know exactly where. Any chance you could spell it out for me?
Thanks
John
www.timegentlemenplease.co.uk

[Bluesplayer]

Hi

Yeah the effect is pretty neat. Pity it doesn't work in Firefox and Opera but there are solutions to that. If you view my site in either you can see that certain parts are already fixed for them.

The code below only needs to be added to your style.css. This will cause all images that are hard coded in the shopwindow to show in all browsers - Explorer, Firefox and Opera - faded, with the added bonus in Explorer of a very nice effect. I am manually creating background images and altering certain tpl files so that Firefox and Opera will also show a similar effect. Though once this is done there won't be any need for most of the code - unless I use a browser sniffer to show a different style.css for Explorer.

img {
background-color:#111;
filter:alpha (style=3, opacity=100);
opacity: 0.65;
}

The bottom opacity bit above causes the fade in Firefox and Opera, whilst the code above causes the effects in Explorer.

Just add it to your style.css to see the changes.

You could take this a step forward really with hover over effect on all the images showing an unfaded and slightly larger image. Should be quite easy to do too.

[Amoochi]

That effect on the images is interesting, but I have to say, i'm not very fond personally. It makes the product less visible, but not only that, it does the same effect on the merchant logos and pretty much every other image I saw, making the effect look seriously over used to me.

[Nodge]

Oh, that was so close to being just what I was looking for. The effect is a great improvement. The problem is I have an animated gif banner at the top and the effect has also been applied to this and pretty much hidden the left and right hand parts of it. It's also applied the effect to my "More Info" buttons which makes them look a little odd. But for some reason my search button escaped the effect altogether. I've left the code in place for now if you want to see what I mean. All way beyond me I'm afraid. Is there any way of applying the effect to just the photos in the hot picks and product listings?

Thanks again,

John

[Amoochi]

You could fiddle around with the number in the opacity: 0.65; and style=3 to adjust how much the effect adjusts the images to see if you could get it to your own liking...

I would have said some kind of external image effect would have been better personally though, so that the white actually blends into the page/table/cell backgrounds, rather than the black colour bleeding into the images themselves. It would be way more time consuming and fiddly to achieve though of course.

[Bluesplayer]

Hi

To apply individual styling to just the hotpicks you remove the overall img code (leave it like below for faded images in Firefox):

img {
opacity: 0.65;
}


and apply it to individual styling such as just the hotpicks span styling like this:

.sw_hotpicks span, .sw_similar_products span {

filter:alpha (style=3, opacity=100);
float: left;
width: 80px;
height: 80px;
}

This will produce a much lighter effect on the Hotpicks but will cause the other images in shopwindow to be white again in explorer. By adding the initial code to all the images again will produce a very dark hotpicks image. I am working on background images and have setup a faded background test page here:

Faded images (http://bluesplayer.co.uk/test/image_fade.htm)

There are 3 effects in use on the page. You can apply either by altering the style=3 to either 1 or 2. I think background images are to the way to go, or shadowing which will be less aggressive, so that all browsers are catered for. I should have this sorted today. Keep an eye on the Faded images test page.

[Nodge]

Ok, the Hot Picks section is now sorted. I was trying to see where to place the code for the product listing photos (ie. what you get when you've done a search for something). I thought the mostly likely place was under .sw_productphoto so tried it there but it had no effect. I then tried it under the .sw_productlist entry but then I got the shading effect applied to the whole section rather than just the indiviual photos. Any ideas?

Thanks again,
John