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.
  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.

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

If you have table rows that span multiple lines, by default, the PDF generator won't make any effort to keep those multi-line rows on the same page if they fall on a page break. This is most evident when you have table row headers:

Default table row behavior: page breaks can happen in the middle of tall row

You can add some Custom CSS to prevent this mid-row page break and force page breaks to occur between table rows:

  1. Go to Settings > Style.
  2. Copy the code below and paste it anywhere into the Custom CSS section below the preview pane.
    /* Force PDF page breaks between rows, not mid-row */
    .hg-pdf table tr {
      page-break-inside: avoid;
    Your code should look like this:
  3. Save.

Once you re-save the article, your PDF should now break properly between the rows:

The PDF page break now happens between rows, rather than mid-row.

As with all PDF style settings, by default this style change will only be applied to existing articles once they are resaved. Contact us to have all of your existing article PDFs regenerated with the new style.

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;}