Support ⇒ Themes :: Archives ⇒ Transparent .png file in IE with Dragonfly? :: Archived ⇒ Community Forums ⇒ CPG Dragonfly™ CMS

Archived :: Transparent .png file in IE with Dragonfly? Revive this topic

Go to page 1, 2, 3  Next
Author Message
Shade2074
Nice poster
Nice poster

Offline Offline
Joined: Sep 24, 2005
Posts: 127
Post
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
img { behavior: url("pngbehavior.htc");}

This is the code in the pngbehavior.htc

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?
'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:



Shade2074's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
(Test Server Specs) CMS Version 9.0.6.1 / PHP Version 5.0.5 / MySQL Version 4.1.14-nt apache 2.0.54-win32-x86-no_ssl
View user's profile Visit poster's website
Shade2074
Nice poster
Nice poster

Offline Offline
Joined: Sep 24, 2005
Posts: 127
Post
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.


Shade2074's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
(Test Server Specs) CMS Version 9.0.6.1 / PHP Version 5.0.5 / MySQL Version 4.1.14-nt apache 2.0.54-win32-x86-no_ssl
View user's profile Visit poster's website
xfsunoles
XHTML Specialist
XHTML Specialist

Offline Offline
Joined: Apr 30, 2004
Posts: 2502
Location: Melbourne, Florida
Post
WAIT, did you clear cache dir from the server except htaccess?


xfsunoles's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
Apache/1.3.34 (Unix)/4.0.25-standard/4.4.1/CVS
View user's profile Visit poster's website AIM Address Yahoo Messenger Photo Gallery
Shade2074
Nice poster
Nice poster

Offline Offline
Joined: Sep 24, 2005
Posts: 127
Post
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.


Shade2074's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
(Test Server Specs) CMS Version 9.0.6.1 / PHP Version 5.0.5 / MySQL Version 4.1.14-nt apache 2.0.54-win32-x86-no_ssl
View user's profile Visit poster's website
Phoenix
• Many Posts •
• Many Posts •

Offline Offline
Joined: Apr 19, 2004
Posts: 8840
Location: Netizen
Post
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.

_________________
DonationsPro for DragonflyCMS & SMF

Phoenix's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
View user's profile Photo Gallery
Shade2074
Nice poster
Nice poster

Offline Offline
Joined: Sep 24, 2005
Posts: 127
Post
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


Shade2074's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
(Test Server Specs) CMS Version 9.0.6.1 / PHP Version 5.0.5 / MySQL Version 4.1.14-nt apache 2.0.54-win32-x86-no_ssl
View user's profile Visit poster's website
Shade2074
Nice poster
Nice poster

Offline Offline
Joined: Sep 24, 2005
Posts: 127
Post
uggg code changed a lot since then hehe. Oh well thank you for trying. =)


Shade2074's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
(Test Server Specs) CMS Version 9.0.6.1 / PHP Version 5.0.5 / MySQL Version 4.1.14-nt apache 2.0.54-win32-x86-no_ssl
View user's profile Visit poster's website
NEMINI
Diamond Supporter
Diamond Supporter

Offline Offline
Joined: Apr 22, 2004
Posts: 4551
Post
why use a transparent background at all?

_________________
NEMINI.org, NEMINI.us, NEMINI.info, NYMINI.org

NEMINI's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
1.3.34 (Unix)/4.1.18-standard/4.4.2 /9.1.0.8 CVS
View user's profile Visit poster's website Photo Gallery
Shade2074
Nice poster
Nice poster

Offline Offline
Joined: Sep 24, 2005
Posts: 127
Post
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


Shade2074's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
(Test Server Specs) CMS Version 9.0.6.1 / PHP Version 5.0.5 / MySQL Version 4.1.14-nt apache 2.0.54-win32-x86-no_ssl
View user's profile Visit poster's website
NEMINI
Diamond Supporter
Diamond Supporter

Offline Offline
Joined: Apr 22, 2004
Posts: 4551
Post
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.

_________________
NEMINI.org, NEMINI.us, NEMINI.info, NYMINI.org

NEMINI's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
1.3.34 (Unix)/4.1.18-standard/4.4.2 /9.1.0.8 CVS
View user's profile Visit poster's website Photo Gallery
Shade2074
Nice poster
Nice poster

Offline Offline
Joined: Sep 24, 2005
Posts: 127
Post
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


Shade2074's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
(Test Server Specs) CMS Version 9.0.6.1 / PHP Version 5.0.5 / MySQL Version 4.1.14-nt apache 2.0.54-win32-x86-no_ssl
View user's profile Visit poster's website
NEMINI
Diamond Supporter
Diamond Supporter

Offline Offline
Joined: Apr 22, 2004
Posts: 4551
Post
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.

_________________
NEMINI.org, NEMINI.us, NEMINI.info, NYMINI.org

NEMINI's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
1.3.34 (Unix)/4.1.18-standard/4.4.2 /9.1.0.8 CVS
View user's profile Visit poster's website Photo Gallery
Shade2074
Nice poster
Nice poster

Offline Offline
Joined: Sep 24, 2005
Posts: 127
Post
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?


Shade2074's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
(Test Server Specs) CMS Version 9.0.6.1 / PHP Version 5.0.5 / MySQL Version 4.1.14-nt apache 2.0.54-win32-x86-no_ssl
View user's profile Visit poster's website
NEMINI
Diamond Supporter
Diamond Supporter

Offline Offline
Joined: Apr 22, 2004
Posts: 4551
Post
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]

_________________
NEMINI.org, NEMINI.us, NEMINI.info, NYMINI.org

NEMINI's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
1.3.34 (Unix)/4.1.18-standard/4.4.2 /9.1.0.8 CVS
View user's profile Visit poster's website Photo Gallery
Mystic
Diamond Supporter
Diamond Supporter

Offline Offline
Joined: Jun 25, 2004
Posts: 1324
Location: Spokane, WA USA
Post
Read this (second to the last post on that page) for another possible idea.

_________________
- |\\/|ystic

Mystic's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
Ubuntu 14.04.1/Apache 2/5.5.38/5.5.9/9.4.0.0
View user's profile ICQ Number AIM Address Yahoo Messenger
Display posts from previous:
All times are UTC
Go to page 1, 2, 3  Next
Post new topic Revive this topic Forum IndexThemes
Page 1 of 3