Customize PDF header or footer

Last updated
Save as PDF

Applies to:: All versions
Role required:: Admin

Add your custom CSS code to modify the default PDF header or footer to brand your PDF style.

Header

To make customizations to your PDF headers as below, navigate to Site tools > Control panel > Branding > Custom PDF CSS and enter your custom code:

@page {
@top-left {
   content: "\A9 2016 Copyright Company. All rights reserved.";
   font-family:Arial, Helvetica, sans-serif;
   border-bottom: 1px solid #ccc;
   font-size: 8pt;
   color: #666666;
   width: 3in;
  }
@top-center{
content: counter(page);
   font-family:Arial, Helvetica, sans-serif;
   border-bottom: 1px solid #ccc;
   font-size: 8pt;
   color: #666666;
    }
@top-right{
   content: "more information";
   font-family:Arial, Helvetica, sans-serif;
   border-bottom: 1px solid #ccc;
   font-size: 8pt;
   color: #666666;
   }
}

If you want to add custom header and custom footer elements, you would add both contents under the @page { } section.

As you customize your PDF, periodically create a PDF from an article to check the output and ensure it is formatted the way you want it to look.

Footer

To add a footer to the bottom of every PDF page that includes details about your company including copyright or address, add the following CSS code to Site tools > Control panel > Branding > Custom PDF CSS:

@page {
@bottom-left {
  content: "\A9 2016 Copyright Company. All rights reserved.";
  font-family:Arial, Helvetica, sans-serif;
  font-size: 8pt;
  color: #666666;
  width: 6in;
 }
}

.pdf-footer {
   display:none;
}

Displaying none on the .pdf-footer hides the default footer Expert ships with. The content parameter in the @bottom-left section only supports plain text, not HTML. If you want to add custom header and custom footer elements, you would add both contents under the @page { } section.

As you customize your PDF, periodically create a PDF from an article to check the output and ensure it is formatted the way you want it to look.