Transparent .png file in IE with Dragonfly?
Go to page 1, 2, 3  Next  :| |:
-> Themes

#1: Transparent .png file in IE with Dragonfly? Author: Shade2074 PostPosted: Fri Oct 28, 2005 2:52 am
    ----
Hello, I'm not sure if this is possible or not but here goes...

I'm working on a theme based on the cpgnuke theme and would like to use a png format logo. Now the problem is, while it looks beautiful with firefox - IE butchers it with their shotty code. To try to overcome this flaw with IE - I tried using the same method I do with a standard html web page (in fact it works very nicely on my introduction page). But when I put it in the header html it doesn't seem to work.

this is the code I added to the header.html
PHP:
img { behavior: url("pngbehavior.htc");}

This is the code in the pngbehavior.htc

Code::
public:component lightWeight="true">
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<public:attach event="onbeforeprint" onevent="beforePrint()" for="window"/>
<public:attach event="onafterprint" onevent="afterPrint()" for="window"/>
<script>

/*
 * PNG Behavior
 *
 * This script was created by Erik Arvidsson (http://webfx.eae.net/contact.html#erik)
 * for WebFX (http://webfx.eae.net)
 * Copyright 2002-2004
 *
 * For usage see license at http://webfx.eae.net/license.html
 *
 * Version: 1.02
 * Created: 2001-??-??	First working version
 * Updated: 2002-03-28	Fixed issue when starting with a non png image and
 *                      switching between non png images
 *          2003-01-06	Fixed RegExp to correctly work with IE 5.0x
 *          2004-05-09  When printing revert to original
 *
 */

var supported = /MSIE ((5\.5)|[6789])/.test(navigator.userAgent) &&
				navigator.platform == "Win32";

var realSrc;
var blankSrc = "blank.gif";
var isPrinting = false;

if (supported) fixImage();

function propertyChanged() {
	if (!supported || isPrinting) return;

	var pName = event.propertyName;
	if (pName != "src") return;
	// if not set to blank
	if (!new RegExp(blankSrc).test(src))
		fixImage();
};

function fixImage() {
	// get src
	var src = element.src;

	// check for real change
	if (src == realSrc && /\.png$/i.test(src)) {
		element.src = blankSrc;
		return;
	}

	if ( ! new RegExp(blankSrc).test(src)) {
		// backup old src
		realSrc = src;
	}

	// test for png
	if (/\.png$/i.test(realSrc)) {
		// set blank image
		element.src = blankSrc;
		// set filter
		element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft." +
					"AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
	}
	else {
		// remove filter
		element.runtimeStyle.filter = "";
	}
}

function beforePrint() {
	isPrinting = true;
	element.src = realSrc;
	element.runtimeStyle.filter = "";
	realSrc = null;
}

function afterPrint() {
	isPrinting = false;
	fixImage();
}

</script>
</public:component>

I also remembered to upload the blank.gif file.

Is it not working because the theme is calling the logo.png using a variable (images/{S_LOGO})instead of a direct link to the png logo?
Code::
'S_LOGO'       => $site_logo,
Or maybe I just placed the files in the wrong directory (though I put the blank.gif and the pngbehavior.htc file in all the image directorys including the root...
So far nothing has worked. I have tried clearing both my local cache and the hosts cache folder - still no go.

Does anyone have any suggestions?

Just in case it helps here is my header.html code as well:

PHP:

#2: Re: Transparent .png file in IE with cpgnuke? Author: Shade2074 PostPosted: Fri Oct 28, 2005 2:29 pm
    ----
note: after clearing my local browser cache and my
host cache, I discovered that adding that one line of
code effectively removed all ping images from my
site. Shocked the above method definitely did NOT work.
lol

Looks like I'm stuck using .gif for my logo. It's too
bad =( the png image just looks SOOO much better than
the gif image. But I can't expect all my visitors to
convert to firefox (or can I mwhahahahahahahaha -
sorry insane moment there...)
=S

I'm assuming there really isn't a way to easily
accomplish this using cpgnuke or it would have been
one already. I just figured it couldn't hurt to put
he question out there to see what we get.

#3: Re: Transparent .png file in IE with cpgnuke? Author: xfsunolesLocation: Melbourne, Florida PostPosted: Fri Oct 28, 2005 4:21 pm
    ----
WAIT, did you clear cache dir from the server except htaccess?

#4: Re: Transparent .png file in IE with cpgnuke? Author: Shade2074 PostPosted: Fri Oct 28, 2005 4:34 pm
    ----
I cleared all visable files in the cache directory (I
assume that would include .htaccess as well) I
removed the line of code I added and everything
worked as it had before but I then uploaded the original .htaccess.

I wasn't able to get the transparent.png file to work
however. I swapped out the png file for a gif version
of the same logo - it just doesn't look as nice is
all.

EDIT: I just went back to check, it appears
that with WS_FTP the .htaccess file is not visable
with my current settings, so I guess I just over
wrote it when I uploaded again.

#5: Re: Transparent .png file in IE with cpgnuke? Author: PhoenixLocation: Netizen PostPosted: Fri Oct 28, 2005 8:12 pm
    ----
dragonflycms.org/Forum...t=971.html

Failing that, you'll just have to make do with 8 bit png images which will show correctly in IE.

In WS_FTP, and many other ftp clients, you often need to set the LIST command "LIST -al" to make files like .htaccess visible - there is usually some option you can configure to do this.

#6: Re: Transparent .png file in IE with Dragonfly? Author: Shade2074 PostPosted: Fri Oct 28, 2005 10:14 pm
    ----
Thank you for the reply, The good news is that it seems seems there is some kind of fix out there somewhere the bad news is that in this case at least the solution died with the web page that article linked too. Embarassed

When I get a little bit of time, I may look at the rest of his article though and see if I can adapt his method with the method I'm using now to see if I'm able to get it to work. I haven't tried png-8, but I assume it wouldn't be much better than using a gif in terms of appearances is that correct? I could modify my logo image to use less colors I suppose but I have a feeling it still wouldn't look right.

Still though, thank you for the link, I may still be of some use! Smile

#7: Re: Transparent .png file in IE with Dragonfly? Author: Shade2074 PostPosted: Fri Oct 28, 2005 11:13 pm
    ----
uggg code changed a lot since then hehe. Oh well thank you for trying. =)

#8: Re: Transparent .png file in IE with Dragonfly? Author: NEMINI PostPosted: Fri Oct 28, 2005 11:24 pm
    ----
why use a transparent background at all?

#9: Re: Transparent .png file in IE with Dragonfly? Author: Shade2074 PostPosted: Fri Oct 28, 2005 11:43 pm
    ----
NEMINI wrote:
why use a transparent background at all?

It's not for the background image - it's for the logo
image to my family website. I'm using a logo.gif
right now, however because gif doesn't support very
many colors (when compared to png-24) it doesn't look
as nice as my logo.png

The logo itself is just a tree with the site name on
it. When the logo is placed on my website (in this
theme I'm working on) it makes the tree appear to be
growing on a green field. The .png file makes the
words in the logo appear to have a nice misty sort of
glow - the .gif file made it look like splattered
paint. I assume this is due to the lack of colors
using .gif.

So the need for transparency is just to make the logo
look nice in the theme setting. I suppose I could
just make one really large logo image, but not
everyone has a fast Internet connection - a few of my
family members still use 14.4 modems. Shocked

#10: Re: Transparent .png file in IE with Dragonfly? Author: NEMINI PostPosted: Fri Oct 28, 2005 11:48 pm
    ----
why one huge image? just put all the layers together so you don't have need of any transparancies, then slice them into smaller images to improve load times.

#11: Re: Transparent .png file in IE with Dragonfly? Author: Shade2074 PostPosted: Fri Oct 28, 2005 11:59 pm
    ----
I think I may have lost you on this one but you DO
have my attention! Embarassed I'm not entirely sure what
you mean? Are you saying to use html type layers in
my theme? Wouldn't the big blue background that IE
makes with my png files still appear even with layers?

I guess now would also be a good time for me to
mention that I am very very new to creating themes
(I guess you could say I'm learning on the fly here).
After reading a few posts I thought maybe the cpgnuke
theme would be the best one to try and learn with. If
it's a complex solution, I'm willing to give it a go,
but you might have to be patient with me...
Embarassed

#12: Re: Transparent .png file in IE with Dragonfly? Author: NEMINI PostPosted: Sat Oct 29, 2005 12:16 am
    ----
I didn't mean layers as in html, I meant graphical layers. creat the image just as you see it in your theme after it is fully loaded then slice the images into peices. the PH2 theme is a good example of a theme that uses a sliced image for the header.

#13: Re: Transparent .png file in IE with Dragonfly? Author: Shade2074 PostPosted: Sat Oct 29, 2005 12:41 am
    ----
If it's not too much trouble would you mind pointing
me to the ph2 theme?

I think I have an idea of what you mean now but that
brings about another possible problem that I had when
I did the theme for my guild website. It looked great
when I viewed it with my desktop's resolution, but
when I looked at it using my notebook computer it
didn't stretch so nicely.

I might be able to do sort of a combo of the two if I
can get the repeating part of the background to line
up perfectly with the logo.png I would make. Is that
what you mean?

#14: Re: Transparent .png file in IE with Dragonfly? Author: NEMINI PostPosted: Sat Oct 29, 2005 12:57 am
    ----
www.dragonflycms.no/in...vtheme=PH2 for the PH2 theme. The header may look like one large image but its actually 8 or so images sliced from one large original.

I too do not like the the choices for transparencies so I 'merged' my logo and my header background into one image instead of a transparency over top of the header background.

Again, my header is much simplier then yours but it works as a proof of concept

This is what I use instead of a transparent logo on top of the header background:


repeated to fill the space to the right:


End result: [url=http://nemini.org/index.php?prevtheme=cpgnuke]HERE[/img]

#15: Re: Transparent .png file in IE with Dragonfly? Author: MysticLocation: Spokane, WA USA PostPosted: Sat Oct 29, 2005 1:08 am
    ----
Read this (second to the last post on that page) for another possible idea.



-> Themes

All times are GMT

Go to page 1, 2, 3  Next  :| |:
Page 1 of 3