back to knowledgebase

How can I control the style of the product rows and sub total rows using the PDF templates?

Updated: 14 February 2020 13:06:04 OpenCRM::Quotes OpenCRM::Orders::Sales Orders OpenCRM::Orders::Purchase Orders OpenCRM::Invoice OpenCRM::Settings OpenCRM::Settings::Templates

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.

 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 header row
ProductHeaderCell : For each cell in this row

ProductRow : This controls the display of the product 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

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

As of Version 3.9.5, you can also now target an individual product grid column to apply styling to only that column.

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.

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 Cell

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;
    }

 

Rate This Article
  • 1 star
  • 2 star
  • 3 star
  • 4 star
  • 5 star
Feedback and Comments
captcha code  


You may also be interested in: