PDF look and feel

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.

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. Go to Settings > Style.
2. Below the preview pane, select Custom HTML.
3. Select Article from the Custom HTML dropdown.
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 overall with a class of "pdf-logo", 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, be sure to replace the img src in row 2 with a URL of a valid image file in your File Library!
6. Go to Custom CSS.
7. Copy the CSS below and paste it into your Custom CSS. The first CSS here will hide the PDF logo in the live knowledge base; the second will display it only 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.

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. Select 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.
   
   Select Code Editor in the Snippet Content 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 the place in any article where you'd like the page break to occur.
    
    The Insert Snippet control in the editor

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.

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

The PDF generator will create clickable hyperlinks for most hyperlinks. (It just doesn't handle anchor hyperlinks well.)

But if you're using PDFs as printed resources, you may want to also display the actual URL of the hyperlink. You can display something like:

Sample displayed hyperlink

To create these parentheses with the full URL text automatically, you can add some CSS to your knowledge base and then regenerate PDFs:

1. Go to Settings > Style.
2. Below the preview pane, be sure Custom CSS is selected.
3. Copy the code below and paste it into the bottom of your Custom CSS.

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

4. Save your changes.

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