Customizing the printed version of your Flare web output

April 8, 2017    madcap flare css design

Lots of people who read docs, myself included, like to occasionally print (parts of) them to read them the old-fashioned way. So if you’re using any kind of web output for your Flare project, it’s a good idea include a Print button on each page. The most obvious way to do this is to add a topic toolbar proxy to your master page.

If you’ve customized your master pages a lot, however, you might notice a problem when you print a page: in addition to the topic’s body text, all sorts of unnecessary elements are also printed, e.g. the side menu, mini-TOCs, breadcrumbs, etc. Luckily, there’s an easy way to determine which parts should and shouldn’t be printed:

  1. Add the following lines to your project/topic stylesheet:

    @media print {
          .no-print * {
                 display: none !important;

    This means that any elements with the class no-print, and any children of elements with that class, will be hidden from printed output.

  2. In your master pages, add the no-print class to all relevant elements.

It will probably take a bit of trial and error before you get the printed output to look exactly as you want. Remember that you can use the developer console in your browser (F12 or Ctrl + Shift + I) to add and remove classes on the fly.

comments powered by Disqus