DNN websites, modules, skins and support

Menu: Blog ยป Skins and Templates

Adding a Print stylesheet to your Dotnetnuke Skin

By:
Adding a Print stylesheet to your Dotnetnuke Skin

As you can read in my previous blog, there's an issue with the DotNetNuke core print skin object in DotNetNuke 6.1.

I'm sure this will be solved in a future version, but there is a workaround for it as you can read in the blog post.

Another solution is something that's part of the HTML recommendation.
Include a print.css file, which allows you to style the printed page.

The HTML for this would be:

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

Because the Media attribute is set to "print" this stylesheet will only be loaded when printing the page.
Using this print.css stylesheet you can  hide certain parts of the page you don't want to print, or change font-szie, content width etc.

Example CSS:
#HorMenuDropDown{display:none;}
#Skin{width:99%;}
.Normal{font-size:12pt;}

Including a Print.css is not difficult but some people are asking for a solution in the DotNetNuke Forums, which is why I decided to write this blog.

How to include Print.css on you page for printing

The easiest way to include this is to use our DotNetNuke Stylehelper Skin Object.
You can download it here.

Then add this to your skins ascx file:

<%@ Register TagPrefix="fortyfingers" TagName="STYLEHELPER" Src="~/DesktopModules/40Fingers/SkinObjects/StyleHelper/StyleHelper.ascx" %>

<fortyfingers:STYLEHELPER ID="STYLEHELPER1" AddCssFile='Print.css' CssMedia="print" runat="server" />

And add a Print.css file to the root of your skin package and your done.
Now you only have to create print styles and test.

BTW, you can test the result by using the print preview option of your browser.

On this page there are some good tips on how to create a good print.css file:
http://www.webdesignerdepot.com/2010/01/10-tips-for-better-print-style-sheets/