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.

Add page numbers to PDFs

You can add page numbers to the header or footer of all PDF exports in KnowledgeOwl, though the exact setup varies a bit based on the type of PDF. All methods use this merge code: [pdf("page-number")]

Individual article PDFs

To add page numbers to your individual article PDFs:

  1. Go to Settings > PDF.
  2. Add PDF Header HTML or PDF Footer HTML that includes the [pdf("page-number")merge code. Here, I've added a centered div that will create "Page [number]":
    This will add Page # to the center of the footer
  3. Be sure to Save your changes.

Standard & Custom PDF exports

For both the Standard and Custom PDF exports, you don't need to add full HTML. You can just add the page number merge code directly to the relevant field:

  1. Go to Knowledge Base > Exports
  2. Click on Standard PDF  to edit the full knowledge base standard PDF, or Custom PDFs and then the gear icon next to the custom PDF you'd like to add page numbers to.
  3. Add the [pdf("page-number")] merge code into the Content footer left, center, or right, depending on where you'd like it. Here, we've added it to the center to get the same treatment as in the individual PDFs above:
    This will add Page # to the center of the footer
  4. Be sure to Save and generate your PDF export.

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

For individual article PDFs as well as the standard and custom PDF export options, sometimes a page break comes between two chunks of content you'd like to stay together (such as a numbered step and the screenshot that goes with that numbered step).

If you'd like to be able to enforce a page break before or after certain portions of an article, you can create a snippet that will force a PDF page break.

To do so:

  1. Go to Library > Snippets.
  2. Click on the + Create New Snippet button.

  3. This will open a new page where you can define your snippet.
  4. Be sure to give it a Snippet Name. Here, we use "PDF Page Break After."
  5. The merge code will be automatically generated based on the snippet name.
  6. Add a Snippet Description to explain what this snippet does. For example: "Add this snippet anywhere in individual articles where you'd like to force a page break in the PDF exports."
  7. In the Snippet Editor, be sure Code Editor is selected from the dropdown.

  8. Copy the code below and paste it into the Code Editor. This code creates an empty paragraph with CSS to force a page break after it:
    <p style="page-break-after:always;"></p>
  9. Click the Create button. Your completed snippet should look something like this:
  10. Now that your snippet exists, use the Insert Snippet option in the editor to add the snippet into any article where you'd like the page break to occur.


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!

You can add some custom CSS to display clickable URLs in parentheses next to your hyperlinks in PDFs:

  1. Go to Settings > Style.
  2. Click on the Custom CSS tab below the preview pane.
  3. Copy the code below and paste it into t he bottom of your Custom CSS.
    .ko-pdf-clickable-link {display: initial;}
  4. Save your changes.

Note: This Custom CSS will not generate clickable hyperlinks for same-page anchors.

Once you're done, your Style Settings should include this line:

Sample Custom CSS for clickable hyperlinks in PDFs

Which will produce a treatment like this (though the exact color of your hyperlinks will vary based on your style settings!):

Sample in-PDF clickable hyperlink