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.

Individual article PDFs

To add page numbers to your individual article PDFs:

1. Go to Customize > PDF.
2. Add PDF header HTML or PDF footer HTML that includes the [pdf("page-number")] merge code. For example, you can add a centered div like this to create a "Page [number]" treatment:

   <div style="text-align: center;">Page [pdf("page-number")]</div>

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 Tools > Exports. 
2. Select 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. Copy the merge code below and add it to the Content footer left, Content footer center, or Content footer right.

   [pdf("page-number")]

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 Customize > 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 all PDFs, custom CSS is your friend. All PDF content is prefixed with the hg-pdf CSS class, so you can target this class in your selectors to show or hide content in PDFs.

One of the most common requests we get is to display a logo or other image in article PDFs that isn't displayed in the live knowledge base. Here's how we achieve that:

1. Go to Customize > Style (Custom HTML & CSS).
2. In the Customize HTML, CSS, and JS section, select Custom HTML.
3. In the Select HTML section to edit dropdown, select Article.
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 with a  pdf-logo class 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, replace the img src URL in row 2 with a URL of a valid image file in your Files library.
6. Go to Custom CSS.
7. Copy the CSS below and paste it into your Custom CSS. The first CSS piece hides the PDF logo in the live knowledge base; the second displays it 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.
   
   Sample gif showing the switch to Code Editor. Hover to play.
   
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 creates clickable hyperlinks for most hyperlinks. (It 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 this:

Sample displayed hyperlink

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

1. Go to Customize > Style (Custom HTML & CSS). The Style Settings page opens.
2. In the Customize HTML, CSS, and JS section, select Custom CSS.
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.

The color and size of the hyperlinks will vary based on your Style Settings.