Hide On Print

Click here for how to do this with the new Newton layouts.

It would be nice if there were some site settings that would allow a user to hide the menu bar and toolbar when printing. That has already been entered as a suggestion. Until such a feature is added, however, you can achieve this effect on your own by doing the following three steps.

1. Create a tiny stylesheet to represent the behavior you want when printing.

The stylesheet that I use is shown below (with thanks to Reggie98)

/* CSS Options for printing only */
table.menu , td.toolsContainer, td.menu, td.vspace
{
display: none;
width: 0px ;
}

Or if you wish, you can browse directly to the style sheet on my web site at http://davidallen.editme.com/files/Home/hideOnPrint.css.

2. Attach the style sheet to a page in your Wiki.

Go to any page on your Wiki (I use my homepage), click on attachments, and upload the tiny stylesheet that you created in the first step.

When you attach the stylesheet to your page, it will be placed at a URL like the one shown above. You will need the exact path to this page in the next step. So, if you attach your stylesheet to some OTHER page, specify the path that THAT attachment in the next step.

NOTE: These instructions are for the older XSL-based layouts and style sheets. Style sheets are now managed like normal pages in Site Settings -> Design -> Styles. So instead of uploading the print style sheet as an attachment, it can simply be added as an additional style sheet here.

3. Modify your site's XSL Layout to include a link to this new stylesheet.

Go to site settings, look and feel, XSL Layouts, and open your current layout.

Then you simply need to add a single line to your XSL stylesheet.

The example below shows four lines from my XSL layout to give you perspective on the location. The line you need to add, is highlighted in bold.

<xsl:value-of select="stylesheet" disable-output-escaping="yes"/>
<LINK REL="StyleSheet" href="/files/Home/hideOnPrint.css" TYPE="text/css" MEDIA="print"/>


This last step, is the most risky. So, remember to preview the page first, as they recommend.

Remember, if you do this correctly, your page will appear as it always has on the screen, but the menu and toolbar will disappear when you print the page.

Comments

Now that we have different types of layouts, I used this command in the <head> section of the layout instead of the one recommended:

I use the Brighton Blue layout and the stylesheet I used was also slightly different. Here it is:

/* CSS Options for printing only */
    table.menu , td.toolsContainer, td.menu, td.vspace, td.tools, td.toolsheader
    {
     display: none;
     width: 0px ;
    }

I modified the page to reflect the issues you indicated. I didn't change my XSL any further; I just tweaked the css to match the XSL as it was. But it is important to note that the XSL templates they supply may vary depending on the style one chooses, or a user might alter them (like you have done) and thus, the css styles to be suppressed must be changed.

The addition of "td.menu, td.vspace" to the suppression seems to also fix a problem someone else complained about earlier, but which I could not reproduce at that time.

Thanks for your help, Dallen.

It appears that since the file was uploaded into a test page, it appeared in a different directory: http://propertiwiki.editme.com/files/editthispage/hideOnPrint.css

Also, the <td> for the menu didn't have the "class=menu" set in the line before printing the menu page-content

I modified this as follows:

<td valign="top" rowspan="2" width="200" class="main_menu">
        
            <xsl:value-of select="menus/menu/page-content"
                disable-output-escaping="yes"/>

Anyway, your help was most appreciated.

Cheers, Reggie

You are correct that you had trouble with step 2.

If you had done step 2 correctly, and attached the small stylesheet file to your home page, then when you placed the following URL in your browser, the stylesheet would pop-up (though an error would appear in the browser).

http://propertiwiki.editme.com/files/Home/hideOnPrint.css

Follow the instructions from the top, very carefully. If you still need help, email me at davidkallenSPAMBLOCKyahoo.com and replace SPAMBLOCK with the @ sign.

This is a very useful feature. I have inserted the line of code but there is no difference. I suspect I might have gone wrong at step 2 - is attaching the dreamweaver file the same as uploading the css style sheet - I don't understand the issue with the URL

Any help would be very welcome

My experience with Firefox is different. I conducted a test in both Internet Explorer and Firefox and I pasted screen prints of the results on the following page http://davidallen.editme.com/HideOnPrintIssue.

As you can see, Firefox does render the margins of the controls somewhat differently. But it is clear that it is not reserving any space for the menus whatsoever. Are you having this problem on your own pages when you attempt to apply the technique? Or do you observe this whitespace behavior when you try to print my home page(http://davidallen.editme.com/)?

If you see the large whitespace area even when you're viewing my page, then I can't help you any further as I cannot repeat the problem. In that case, it must be a browser-related issues. On the other hand, if you can print my homepage just fine, but your own has the whitespace issues, then there must be some difference in the way you are implementing the technique. Good luck!

When I tried it on Firefox, there was white space where the menus had been.

The technique above allows the content area to occupy the entire page width. The only thing you're missing is a button. If what you're after is a view of what it looks like before you print it, use the Print Preview function of your browser.

What I would really like is a button labelled "Print Version" which shows the page full width, with no menus and no menu margins.

Search:

Welcome

Support Options

Stay Informed

Hide On Print

Comments