Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

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

HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...PNG Transparency support in DNN 4.5.3PNG Transparency support in DNN 4.5.3
Previous
 
Next
New Post
7/13/2007 7:50 PM
 

I’ve been trying to figure out how to get PNG files to be transparent in DNN for the past week.  Unfortunately, I’ve not been able to make it work.  I came across a DNN site that has a mod that is supposed to provide support for PNG transparent files.  I tried to implement the mod but DNN now thinks I’m trying to move back to version 4.5.0.  I don’t understand why???

 

I modified the dnncore.js file with the code suggested on this site (http://www.akrion.net/Forums/tabid/57/forumid/6/postid/8/view/topic/Default.aspx) and now DNN thinks it is on version 4.5.0 and it won’t work anymore.  If I drop the 4.5.3 version back down and build it again, everything is fixed.

 

Any thoughts would be so much appreciated!!!

 
New Post
7/14/2007 2:22 PM
 

The easiest way is to use the technique described here http://homepage.ntlworld.com/bobosola/pnghowto.htm and add the requisite code to your portal skin. Should take only a few minutes to implement the solution.

Since the issue of PNG transparency is limited (among popular browsers) to IE 5.5/6 it is not a good idea to modify the DotNetNuke core code (even if it's just Javascript) as usage of these browsers is waning anyway.

Nik

 


Nik Kalyani
Co-founder
DotNetNuke Corporation
Blog | Twitter | FaceBook
 
New Post
7/14/2007 3:46 PM
 

Nik, thanks so much for the quick response.  I tried adding the pngtest.js to my webpage directory but I'm not sure I put it in the right folder.  I have my skin in the following folder: C:\DotNetNuke_2\Website\Portals\0\Skins\skins.  I've added the code you suggested (i.e. head tag with java script reference) to my skin's .ascx file but it still doesn't work.  I have the actual png files in the css file.  The script should still work though, right?

 
New Post
7/15/2007 12:07 PM
 

The script finds all instances of images on a page with a .png extension and replaces them with a <SPAN> (or <DIV...forget which one), sets the images as the background image for it and then adds a CSS alpha filter. Since the filter only works on IE, which is the only browser needing this hack anyway, it is skipped for other browsers.

The bad news is that if your PNG images are being included in the page through CSS, this or any other script that uses a similar approach (most do), is not going to help. The good news is that in this scenario you don't need the Javascript. Instead you can apply the filter directly to the style definition. For example, if you have the following attribute defined:

background: url(someimagefile.png);

...you can add this:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='someimagefile.png',sizingMethod='scale');

Other browsers will ignore the filter attribute, but IE will use it to render the alpha channel correctly.

If you do end up using the script to also deal with images embedded in the page using <IMG> tags, one things you should know is that a DotNetNuke skin is only an HTML fragment...it should only include the HTML code that appears inside the <BODY>...</BODY> tags. Therefore, a <HEAD> element is a no-no for a skin. You can include the script by entering the script block directly in the ascx using < script > tags. If you place your script in the same folder as the skin, the value you would use for the "src" attribute of the script tag is "<%= SkinPath %>yourscriptname.js"

Nik

 


Nik Kalyani
Co-founder
DotNetNuke Corporation
Blog | Twitter | FaceBook
 
New Post
8/1/2007 12:18 AM
 

I've been hunting for a fix for this problem for quite a while today and again this evening and still can't seem to get it to work right.

The current line in my .css is this:

#rightHeader{width:413px; height:183px; top:0px; right:0px; position:absolute;background-image:url(images/header_right.png); background-repeat:no-repeat;;}

If I try what Nik suggested and change it to

#rightHeader{width:413px; height:183px; top:0px; right:0px; position:absolute;background-image:url(images/header_right.png); background-repeat:no-repeat; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='images/header_right.png',sizingMethod='scale');}

I don't see a difference. Any ideas on what I'm doing wrong?

 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...PNG Transparency support in DNN 4.5.3PNG Transparency support in DNN 4.5.3


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:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. 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.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out