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 Settings > 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 PDFs, custom CSS is your friend.

The class "hg-pdf" is added to our PDF downloads. You can use this class to style elements differently in your PDF downloads. Add this class before the element you want to target, and you can create customized styles for your PDFs!

Here's how to add your logo to your PDFs:

  1. In Settings > Style > Custom HTML > Article, add a class to the element. You can call it whatever you like as long as it's unique. We used "pdf-logo".
    <div class="pdf-logo" align="center">
        This is where I put the HTML for my logo that only displays in PDFs.
  2. In Settings > Style > Custom CSS, add CSS to hide this element by default...
    .pdf-logo {
  3. ..and CSS to show the element in PDFs. 
    .hg-pdf .pdf-logo {

Note: Once you make changes to PDF styling, you'll only see these changes once PDFs are regenerated. For the Standard PDF and Custom PDF exports, you can generate these yourself. For individual article PDFs, save the article with a small change (such as an added space) to regenerate the PDF to see if you like your changes. Once you have the styling the way you want, contact us to regenerate all your article PDFs.