[Classic Editor] Advanced design with CSS

What can I do with the help of CSS?

CSS will help you go beyond PandaDoc’s standard editor capacities to give your document an even more sophisticated look. Using custom CSS code, you can hide elements, change fonts, text size, backgrounds, modify table sizes, etc.

How to access and apply CSS

If you're going to amend CSS code entered before, we recommend making a copy of the template/document, in case you will want to go back to the initial styling.

Open a document or a template, go to ...More > Design, scroll down and click “Edit CSS”, paste your code and click “Save”.

Limitations

1. CSS styling is available for editable PandaDoc templates and documents only
2. CSS cannot be applied in Content Library items
3. Due to limitations of our PDF renderer, a few of the CSS codes you apply might not make it into your document/template PDF.

List of CSS classes and selectors you can use to style content blocks

How to apply styling to a specific block

You can achieve this with the help of CSS classes. In the PandaDoc CSS code section, you can create a class by specifying a content block using any name preceded by .user-

.user-mytable1 {
  CSS code;
} 

Then you must apply it to a specific block: click on this content block and in the right-hand settings click Advanced and paste this class without the full stop (.):

Here is a more in-depth look on what you can do with the help of custom CSS

Change font properties

Change font family of document text (without headings): 

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

If you want to include headings, add headings classes separating them with a comma:

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

You can add more headings: h4, h5, h6

Set font size: 

.doc-block__content {
  font-size: 14px;
}

Set font color:

.doc-block__content {
  color: #ff0000
}

Set font weight (might be useful for headings styling):

h1 {
  font-weight:bold;
}

Expand for how to import another font

Watch a short video on how to import a Google Font:

Here are step-by-step instructions: 

• Go to Google Fonts  and choose a font. Click on "+" to select this font.
• Go to the Import tab and copy the import url as shown below.

• Go to PandaDoc CSS, paste the code .imports { } including your import URL like this: .imports { @import url('https://fonts.googleapis.com/css?family= Arimo');}
• Apply this font family to your content blocks:

.doc-block__content{ font-family: 'Arimo', sans-serif; }

Note:

you can look up how to spell out the font family code in Google fonts, under Specify in CSS

Change paragraph properties

Modify alignment:

Align to "left" "center" or "right"

h1 {
  text-align: center;
}

Change line height:

.doc-block__content {
  line-height: 21px;
}

Style tables

Change table headers: background color and border color

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

Change table cell borders color:

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

Remove all table borders:

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

Remove table header borders:

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

Change table section header background and font color:

.doc-table__tbl-section {
  background: #D23A95;
color: #fff;
}

Change table row height:

td {
  padding: 4px;
}

.contenteditable {
  min-height: 4px;
}

Change font size in a table column:

.doc-table__tbl td:last-child {
  font-size: 7px;
}

.doc-table__tbl td:nth-last-child(3) {
  font-size: 7px;
}

Hide horizontal borders except for outside ones:

td {
  border-bottom: 0;
  border-top: 0;
}

tr:last-child {
  border-bottom: 2px solid #f1f1f1;
}

Try this code when a table breaks down in the middle of a row in PDF:

table {
  page-break-inside:auto !important;
}

tr {
  page-break-inside:avoid !important;
  page-break-after:auto !important;
}

Style pricing table

Make product name bold:

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

Hide product description:

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

Hide total:

.pricing-footer__total {
  display: none;
}

Hide summary & total:

.pricing-footer__tbl {
  display: none;
}

Change background and font color in pricing table footer:

.pricing-footer__tbl {
  background: #D23A95;
  color: #fff;
}

.pricing-footer__label {
  background: transparent;
}

Pricing table section footer:

.doc-table__tbl-section_footer {
  background: #D23A95;
  color: #fff;
}

Avoid table break in the middle of a row in PDF:

table {
  page-break-inside:auto !important;
}

tr {
  page-break-inside:avoid !important;
  page-break-after:auto !important;
}

Style cover page

Style header:

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

Stretch background to fit the page:

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

Avoid repeating of the background image (in case it’s smaller than the cover page):

.document-page--cover .document-page__sheet {
  background-repeat: no-repeat;
  background-size: 100% auto;
}

Hide the text block:

.cover-text {
  display: none;
}

Hide the title block:

.cover-title {
  display: none;
}

Style page header/footer

Change header/footer logo size:

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

Style header and footer text:

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

Stretch image in the footer/header to the full size of the block:

.doc-block--footer {// or .doc-block--header
  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;
}

When the header cuts off the first line of the text following it:

.doc-block--header {
  margin-bottom: -20px;
}

Apply styling in PDF only

Add .pdf &and a selector to restrict styling to PDF only:

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

Apply styling in Web only:

After html:not(.pdf)& add a selector you want to style:

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