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 <div> 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.

<?php if ($logo) { ?>
<a href="<?php print $base_path ?>" title="<?php print t('Home') ?>">
<img src="<?php print $logo ?>" alt="<?php print t('Home') ?>" />
</a><?php } ?>

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 <div> tag which allows the PNG to be transparent in IE5.5 and IE6, but first alittle about the DIV tag.

Using DIV tags is useful for formatting whatever content is within the DIV tag, it can hold formats completly 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 tag only around out image! The below code is just like the above code only with the PNG Fix DIV tag we defined earlier in the PNG Fix configuration screen. Pay close attention where the DIV tag is placed. I have made bold the DIV tag are for you.
 

<?php if ($logo) { ?>
<a href="<?php print $base_path ?>" title="<?php print t('Home') ?>">
<div class="pngfix">
<img src="<?php print $logo ?>" alt="<?php print t('Home') ?>" />
</div>
</a><?php } ?>

There is an opening DIV tag "<div class="pngfix"> and a closing DIV tag </div>
Place the opening DIV tag directly before the png image you want to have transparency fixed and place the closing DIV tag </div> 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:
<div class="pngfix"> <img src="mylogo.png"</div>

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!

You're still here? oh, hmm..

Ok I've attached a demonstration of using the PNG Fix div below, also included are the PNG Fix modules for Drupal 5.x and Drupal 6.x

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!