Display content only in PDFs

There are two ways to customize the look and feel of individual article PDFs.

For general structure/layout of individual articles, go to Customize > PDF and adjust the settings there--you can add a watermark, password, header HTML, and footer HTML.

But if you want to show or hide content in all PDFs, custom CSS is your friend. All PDF content is prefixed with the hg-pdf CSS class, so you can target this class in your selectors to show or hide content in PDFs.

One of the most common requests we get is to display a logo or other image in article PDFs that isn't displayed in the live knowledge base. Here's how we achieve that:

1. Go to Customize > Style (Custom HTML & CSS).
2. In the Customize HTML, CSS, and JS section, select Custom HTML.
3. In the Select HTML section to edit dropdown, select Article.
4. Near the top of your article, wherever you'd like the logo to appear, add some HTML for your logo. We recommend using a div with a  pdf-logo class and putting the image inside that div, like this:

   <div class="pdf-logo" align="center">
         <img src="https://dyzz9obi78pm5.cloudfront.net/app/image/id/1111/n/pdflogo.png" />
   </div>

5. If you use the above code as a sample, replace the img src URL in row 2 with a URL of a valid image file in your Files library.
6. Go to Custom CSS.
7. Copy the CSS below and paste it into your Custom CSS. The first CSS piece hides the PDF logo in the live knowledge base; the second displays it in PDFs.
   

   /* Hide PDF logo in live knowledge base */
   .pdf-logo {
       display:none;
   }
   
   /* Display PDF logo in PDFs only */
   .hg-pdf .pdf-logo {
       display:block;
   }
   

8. Be sure to Save your changes.