PNG Background problem

[corewin]

HI,
I know this is gonna sound stupid but,
I just installed joomla and when i go to change any png file its discolored
I used photoshop and tried saving it different ways but it doesn't match the background even though it looks like it should
any suggestion?

[RussW]

The PNG files are transparent, under IE6 and below the transparency is not translated, if you modify the files and either the application cannot manage transparent PNG's or the file is saved without transparency then yu will normally see "odd" colours for backgrounds.

[saetveit]

If you are, in fact, saving the png's properly and maintaining transparency, then you can use a javascript fix to allow IE 5.5 and 6.0 to render the images correctly. 

Google:

transparent png ie

to find some descriptions about how to implement the solution on your site.

[AmyStephen]

Might want to give JoomlaWorks Ultimate PNG Fix Plugin a try. It's offered to the community free as in beer and liberty.  (Thanks Fotis! )

[brian]

I tried that recently and sadly it had some undesired effects.

Instead I used this technique which I found at rockettheme

Stage 1 create an additional css file called template_ie.css

Stage 2 duplicate the lines from your main css file that refer to the png into the new file

Stage 3 edit those references so that they look similar to

tag {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale');
}

Stage 4
edit your template index.php to include

/templates/getTemplate(); ?>/css/template_ie.css" rel="stylesheet" type="text/css" />

More info at http://alistapart.com/stories/pngopacity/

[AmyStephen]

Thank Brian!

[saetveit]

Brian, what undesired effects did you notice?  I'd like to look out for them.  I didn't know of this plugin, so I'm going to give it a shot.

[brian]

It totaly distorted some of the images.was pretty obvious

[vanganh]

Hi all,
I did met that problem like corewin and I think I did fixed if you work with Macromedia Firework.
1.Open your image (.png file that you created)
2. Open the Optimize window(panel): Choose Window/Optimize (or press F6 to open it).
3. In the Optimize window(panel..), you may choose the parameters follow this:
    - Export file format: select the PNG8 (default is GIF)
    - Mate: transparent (the white square with the cross red-line
    - Type of transparency: select the Index Transparency (default is: Alpha Transparency)
4. Export the .png file you created --> it will create a new .PNG file for you. U may use this file.

That's what I've done and it worked fine.
Cheer, ^^

[Basetballjones]

PNG fix was a no go for me in the same way- distorting images width-wise.

The rocket theme solution is tres-chic, leave it up to those guys to make you feel wise just by copying and pasting something

and yes, for some reason - using the fireworks method works, even in IE6- actually it will make transparencies work in Microsoft Picture and fax viewer, and it's not supposed to show transparency but a white background.  I think it has to do with FW's method of applying index transparency at a ratio to the actual white of the background- sometimes if your image contains a lot of whit, setting index transparency will cause the white of your images to become transparent as well as the background.  I've never really nailed down a rhyme or reasoning why it reacts in such a way.

The rocket theme version is the most preferred method I've seen as it allows you to create png's normally with no added optimization, and when you have tons of custom images like my site, this is a factor.

[bagannat]

I got one problem after installing plugin. It's ok on Internet Explorer. But not in FireFox. I use education template from joomla works. When I explore my web-site from Firefox. It is not display properly.

this is my site address. http://www.chindwinseezar.com/cdc

please suggest me and help me. What should I do with it.

B.Regards