Making your printed HelpDocs look nicer

Updated 2 days ago by Jake Peters

Users can print your articles using the regular browser flow (Ctrl/Cmd-P). You can make their printing experience nicer by adding a print stylesheet. This is some CSS that only gets loaded when printed, not when viewed online.

Here's a print stylesheet we've adapted from noupe to make your printing look great. Feel free to edit to your heart's desire!

You'll need to paste this into SettingsCode > CSS
@media print {
           
          #content, #page {
          width: 100%; 
          margin: 0; 
          float: none;
          }
              
          @page { margin: 2cm }
          body {
          font: 13pt Georgia, "Times New Roman", Times, serif;
          line-height: 1.3;
          background: #fff !important;
          color: #000;
          }
          h1 {
          font-size: 24pt;
          }
          h2, h3, h4 {
          font-size: 14pt;
          margin-top: 25px;
          }    
           
          a {
              page-break-inside:avoid
          }
          blockquote {
              page-break-inside: avoid;
          }
          h1, h2, h3, h4, h5, h6 { page-break-after:avoid; 
               page-break-inside:avoid }
          img { page-break-inside:avoid; 
               page-break-after:avoid; }
          table, pre { page-break-inside:avoid }
          ul, ol, dl  { page-break-before:avoid }
              
          a:link, a:visited, a {
          background: transparent;
          color: #520;
          font-weight: bold;
          text-decoration: underline;
          text-align: left;
          }
          a {
              page-break-inside:avoid
          }
          a[href^=http]:after {
                content:" <" attr(href) "> ";
          }
          $a:after > img {
             content: "";
          }
          article a[href^="#"]:after {
             content: "";
          }
          a:not(:local-link):after {
             content:" <" attr(href) "> ";
          }
          #footer a:after {
             content: "";
          }
              
          .entry iframe, ins {
              display: none;
              width: 0 !important;
              height: 0 !important;
              overflow: hidden !important;
              line-height: 0pt !important;
              white-space: nowrap;
          }
          .embed-youtube, .embed-responsive {
            position: absolute;
            height: 0;
            overflow: hidden;
          }
          #header, #related, #feedback, #breadcrumbs, #disqus_thread, .hd-admin-bar, hr
          {
          display: none;
          }
           
          p, address, li, dt, dd, blockquote {
          font-size: 100%
          }
          code, pre { font-family: "Courier New", Courier, mono}
          ul, ol {
          list-style: square; margin-left: 18pt;
          margin-bottom: 20pt;    
          }
          li {
          line-height: 1.6em;
          }    
              
          }
          

What did you think of this doc?