“Print-Friendly” page layouts and IE Developer Toolbar

One of the questions we got asked a lot at the investment bank I was working at during the initial phases of the Business Intelligence project was around creating "Printer-Friendly" versions of the Excel Report pages. Apparently, although we were generating reports to be used and shared online, some of the executives just can’t get enough of paper and printouts.

Anyway, prehistoric work practices aside, there are 2 approaches to this in the WSS / MOSS world. The first one involves modifying the core.css style sheet that is incorporated into the OTB master pages. The other is to modify the master page and point to an alternate style sheet as the style sheet to use when printing. The second option is probably the one that Microsoft would prefer you to use, however it may require more effort to roll out. Taking this option one step further, you could create a feature and staple the feature to all the site templates (which would make it easier to deploy).

Begin by downloading and installing the IE Developer Toolbar. You may need to go into your browser settings and enable the IE Developer Toolbar add-ons once you have installed it (in IE, Tools –> Manage Add-ons –> Enable or Disable Add-ons).

So let’s look at the 2 alternatives: First, the one Microsoft does not support: modifying the core.css file. The reason this is not officially supported is because a service pack or hot fix may overwrite the file. If there are issues with the changes you make, you will be charged for support calls… and so on. Since neither scenario is likely to be related to a Style sheet change, if your changes are going to be simple I say " Be like a squirrel and go nuts!" 🙂

Open up the core.css file (normally located in C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES) and search for @media – this will get you to an area within the style sheet that is set up to hide the listed classes within of the page. OTB the side menu and breadcrumbs are hidden, but the top logo and search boxes are visible. Pffft. Give me more printable area, not a logo. Display the IE Developer Toolbar by going Options –> Toolbars –> Explorer –> IE Developer Toolbar. Click on the icon in the toolbar that looks like a mouse over a box, then click on the logo.

2008-03-13_1143

You will see the <BODY> tag below the button you clicked on automatically expand and highlight the object you have just selected in the page. Then you can click on parent objects in the tree until you get to the row that covers off the entire width of the page. In the Attribute field to the right of the tree, you will then see the class and possibly the ID of the object (normally the object is a <TD>) appear in the list of styles that are currently being applied to that object.

Add the class you see to the list in the @media print section of the core.css. This will set this class to display:none;, effectively hiding the table cell and shrinking the area to take up 0px space. When I did it, the class was called ms-globalTitleArea.

You may also want to reduce the padding or margin on the content tables, however you’d probably want to go towards a separate style sheet if you are looking at getting into this much detail, so check out the second option below!

The second alternative is to add a Style Sheet "Link" tag into the master page that points to an alternative style sheet. The format of the tag is:

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

You’ll notice the path in here is a bit odd – it points to the same virtual folder path that core.css resides in. That’s where I’ve put my revised Style Sheet to make sure it’s available in a common location across all MOSS / WSS sites.

To be honest, I believe that this is the better option. Changes you make to the print.css file will only affect the printed page and not the live site. The other enhancement you can make to the master page (while you have it cracked open in SP Designer) is to add a "Print This Page" or "Printer-Friendly" link that people can click on (not everyone uses <CTRL> + P to print a web page). Add the following link to the top of the page (perhaps near the "My Links" or "My Site" links)

<a href="#" onClick="window.print();return false">Print This Page</a>

This pops up the printer dialogue for the user, but it does not change the functionality in any other way (you get the same printed result by clicking the "Print" menu button or pressing <CTRL> + P).

Cheers!
Brad

Advertisements

About Brad Saide

I'm a SharePoint consultant. I'm also slowly going bald, seem to have a permanent spare tyre around my waist and enjoy socialising with friends over a beer or 10. The last 2 may possibly be related. Started working with SharePoint when the first version was in limited beta release (participated in the Technology Adoption Program while at Woolworths) and have been committed to the adoption of the technology as a business enabler ever since.
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s