What is Custom CSS and how do I use it with PandaDoc?

Focus: The focus of this self help document is to explain on how to use Custom CSS with your PandaDoc documents and templates.

Where can I use Custom CSS? Custom CSS can be used for any documents and templates that you have created with the document builder.

What is Custom CSS?  Customized CSS can be used in the document and template theme editor, so you can easily customize the look and feel of the documents without being a web developer or HTML&CSS guru. Sometimes we need something more sophisticated, which may only be possible with a little CSS tweaking.  PandaDoc provides CSS support to give you more control over styling your documents and templates. Using custom CSS code, you can hide elements, change fonts, text size, backgrounds, modify sizes of tables, and do pretty much everything that can be done with CSS in the confines of the PandaDoc System.

Tips for Custom CSS use in PandaDoc

PandaDoc does not have a standard list of selectors as there are many, and it’s pretty easy to identify them through Firebug or Inspector (Dev Tools). This should help you with the basics:

You can use Dev Tools (Inspector) or Firebug to find selectors for custom styling. You cannot add custom classes. You can style at the block level by using the custom UREF selector which can be located in the same block as the DIV ID.

Accessing Custom CSS: Open any document or template that was created using the document builder. Go to More… > Design > Edit theme > Scroll down and you will see “Advanced”  Custom CSS – “Edit styles’. Click on this to access the Custom CSS editor.

Some general notes

  • Avoid hooking styles to anything which starts with ng-, this will not be reflected in PDF and it may not be present in the doc when you send it to your client.
  • Custom CSS in PandaDoc is actually LESS CSS, but if you are not familiar with it nevermind, write plain old CSS and it will work just fine.

Change the font family of text blocks and headings

.doc-block__content, h1, h2, h3 {
    font-family: Georgia, Times New Roman, serif;
}

Change the font family of the document (without headings)

.doc-block__content {
    font-family: Georgia, Times New Roman, serif;
}

Change the font family of headings only

h1, h2, h3 {
    font-family: Georgia, Times New Roman, serif;
}

Change font size of tables

Tables font size is smaller than that of text blocks. To make it match the rest of the document use this:

.doc-table__tbl {
    font: inherit;
}

Text line height (a.k.a. leading) in documents is set in pixels to ensure that text does not grow differently in Firefox, Chrome and other browsers and that fields are positioned at the same places in all of them. But if you change font-size you may want to change line-height also. We advice to set it to 150% of font size, but in pixels, e.g.:

.doc-block__content {
    font-size: 14px;
    line-height: 21px; // 150% of font-size, but in pixels
}

Or the same for tables:

.doc-table__tbl {
    font-size: 14px;
    line-height: 21px; // 150% of font-size, but in pixels
}

Change text line-height

If you change font sizes for heading blocks (h1, h2, h3), and don’t put fields on them you are safe to set line-height in percent:

h1, h2, h3 {
    line-height: 130%; // 130% is fine for headings
}

Style a particular block

Every block in a template has a unique identifier attribute uref which persists across documents and it can be used to style blocks:

div[uref="XXXXX"] {
    color: gray;
}

This will affect only the table in that block instead of all tables in the document:

div[uref="XXXXX"] .doc-table__tbl {
    font-size: 14px;
    line-height: 21px;
}

Change links

a {
    color: #bada55;
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}

Change headings

h1 {
    font-size: 34px;
    text-align: center; // Align to "left" "center" or "right"
}
h2 {
    font-weight: bold; // bold or normal
    color: #123456;
}
h1, h2, h3 {
    font-family: Oswald, sans-serif;
}

Use a custom font (Google Fonts, etc)

You must first go to Google fonts and copy the @import snippet. NOTE: You will need to go to Google Fonts to find your import string and font family for your desired font, this is only an example.
Make sure the @import URL is secure (https) and wrap it in the .imports {} class wrapper:

.imports {
    @import url(https://fonts.googleapis.com/css?family=Oswald);
}

Then you can use the font in any selector, for example h2:

h2 {
    font-family: Oswald, sans-serif;
}

Change table headers

.doc-table th {
    background-color: #aed2d9;
    border-color: #ebf4f6;
    color: #ffffff; // Font color
}

Change Table Cell Border Color

.doc-table td,
.doc-table th {
    border: 1px solid #ebf4f6;
}

Remove Table Borders

Please use table border settings to hide horizontal or vertical borders. But if you really need to remove all borders for all tables in the document use this:

.doc-table td,
.doc-table th {
    border: none !important;
}

Remove table header borders

.doc-table th {
    border-width: 0;
}

Pricing Table—Make Product Name Bold

.doc-table__item-name {
    font-weight: bold;
}

Pricing Table—Hide Product Description

.doc-table__product-descr {
    display: none;
}

Pricing Table—Hide Total

Hide pricing table TOTAL ONLY

.pricing-footer__total {
    display: none;
}

Pricing Table—Hide Summary & Total

.pricing-footer__tbl {
    display: none;
}

Change page numbers in PDF

.doc-pagenumber {
    text-align: left; // left, right, center
    top: -20px; // Change to your desired #
    position: relative; // Needed for vertical alignment
}

Change size of footer/header logo

Logos in header and footer are restricted by height and by default scale proportionally to be at most 60px. To modify logo size change 60 to whatever number fits your needs:

.doc-header__img img {
    max-height: 60px;
}
.doc-footer__img img {
    max-height: 60px;
}

Change page header & footer text

.doc-header {
    font-size: 10px;
    color: #bada55;
}
.doc-footer {
    font-size: 10px;
    color: #bada55;
}

Or Both Header & Footer

.doc-header, .doc-footer {
    font-size: 10px;
    color: #bada55;
}

Cover page—change header

.cover-title {
    font-weight: normal;
    font-size: 1.5em;
    color: #aed2d9;
    font-family: 'Open Sans Condensed', 'Ubuntu Condensed', sans-serif;
}

Cover Page—stretch background to fit page

.document-page__sheet {
    background-size: cover;
}

Cover Page—repeat background

.document-page__sheet {
    background-size: auto;
    background-repeat: repeat;
}

Cover Page—hide text block

This will NOT hide the TITLE.
Usually you don’t need to hide the block as if you don’t write text in it, the block just won’t appear for the end user, but if you still want to hide it do this:

.cover-text {
    display: none;
}

Change page background

.document {
    background: #000;
}

Styles for PDF only

If you need to style something in pdf only add a .pdf & string in front of the desired selector:

.pdf & .doc-block__content {
    color: #000; // Make text pure black in PDF
}

Styles for WEB only

Inverse of the previous snippet, styles which must not be in PDF:

// Make text white on black in web only
html:not(.pdf) & .document-page__sheet {
    color: white;
    background: black;
}

Change number format of ordered lists

To achieve automatic numbering of nested ordered lists in the format 1 > 1.1 > 1.1.1 use the following snippet

.doc-block__content {
    ol {
        counter-reset: item;

        li {
            list-style: none;
            counter-increment: item;

            &:before {
                content: counters(item, ".") " ";
            }
        }
    }
}

Style TOC

Example of custom TOC styling:

.table-of-contents__h1 a {
    color: black;
    font-size: 1.3em;
}
.table-of-contents__h2 a {
    color: #f7901e;
    font-weight: 700;
}
.table-of-contents__h2 {
    margin-left: 1em;
}
ol.table-of-contents {
    text-transform: uppercase;
}

Change fields colors

// Declare new colors for fields
@field-color: #789;
@field-border-color: #123;
@field-text-color: #fff;
@field-required-color: #A31682;

// No need to touch anything below this point unless you know what you are doing
.widget__ui {
    background-color: @field-color;
    border-color: @field-border-color;
}
.widget__value {
    color: @field-text-color;
    -webkit-text-fill-color: @field-text-color;
}
// Fade fields assigned to people other than the one filling the document
.widget--disabled:not(.widget--editable):not(.widget--static) .widget__ui {
    border-color: fade(@field-border-color, 40);
    background-color: fade(@field-color, 10);
}
// Required fields for current recipient, unfilled.
// Don't copy this part if red color is fine for you
.widget--disabled.widget--editable.widget--required:not(.widget--completed) {
    .widget__ui {
        border-color: @field-required-color;
        background-color: fade(@field-required-color, 30);
    }
    .signature-view__placeholder {
        color: @field-required-color;
        svg {  fill: @field-required-color;  }
    }
}
// The SIGNATURE and INITIALS labels for unfilled Siganture & Initials fields
.signature-view__placeholder {
    color: @field-border-color;
    .icon { fill: @field-border-color;}
}
// Optionally remove text-shadow
.signature-view__placeholder,
.widget__value {
    text-shadow: none;
}

Put two blocks side by side

// First block
[uref="XXXXX"] {
    float: left;
    width: 47%;
    margin-bottom: 24px;
}
// Second block
[uref="YYYYY"] {
    float: right;
    width: 47%;
    margin-bottom: 24px;
}

Hide Field Labels

.widget__label {
    display: none;
}

Style auto-generated heading numbers

.doc-heading-counter {
    color: #555;
}

Style auto-generated heading numbers for specific heading levels

h1 .doc-heading-counter { color: #555;}
h2 .doc-heading-counter { color: #666;}
h3 .doc-heading-counter { color: #777;}

Create Header/Footer block images that stretch to the full size of the block

.doc-block--footer {
    margin-left: 0;
    margin-right: 0;
    background: url(https://example URL for the image) top center;
    background-size: 100%;
    background-repeat: no-repeat;
    height: 95px;
}
.doc-footer {
    margin-left: 60px;
    margin-right: 60px;
} 

Hide block in PDF

Copy and paste the following snippet to the Custom CSS area and then add user-hide-in-pdf class to advanced settings on any block that you want to hide in PDF.

// Hides blocks in PDF
.pdf & .user-hide-in-pdf { display: none; }

Quick Start basic theme

You can copy and paste the following code into the CSS editor to quickly create a new theme.

// For reference: variables set via theme settings.
// You can override these variables here in custom CSS
//
// @main_color              - Theme color, usually your brand color
// @main_contrast_color     - Auto picked from white or black depending on the lightness of @main_color
// @heading_font            - Font family for all headings
// @text_font               - Default font family for the document
// @table_header_bg         - Background for table headers
// @table_header_text_color - Text color for table headers

// Configuration
@main_color: #5CB774;
@doc_font_family: Arial, sans-serif; // Replace Arial with your Google font name, or use @text_font if it's set in theme settings
@doc_font_size: 16px;
@doc_font_color: inherit;
@headings_font_family: Arial, sans-serif; // Replace Arial with your Google font name, or use @heading_font if it's set in theme settings
@links_color: @main_color;

// Bring in Google Fonts - replace @import URL with your font choice @import URL
.imports {
    @import url(https://fonts.googleapis.com/css?family=Prompt:400,300,400italic,500,500italic,600,600italic,700);
}

// Change main font here
.doc-block__content {
    font-size: @doc_font_size;
    font-family: @doc_font_family;
    color: @doc_font_color;
}

// Assign font to Headings H1, H2, H3
h1, h2, h3 {font-family: @headings_font_family; }

// Change font size and color and weight
// You can use any HEX color, 400 is normal font weight, anything higher is bolder anything lower is lighter. You can add weight and color assignments to H2 and H3 as well
h1 {font-size: 30px; color: @main_color; font-weight: 500;}
h2 {font-size: 24px; font-weight: 500;}
h3 {font-size: 18px; font-weight: 500;}

// Link styles
a { color: @links_color; text-decoration: underline;}
a:hover { text-decoration: none;}

// Make tables use same font size as the rest of the doc
.doc-table__tbl { font: inherit; }


// Custom classes which can be added in Advanced block settings
// -----------------------------------------------------

// Set a class for full-bleed image block
.user-img_fullbleed {margin-left: -60px; margin-right: -60px;}

// Table alternating row background colors
.user-alt_rows tr:nth-child(odd) {background: #fbfbfb;}

// Text Block with Background Color
.user-color_block {background: @main_color; color: @main_contrast_color; padding: 15px;}

// Full-bleed text Block with Background Color
.user-color_block_fullbleed {background: @main_color; color: @main_contrast_color; padding: 15px 60px; margin-left: -60px;margin-right: -60px;}

Have questions? For faster support please:

  1. Log in to PandaDoc
  2. Then click on the help button
  3. Choose Contact Support option

Or feel free to contact us using our public form:

Contact Support