Printing from WebHelp

[Ola Timpson]

Hi all

We're in the process of restructuring our WebHelp and are adding some user guides that were previously in separate PDFs as individual topics. This means that users are very likely to want to print these topics out. We use one of the premium pack skins (with a few tweaks) and so the print function is available, but we would ideally like our company logo to appear on the 'print' page (so it looks more official). I experimented with adding a logo into the topic header, but this looked bad in the topic and didn't show after pressing print anyway. Has anyone tried to do this before or does anyone have any recommendations?

Many thanks,
Ola

[Tim Green]

Hi Ola,

The trick is to put the logo in the topic page template in the skin and include CSS so that it is only visible when it is printed. Then it is not in the way for normal viewing. To do this you need to add two snippets of CSS.

These examples assume that your logo is inside a div with the ID "logowrapper, i.e.

Code: Select all

<div id="logowrapper"><img src="yourlogo.png" border="0" /></div>

Then add these CSS snippets to hide the logo on the screen and show it in printouts, along with any other formatting you need for your logo to size and position it:

Code: Select all

@media screen{
   div#logowrapper {
  display: none;}
}
@media print {
   div#logowrapper {
  display: block;}
}

See this page on W3Schools for details on using media types in CSS like this:

http://www.w3schools.com/css/css_mediatypes.asp

[Ola Timpson]

Hi Tim

Thank you so much for this! It's working beautifully and is a much more elegant solution than I hoped could be achieved.

Kind regards,
Ola