Page 4 Transparent PNG - Skins, Themes, and Templates

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

Home All Forums

1/29/2007 8:41 PM

Timo Breumelhof

www.40fingers.net
Joined: 2/9/2006

Posts: 4430

Re: Transparent PNG Modified By Timo Breumelhof on 1/29/2007 8:43:30 PM

You can by using House Menu.
Use the page icon to display the image and then some png hack for IE < 7

DNN websites, modules, skins, hosting and support

2/23/2007 9:26 AM

brian trudeau

www.trudeauconsulting.com
Joined: 8/17/2006

Posts: 71

Re: Transparent PNG

I recently became interested in using alpha-transparency png's to set the background of some tables to be slightly lighter than the background image for the entire site.

I thought I could do this relatively easily after reading this thread and midway though, I also thought that since I upgraded to IE7, at least for testing purposes, I may not even need any javascript to make it work.

I have a background image set up at: www.sheridanfamilyweb.com in my css file. I also have a semi-transparent 24-bit PNG file set as my background image in the logo section. But I'm not seeing the primary background image in the logo area.

I must be doing something wrong because my browser is rendering alpha transparent images on other sites, but I can't seem to figure it out. Can anyone help?

Professional business web site design

2/24/2007 4:18 AM

Timo Breumelhof

www.40fingers.net
Joined: 2/9/2006

Posts: 4430

Re: Transparent PNG

Did you solve your problem? (looks like it)
The transparency of the logo works in FF not in IE 6..(as usual)

DNN websites, modules, skins, hosting and support

3/5/2007 9:45 AM

brian trudeau

www.trudeauconsulting.com
Joined: 8/17/2006

Posts: 71

Re: Transparent PNG

Yeah it's tricky but I think I got it - the best example I've been able to get working so far is: http://jsparks.trudeauconsulting.com . What I really want to master is trying to get an alpha-transparent shading to overlap a background image in the css file, like the yellow menu bar on that site.

If I can just figure out how to set up the background image for a fixed-width skin that would be perfect. I'm thinking of a political website with a bunch of red stars in the background, but show the main content of the site with a slight white shading over it.

Professional business web site design

8/31/2007 3:10 PM

Roberta Freese

Joined: 6/17/2004

Posts: 89

Re: Transparent PNG

Sébastien wrote

Hi all!

Here you will found the PNG fixe for IE 5.5 to 7. It allow you to use PNG images with Alpha Blending (gradient transparency with high color level) with IE. 
Firefox will not be affected by the fix.


Using in Html files :

 - Put the pngfix.js to the html page folder,

 - Add this line of code in an html page, in the HEAD section : (il you are creating a Dnn skin, make the Head section)

---------------------------------------code-------------



--------------------------------------------------------



Using to an existing DotNetNuke skin (already installed) :

 - Put the pngfix.js in the skin folder,

 - Open the skin.ascx file, and put this line of code in the HEAD section : 

---------------------------------------code-------------



--------------------------------------------------------


I've worked a few days on getting it perfectly work, and i'm sure of two things :
- the pngfix is a great hack, but not a real solution.
- the big bug : u can't use  with the top of a png image. The link won't work. So, forget PNGs in the lower part of a PNG file.
Forget it for a solpartmenu too. So, as you can see, it's all so limited.

You can see an example of integration under simple HTML here.
You can see the same page without the fix here.

Finally, you can download the PNGFIX.JS file here.




Sebastien

Realizing that this is an older thread, does anyone have a recommendation on how to add this fix to an existing skin so that it is not overwritten when the skin is re-uploaded or reparsed? The skin I am using has HTML source and the ASCX files are generated on the server that I do not have easy access to.

Page 4 of 4

These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
No Flaming or Trolling.
No Profanity, Racism, or Prejudice.
Site Moderators have the final word on approving / removing a thread or post or comment.
English language posting only, please.

Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

DNN Corp. (DotNetNuke)