| Brad's profileSharePoint BlogPhotosBlogLists |  Tools  Help |
|
March 13 "Print-Friendly" page layouts and IE Developer ToolbarOne 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.
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! March 09 Community Kit for SharePoint - Enhanced Blog Edition v2.0The next version of the EBE has been released. I hope that Microsoft look at including this type of functionality in the MOSS vNext - One thing that was a bit disappointing was the OTB Blog features - I know, I know - MOSS / WSS 3 is not a blogging application. Support now for Trackbacks, CAPTCHA Spam control, RSS Post content trimming, still supports Windows Live Writer (What I write all my blog posts in). The new solution is here on CodePlex. Cheers! SharePoint User "Buzz" kitMicrosoft have created a "Buzz" kit that provides assets for companies to use who are rolling out SharePoint internally. Before distributing them far and wide, ensure that the "Buzz" you are creating is about features and functionality you are deploying (so if you are deploying WSS 3, don't bang on about the BDC unless you are trying to get another business unit to come up with funding). The page with all the assets is located here. Cheers! |
|
|
