By Lee Sykes
August 2008
In this tutorial we demonstrate how to create a print stylesheet for use with DotNetNuke skins.
DotNetNuke has a built-in token which allows you to print the content of a module. This is very limited in its use as it only prints the content of one module at a time. What happens when a user wishes to print out the content from several modules on a single page? Printing each one individually is not practical.
This tutorial outlines the steps to create a printable view of your web pages, so a user can simply go to the file menu in their browser window and select print. This presents the user with a printable, user friendly, readable page.
In this tutorial we walk you through step by step how to create your own print stylesheet for a DotNetNuke skin. We begin with the
Dark Ritual skin which does not have a print stylesheet and demonstrate how to implement each of the key elements for printed web pages.
The tutorial shows you how to create a print stylesheet for your DotNetNuke skin, how to format the layout of the print stylesheet, how to change the text font so that it is suitable for reading when printed out, how to set the width of the stylesheet, how to format links, and also how to display the full URL of a link next to a text link so that it can be viewed on the printed page. Finally, we demonstrate how to select which content to make available for printing and how to remove content not required for printing, this is an essential technique for removing elements such as the menu and login links which are not required for a printed page.
All of these elements together create a printed page which is easy to read and displays the essential content that the user wishes to read.
We explain two methods for adding the print stylesheet to a DotNetNuke skin. The first method is to add the code directly into the skin.css file. The second method is to use some JavaScript to add the code to a print.css file.
This tutorial is aimed at users already familiar with DotNetNuke skinning. If you are new to skinning, we recommend you view the previous
skinning tutorials starting with
issues 5 & 6 and work your way through them in issue number order.
Tutorial References
The Dark Ritual skin
The videos contain:
Video 1 - Introduction, Considerations, Setup
- Introduction and considerations for printing web pages
- The DotNetNuke print icon is not ideal
- What happens when wish to print out entire page?
- Dark Ritual Skin Print Preview with print stylesheet
- Setting up skin files with VWD 2008 express
Time length: 6min 50secs
Video 2 - Current Print Preview, Creating the Print CSS
- Current Print Preview of Dark Ritual skin
- How to setup the print media styles in the skin.css file
- How to setup the body styles for the print stylesheet
- How to change the font size, family, color and margins to make them suitable for print
Time length: 6min 40secs
Video 3 - Remove Elements from the Printed Page
- How to remove elements from the printed page that are not required
- Removing the header text logo, right content page, login links, menu
- Viewing print preview with the elements removed and text formatting
Time length: 7min 01secs
Video 4 - Repositioning the Content, Removing Content Styling
- How to remove the border, background image and fixed width from the printed page
- How to remove floats from the printed page to prevent the content displaying side by side
- How to set all content panes to display across the full width of the page
Time length: 7min 49secs
Video 5 - Styling the Content Pane, Re-styling the Headings
- How to set the main content pane to display across the full width of the printed page
- How to re-size the content panes text on the printed page
- How to re-style the header tags with font sizing and colors for the printed page
Time length: 7min 41secs
Video 6 - How to Style Links for the Printed Page
- How to style links for the printed page
- How to style link color, font style and underline
- How to display the URL of the link after the text link
- How to display the URL of a link just for the text in the main content pane
- Viewing the print preview in IE7
Time length: 6min 48secs
Video 7 - Styling Unordered lists, Method Two for Print Stylesheets using Javascript
- How to remove images from bulleted unordered lists in the main content pane
- How to add a margin to bulleted unordered lists in the main content pane
- Method two for working with print stylesheets
- How to setup a separate print.css stylesheet
- How to add the Javascript code into the index.html file
- How to create the print.css file
Time length: 7min 37secs
Total Time Length: 50min 26secs