By Cromicon on

Hi
I hope someone can help me with this. I have recently installed the "fancy" theme for 4.6 and wanted to change the logo. The logo he had was a transparent png and it looked ok but my transparent png's don't work. Maybe it's a different format I'm using. Either way it's the only transparent png I have.

Anyway, I looked into this and found there was an issue with IE not rendering transparent PNG's correctly. I also found a solution but I'm not quite sure how to best implement it.

I need to insert some code into the head section of every page (it calls up some javascript). The potential solution is detailed here: http://homepage.ntlworld.com/bobosola/pnghowto.htm

What would be the best way to do this? Would I need to edit the theme files or the drupal files? Or both? And which files should I edit?

Thanks in advance! :-)

⋅ Categories: Drupal 4.6.x

Comments

paranojik’s picture

paranojik commented

I'm not sure, but I think for that solution to work, you have to specify the < img> width and height attributes (for transparent PNGs). You should edit the theme files, probably "page.tpl.php" if you are using PHPtemplate.

Cromicon’s picture

Cromicon commented

Adding the code into page.tpl.php worked fine, I didn't add the height or width values as an experiment and it worked.

Now I can see transparency working in both Firefox 1.5 (which supports it anyway) and IE 6 (which didn't).

Site is at www.walkerstalk.com and still very much under construction with test posts and assorted ramblings of an idiot if you want to view the source.

Many thanks for the pointer. :-)

freehunter’s picture

freehunter commented

The best way to add tranparent images is GIFs. No hacking, and works cross platform.

paddy_deburca’s picture

paddy_deburca commented

A List Apart (http://www.alistapart.com/articles/pngopacity/) has an article about this.

It is a well know issue and can be 'resolved' with a bit of help from msdn - namely http://msdn.microsoft.com/workshop/author/filter/reference/filters/alpha...

I have never tried it - but the artile on A List Apart seems to show that it works.

Paddy.

http://deburca.org, and http://amadain.net

Paddy.

http://deburca.org

rolfington’s picture

rolfington commented

I can see that this thread is a few month old but I hope it's still active since I have problem using the bobosola solution.

First of all, you can always use the dedicated drupal function to insert extras into the header, i.e.:

drupal_set_html_head('

');

And then insert the call in a hook that will be called on every page load.

However, when I did this with the bobosola script I faced a new problem. At first everything seemed to be perfert the png transparent colors were transparent in my IE browers and I was dancing on the floor :-) Sadly, this dance only lasted until I hit the F5 button (refresh)....

Suddenly the page wouldn't load all the png files. I could see the images on the page but the botom said "x items remaining" forever. I looked for a solution on the net and finaly found a solution on www.experts-exchange.com... after paying $9.95!!!

Long story short, moving the

down to the bottom of the page makes it better. Occasionally, you will still run in to the problem but if hit F5 a coulple of times the page will be loaded completely. Seems odd though, as I understood it, defer was supposed to load the script AFTER the page loads. So why does it matter where in the page the line is at? My guess is that it is a bug in IE, any suggestions?

BTW: I haven't found a drupal function to add html at the bottom of the page, so I had to insert it manually in the page.tpl.php after the tag.

konsumer’s picture

konsumer commented

If you just want to change the logo to not be a PNG:
http://drupal.org/node/57005

The problem is with semi-transparency, not just transparency. 1-bit transparency PNGs (look like GIFs, but better compression) actually work just fine.

PNGs allow you to do cooler stuff, though, like shadows that look real on different background colors, or patterns over BG-color, so you can reuse background images, with several different colors.

Here are some solutions for getting them to work in IE:

http://drupal.org/project/pngfix

You can also do a drupal_add_js( path_to_theme().'/yourpngfix.js','theme'); in your theme's function _phptemplate_variables page hook:

first download this and put it your theme dir:
http://www.campbellsdigitalsoup.co.uk/wp-content/uploads/2008/01/jquery_...

(in template,php)

function _phptemplate_variables($hook, $vars) {
  if($hook == 'page'){
    drupal_add_js( path_to_theme().'/jquery_pngfix_v1_1.js','theme');
  }
}

This sets it up, but by default it doesn't select anything, so at the top (or bottom, just not inside the functions in there) of jquery_pngfix_v1_1.js put this:

$(document).ready(function() {
  $("img[@src$=png]").pngfix();
}

A limitation of this (IE, actually) is that it can't handle tiling PNG backgrounds (only scaling,) so alot of cool effects are lost.

You can still use it to make nice shadows, logos, and round corners, though.