Important: You should have some basic HTML and CSS knowledge before attempting anything in the below article.

It is possible to add styles to the product and sub total rows produced when using your own customised PDF templates by inserting some style code into the HTML source of the PDF Header section. These same classes can be used the style the Invoice and Activity grids on Company and Project PDFs, respectively.

 If you aren't sure how to access the source code of the PDF templates, please scroll to the bottom of this article.

There are the following relevant classes you will need to use:

ProductsHeader : This controls the display of the product, invoice, or activity header row
ProductHeaderCell : For each cell in this row

ProductRow : This controls the display of the product, invoice, or activity row
ProductRowCell : For each cell in this row

ProductSubtotalRow : This controls the display of the sub-total rows when grouping and sub-totals are used
ProductSubtotalRowCell : For each cell in this row

ProductDiscountRow :  The style used on discount rows when grouping and sub-totals are used
ProductDiscountRowCell : For each cell in this row

ProductSubtotalADiscountRow:  The style used on sub-total after discount rows when grouping and sub-totals are used
ProductSubtotalADiscountRowCell: For each cell in this row

ProductSubGroupHeader : The style used on sub-group headings when this feature is turned on (Quotes Only)
ProductSubGroupHeaderCell : For each cell in this row

The styling you can do includes:

1. Styling all the cells within a row
2. Giving different styles to alternating rows (alternating grey and white background colours, for example)
3. Applying a different style to individual columns (changing the alignment, for example)
4. Changing the style of an individual cell within the header (altering the alignment or font size, for example)

Styling All Cells

You can change the styling on all the cell on your PDF template by changing the css for the  .ProductRowCell class.

For example, you might want to have all the information in your product grid centred aligned, rather than the default left for text, right for currency. 

You can change the alignment of ALL the columns (see below for targeting individual ones), by editing the source code. The line you need to edit is

After sans-serif; add the required alignment e.g. text-align: left; text-align:center; or text-align:right;

Important: This will change the alignment for ALL the Product columns.

Style All or Alternating Rows

If you want to apply styling to alternating rows on your PDF, you will need to target the classes .row_odd for odd number rows and .row_even for even number rows.

For example, if you wanted to change the background colour of the rows to alternating shades of grey, you would need to include the following: 

Style Specific Columns

You can also target an individual product grid column to apply styling to only that column. This does not include the header row (see below)

To do this, you will need to create a new "class" using the following format: .ProductRowCell.columnname

When referencing your column please removed any spaces or non alphanumeric characters from the column label, e.g. margin_percent should be referred to as .marginpercent, Sort Code should be .sortcode.

For example, to target the Quantity column you would use ".ProductRowCell.quantity" while the List Price column would be ".ProductRowCell.listprice"

In the following example we have changed the text alignment to a few of our columns. Important: this will only work on the columns themselves, NOT the headers.

Alternatively, you can do it as follows using the "nth-child" css notation where the number in brackets is the column number to apply the style to:

Once you have finished editing your row and column styles click Apply or Save to save your template then you can run the export to pdf on your record 

Style Specific Header Cells

You can style individual header cells by targeting the specific column number you want to style as per example below.

By adding the column number after the word "nth-child" in brackets, you can select an individual header cell.

How to edit the source code

To access the PDF template editor,:

1. If your account enabled you to access settings then click on settings 

2. Navigate down to Communication Templates - PDF Templates

3. Select template group then the template you would like to edit

4. Click the Edit button at the top of the page (alternatively, you may wish to click to Duplicate if you are testing this out for the first time)

5. Scroll down to the PDF Header section and click on down arrow on the right

6. Click on Source

7. Find the "style" section of the code. You will be looking for an "open" bracket

This is what it should look like in OpenCRM.

4. Copy and paste your stylesheet code in between these style brackets.

We have used the below example code to give you an idea of what it will look like.

Example Style Code

Here is some example stylesheet code - this will make the subtotal rows have a grey background and a bolder font.

.ProductsHeader {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    }
.ProductsHeaderCell {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    border: 1px;
    border: 1px solid #000000;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    border-left: 1px solid #000000;
    }
.ProductRow {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    }
.ProductRowCell {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    }
.ProductSubtotalRow {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    background-color:#eeeeee;
    font-weight:bold;
    }
.ProductSubGroupHeader{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    background-color:#dddddd;
    }
.ProductDiscountRow {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    background-color:#eeeeee;
    }
.ProductSubtotalADiscountRow {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    background-color:#eeeeee;
    }