Transparent PNG Files in IE5 and IE6 Using Drupal

Ok, you're here to get your png images transparent in Drupal 5.x and Drupal 6.x so lets begin.

You will need a couple things first, Drupal 5 or 6 of course, the PNG Fix for Drupal 5 or for Drupal 6, and some HTML knowledge. If you don't have much HTML or CSS knowledge you can try to wade through this article and probably do ok. If you feel this might be something you will need help on, then feel free to leave your comments at the bottom of this page. I will do my best to help you out. I'm guessing most people who are reading this article at least know basic HMTL and know just enough CSS to be considered dangerous. Read on.

First download the PNG Fix module (I have (attached it to the bottom of this article for easy access) and place it in your Drupal modules folder (yoursite.com/modules/), go to your admin's module page and enable the module.

Next head over to /Site Configuration/PNG Fix and you should be greeted with the following.

In the "CSS Classes" text box put ".pngfix" don't forget to add the period to the beginning! Check out the example below for proper a entry. then click Save.

Here comes the technical part. we will be placing a tag around whatever PNG image we want the transparency to show through on. For example, the very logo of this site is using a transparent image, but enough showing off, lets get YOUR PNG's transparent! FTP to your site's theme folder if you do not have direct access to your files, for whatever theme you are using find it's page.tpl.php and open it up with your favorite text editor. I have made the actual image code bold for you to see better. (This will more then likely not reflect what you see in your page.tpl.php file, bare with me!).

For rhis site, the logo code within the page.tpl.php looks like the following.

< img src="mylogo.png">

The above code shows how my logo is being displayed at the top of this page and doesn't have PNG Fix currently installed yet. Next we will add our tag which allows the PNG to be transparent in IE5.5 and IE6, but first a little about the DIV tag.

Using DIV tags is useful for formatting whatever content is within the DIV tag, it can hold formats completely different then what is on the outside of the DIV tag, there's plenty of website that explains DIV tags in further detail just Google "div tag".

With our image currently divless, lets go ahead and add the

< div you.="" for="" are="" tag="" div="" the="" bold="" made="" have="" i="" placed.="" is="" where="" attention="" close="" pay="" screen.="" configuration="" fix="" png="" in="" earlier="" defined="" we="" with="" only="" code="" above="" like="" just="" below="" out="" around="" >

< img src="mylogo.png" >

There is an opening DIV tag " and a closing DIV tag Place the opening DIV tag directly before the PNG image you want to have transparency fixed and place the closing DIV tag directly after the image code.

In a simpler form without Drupal code it would look like this.

Without our PNG Fix: < img src="mylogo.png" >

With out PNG Fix:

< img src="mylogo.png" >

We simply wrapped our PNG with the PNG DIV tag.

With your DIV tags in place you and your visitors should be experiencing transparent PNG files in all of its glory! A celebration is in order!

If you have followed the instructions, viewed the downloadable example and are STILL here needing help, then please leave a comment below and I will do my very best to help you out with problems relating to PNG Fix! Have a nice day!