PDF look and feel

Style your individual article, full PDF, and custom PDF downloads to force page breaks, display content only in PDFs (such as banner images), and display clickable links.

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.
    </div>
  2. In Settings > Style > Custom CSS, add CSS to hide this element by default...
    .pdf-logo {
        display:none;
    }
  3. ..and CSS to show the element in PDFs. 
    .hg-pdf .pdf-logo {
        display:block;
    }

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.


Snippet to force page breaks in PDFs

You can create a snippet that inserts a page break in your PDFs.


To set up your snippet...

  1. Go to Library > Snippets and click Create New Snippet.
  2. Name the snippet whatever you want. I called mine Page Break After and made the merge code name PageBreakAfter (no spaces is important!).
  3. I left the status as active and did not check either option. I do want my snippet in PDFs and I don't care about it in article blurbs.
  4. For the snippet content, copy and paste this code, which creates an empty paragraph with CSS to force a page break after it:
    <p style="page-break-after:always;"></p>
  5. Save Changes.

You can then add your snippet to your articles where you want a page break to be inserted. You can manually copy and paste your snippet merge code, but we also have a tool in the editor called Add Snippet where you can look up and insert your snippets by name. Your snippets will look  like this in your content:


Prevent Page Breaks in PDF Table Rows

Add this CSS to Settings > Style > Custom CSS prevent page breaks in the middle of a table row.

.hg-pdf table tr {
page-break-inside: avoid;
}

To choose where to insert page breaks in an article, check out our Snippet to Force Page Breaks in PDFs.

Display clickable links in PDFs

Hyperlinks not working in your PDFs? Never fear – CSS is here!

Copy paste the following line into Settings > Style  > Custom CSS to display clickable URLs in parentheses next to your hyperlinks in PDFs. 

.ko-pdf-clickable-link {display: initial;}