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. For rhis site, the logo code within the page.tpl.php looks like the following. <?php if ($logo) { ?> 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) { ?> There is an opening DIV tag "<div class="pngfix"> and a closing DIV tag </div> In a simpler form without Drupal code it would look like this. Without our PNG Fix: With out PNG Fix: 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!
|
|||||||||||



























thanks i've been looking on
thanks i've been looking on the net for hours trying to figure out how to make my drupal logo transparent
A+
Thank you for the great
Thank you for the great tutorial, very clear and easy to follow should be included in the module documentation if I were to write the module.
A++++
I've had a lot of experience
I've had a lot of experience helping people who are clueless when it comes to stuff like this so I understand how less knowledgeable people kind of need things to be illustrated as detailed as possible.
Thanks for the comment. Really I'm just glad this helped! :)
No problem, I'm planning to
No problem, I'm planning to add more informational articles here soon, but I've been having to much fun with my new baby girl ! :)
I'll get around to filling out the site soon enough.
Thank you very much :) I'm
Thank you very much :)
I'm now using this for my logo.
I tried using it for my menu. I'm using the nice-menus module, and I have a horizontal menu at the top of the page (it's the navbar displayed using nice-menus). The background I use in this menu is transparent, but if I apply the div tags around the navbar in my page.tpl.php then the drop downs get hidden (you can see the top of them just inside the parent menu-items). I've tried using overflow: visible; in the css, but it doesn't help. Any ideas to why this is?
Unfortunately I cannot link to the page, because my customer does not allow me to show it to anyone until it's launched (some time next week - then I can link to it).
/Anders:)
Hmm, it sounds like you are
Hmm, it sounds like you are trying to apply the pngfix div class to the whole menu. Try adding the around each individual background image on your menu.
Also I'm going to be adding a similar IE6 fix which uses another method and works a little better this this one it should be up before the night is over or possibly tomorrow, I have to clean out my basement and do some renovations to it over the next week so I am cramped for time but i'll help you out with a cleaner method which doesn't require a Drupal module even :) so stay tuned!
Update from my previous
Update from my previous comment.
Unfortunately the alternative method of using transparency in ie6 is ultimately flawed as it deactivates the ability to click links for which ever page the alternate method is used so I'm putting that on the back burner and the article above will have to do for now. Sorry non-Drupal users (for now!).
Hi I am using the standard
Hi
I am using the standard rotate.php script to rotate the header images in my website (drupal 6.10). However the images being used have a transparent background which gets rendered as a dull blue in IE6. I have been tried using PNG fix : twinhelix.com , have used modules pngfix and pngbehave .. but to no avail. The website is : http://www.geek.designbracket.com/
The CSS code fr the header div is :
#header {
background: transparent url(img/banners/rotate.php) no-repeat 0px 0px; /*rotates images in the banners folder */
}
Have also tried adding the alphaloader filter to the same div as given under:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='banner_bgimg.png', sizingMethod='scale');
position: relative; z-index: 1;
Any suggestions... Is there something wrong that I am doing ?
This work excellent! Thank
This work excellent!
Thank you!
Post new comment