Use HTML and CSS in PDF themes

If you have an understanding of HTML and CSS principles, you can edit PDF themes in more detail. This enables you to include variables in the theme which are then replaced with their values when the document is produced.

You should only use edit the HTML and CSS if you’re confident in your understanding. We are unable to give any advice or support on HTML or CSS.

If you are not devising a PDF theme entirely from scratch, it is advisable that you create the them using Clean as the template.

  1. Go to Settings. (If you've switched to the new design, select your initials, then Account Settings.)

  2. From the Configuration Settings section, select PDF Themes.

  3. Select the required PDF theme, then the HTML & CSS tab.

  4. Choose the are of the document you want to edit by selecting the appropriate tab.

  5. Edit the HTML or CSS as required then select Save & Exit. The following variables can be used:

Variable Name Replaced with
[SENDER_ADDRESS_COMPANY] The company name recorded in your company details
[SENDER_ADDRESS_LINE1] [SENDER_ADDRESS_LINE2] [SENDER_ADDRESS_LINE3] [SENDER_ADDRESS_LINE4] The address recordedin your company details
[SENDER_ADDRESS_POSTCODE]

The post code recorded in your company details

[SENDER_ADDRESS_PHONE] The telephone number recorded in your company details.
[SENDER_ADDRESS_EMAIL] The email address recorded in your company details.
[SENDER_ADDRESS_SINGLELINE] A compilation of the address recorded in your company details in the format of [SENDER_ADDRESS_COMPANY],
[SENDER_ADDRESS_LINE1],
[SENDER_ADDRESS_LINE2],
[SENDER_ADDRESS_LINE3],
[SENDER_ADDRESS_LINE4],
[SENDER_ADDRESS_POSTCODE]
[SENDER_ADDRESS_MULTILINE] A compilation of the address recorded in your company details in the format of [SENDER_ADDRESS_COMPANY]
[SENDER_ADDRESS_LINE1]
[SENDER_ADDRESS_LINE2]
[SENDER_ADDRESS_LINE3]
[SENDER_ADDRESS_LINE4]
[SENDER_ADDRESS_POSTCODE]
[DOCUMENT_TITLE] The name of the document type the PDF Theme is generating e.g. Invoice, Quote, Customer Statement, etc.
[RECIPIENT_ADDRESS] A compilation of the address stored for the customer in the format of
Name
Address Line 1
Address Line 2
Address Line 3
Address Line 4
Post Code
Country
[LOGOFILE] The URL of the Logo that has been uploaded for the PDF Theme .
[ADDITIONAL_TEXT] The text entered in the Additional Text field on the Misc Options.
[STAMP_IMG] The URL to the default PAID and OVERDUE stamps of invoices.
[PAYONLINE_LINK] The URL to the appropriate payment processor gateway for the associated invoice.
[PAYONLINE_IMG] The URL to the Payment Button image (as specified in Settings’ > Card Options. When given the ID of “#payment-button” the element will only appear on emailed documents.
[DOC_INFO_BORDER] If you have chosen to Include a border on the document details section then this variable will be replaced with the string “docInfoBorder”, otherwise it will be replaced with an empty string.
[RECIP_ADDR_BORDER] If you have chosen toInclude a border on the document details section then this variable will be replaced with the variable will be replaced with the string “recipAddrBorder”, otherwise it will be replaced with an empty string.
[ADDITIONAL_TEXT_BORDER] If you have chosen to Include a border on the additional text sectionthen this variable will be replaced with the string “addTextBorder”, otherwise it will be replaced with an empty string.
[DOCUMENT_LINES] The compiled iteration over the “LINES.HTML” template.
[DOCUMENT_TOTALS] The compiled iteration over the “LINES_TOTALS.HTML” template.
[VATNUMINFO] Your VAT number recorded in Company Details with a pre-fix as defined on the Field Names tab of the respective PDF Theme.
[SHORT_NARRATIVE] Used with Receipt of Payment, and Remittance Advice document types. A brief on the Payment Transaction in the format of: Payment of {Payment Value} received on {Transaction Date} Payment Method: {Payment Method} {Transaction Comment}.
[LONG_NARRATIVE] Used with reminder letters. Consists of all the text specified within the respective reminder letters Edit field.
[CONTACT] The full name of the contact for the recipient company.
[CUSTREF]
DOCUMENT DEFAULT OUTPUT
Invoice The purchase order for the associated invoice
Quote The purchase order for the associated quote
Purchase The supplier reference of the associated purchase
Packing slip The purchase order of the associated invoice
Receipt of payment The purchase order of the associated invoice
Remittance advice The supplier reference of the associated invoice
Customer Statement Not used
Supplier Statement Not used
 
DOCUMENT DEFAULT OUTPUT
Invoice The Customer Code
Quote The Customer Code
Purchase The Supplier Code
Packing Slip The Customer Code
Receipt of Payment The Customer Code
Remittance Advice The Supplier Code
Customer Statement Not used
Supplier Statement Not used
[PAYMENTTERMS] An Payment Terms as specified for the respective Customer or Supplier record. This simply returns the number, without a unit of measure
[TEL] The phone number recorded for the recipient.
[FAX] The fax number recorded for the recipient.
[MOBILE] The mobile number recorded for the recipient.
[TOTAL] The total of the respective document.

The following labels are used in the document details

Variable name Replaced with
[INFO_LABEL_1]
DOCUMENT DEFAULT OUTPUT
Invoice Invoice number
Quote Quote number
Purchase PO ref
Packing Slip Invoice number
Receipt of Payment Invoice number
Remittance Advice Our ref
Customer Statement Company
Supplier Statement Company
[INFO_LABEL_2]
DOCUMENT DEFAULT OUTPUT
Invoice Invoice date
Quote Quote date
Purchase PO date
Packing Slip Invoice date
Receipt of Payment Invoice date
Remittance Advice Invoice date
Customer Statement Account
Supplier Statement Account
[INFO_LABEL_3]
DOCUMENT DEFAULT OUTPUT
Invoice Due date
Quote Valid for
Purchase Your ref
Packing Slip Due date
Receipt of Payment Due date
Remittance Advice Due date
Customer Statement Date
Supplier Statement Date
[INFO_LABEL_4]
DOCUMENT DEFAULT OUTPUT
Invoice Account
Quote Account
Purchase Not used
Packing Slip Account
Receipt of Payment Account
Remittance Advice Account
Customer Statement Not used
Supplier Statement Not used
[INFO_LABEL_5]
DOCUMENT DEFAULT OUTPUT
Invoice Purchase order
Quote Quote ref
Purchase Not used
Packing Slip Purchase order
Receipt of Payment Not used
Remittance Advice Your ref
Customer Statement Not used
Supplier Statement Not used

[INFO_LABEL_6]

Will not display if you have specified to show projects per line item

DOCUMENT DEFAULT OUTPUT
Invoice Project
Quote Project
Purchase Project
Packing Slip Project
Receipt of Payment Project
Remittance Advice Project
Customer Statement Not used
Supplier Statement Not used
[INFO_LABEL_7]
DOCUMENT DEFAULT OUTPUT
Invoice Not used
Quote Not used
Purchase Not used
Packing Slip Not used
Receipt of Payment Not used
Remittance Advice Not used
Customer Statement Not used
Supplier Statement Delivery date (it will not display when you don't set it)

The following refer to the values of the Document Details

Variable name Replaced with
[INFO_VALUE_1]
DOCUMENT DEFAULT OUTPUT
Invoice Invoice number
Quote Quote number
Purchase Purchase order number
Packing Slip Associated invoice number
Receipt of Payment Associated invoice number
Remittance Advice Associated invoice number
Customer Statement Name of the associated customer
Supplier Statement Name of associated supplier
[INFO_VALUE_2]
DOCUMENT DEFAULT OUTPUT
Invoice Invoice issue date
Quote Quote issue date
Purchase Purchase order issue date
Packing Slip Associated invoice issue date
Receipt of Payment Associated invoice issue date
Remittance Advice Associated invoice issue date
Customer Statement Customer code
Supplier Statement Supplier code
[INFO_VALUE_3]
DOCUMENT DEFAULT OUTPUT
Invoice Invoice due date
Quote Valid for time in '* Days' format
Purchase Supplier reference of the purchase
Packing Slip Associated invoice due date
Receipt of Payment Associated invoice due date
Remittance Advice Associated invoice due date
Customer Statement Statement date
Supplier Statement Statement date
[INFO_VALUE_4]
DOCUMENT DEFAULT OUTPUT
Invoice Customer code
Quote Customer code
Purchase Supplier code
Packing Slip Customer code
Receipt of Payment Customer code
Remittance Advice Supplier code
Customer Statement Not used
Supplier Statement Not used
[INFO_VALUE_5]
DOCUMENT DEFAULT OUTPUT
Invoice Purchase order associated with the invoice
Quote Purchase order associated with the quote
Purchase Not used
Packing Slip Purchase order associated with the invoice
Receipt of Payment Purchase order associated with the invoice
Remittance Advice Supplier reference of the associated purchase order
Customer Statement Not used
Supplier Statement Not used
[INFO_VALUE_6]
Will not display if you have specified to show Projects per Line Item
DOCUMENT DEFAULT OUTPUT
Invoice Project number associated with the invoice
Quote Project number associated with the quote
Purchase Not used
Packing Slip Project number associated with the invoice
Receipt of Payment Project number associated with the invoice
Remittance Advice Supplier number associated with the purchase order
Customer Statement Not used
Supplier Statement Not used
[INFO_VALUE_7]
DOCUMENT DEFAULT OUTPUT
Invoice Not used
Quote Not used
Purchase Not used
Packing Slip Not used
Receipt of Payment Not used
Remittance Advice Not used
Customer Statement Not used
Supplier Statement Not used
Purchase Order Delivery date of the purchase order (if set)

The following refer to the headers of Document Lines

Variable name Replaced with
[COLA_HEADER] Will not display on Quotes if you have chosen Remove Qty field from Invoices from the Field Names tab of the PDF Theme
DOCUMENT DEFAULT OUTPUT
Invoice Qty
Quote Qty
Purchase Qty
Packing Slip Qty
Receipt of Payment Invoice number (Batch payment not used)
Remittance Advice Our ref (batch payment not used)
Customer Statement Date
Supplier Statement Date
[COLB_HEADER]
DOCUMENT DEFAULT OUTPUT
Invoice Description
Quote Description
Purchase Description
Packing Slip Description
Receipt of Payment (Single payment) Purchase order
(Batch payment) Not used
Remittance Advice (Single payment) Your ref
(Batch payment) Not used
Customer Statement #
Supplier Statement Receipt #
[COLC_HEADER]
DOCUMENT DEFAULT OUTPUT
Invoice Rate
Quote Rate
Purchase Rate
Packing Slip Not used
Receipt of Payment (Single payment) Amount
(Batch payment) Not used
Remittance Advice (Single payment) Amount
(Batch payment) Not used
Customer Statement Purchase order
Supplier Statement Ref
[COLD_HEADER]
DOCUMENT DEFAULT OUTPUT
Invoice Total
Quote Total
Purchase Total
Packing Slip Not used
Receipt of Payment Single and Batch payment not used
Remittance Advice Single and Batch payment not used
Customer Statement Due
Supplier Statement Due
[COLE_HEADER] Will not display on Invoices/ Quotes/ Purchases if you are not set-up as to be VAT Registered
DOCUMENT DEFAULT OUTPUT
Invoice VAT
Quote VAT
Purchase VAT
Packing Slip Not used
Receipt of Payment Single and Batch payment not used
Remittance Advice Single and Batch payment not used
Customer Statement Invoice issued
Supplier Statement Invoice received
[COLF_HEADER]
DOCUMENT DEFAULT OUTPUT
Invoice Not used
Quote Not used
Purchase Not used
Packing Slip Not used
Receipt of Payment Single and Batch payment not used
Remittance Advice Single and Batch payment not used
Customer Statement Payment received
Supplier Statement Payment made

The following variables are replaced with various class names needed to control the column display. You can include a combination of any of the following: smallCol, alignLeft, alignCenter.

Variable name Replaced with
[COLA_CLASSES]
Will not display on Quotes if you have chosen Remove Qty field from Invoices from the Field Names tab of the PDF Theme
DOCUMENT DEFAULT OUTPUT
Invoice Value for the quantity of line item
Quote Value for the quantity of line item
Purchase Value for the quantity of line item
Packing Slip Value for the quantity of line item
Receipt of Payment

(Single payment) Not used

(Batch payment) Invoice number

Remittance Advice

(Single payment) Not used

(Batch payment) Purchase order number

Customer Statement Invoice payment date
Supplier Statement Purchase order payment date
[COLB_HEADER]
DOCUMENT DEFAULT OUTPUT
Invoice Value for the description of the line item
Quote Value for the description of the line item
Purchase Value for the description of the line item
Packing Slip Value for the description of the line item
Receipt of Payment

(Single payment) Not used

(Batch payment) Purchase order value for the associated invoice

Remittance Advice

(Single payment) Not used

(Batch payment) Purchase order value for the associated invoice

Customer Statement Invoice number or the bank account for unallocated payments
Supplier Statement Purchase order number or the bank account for unallocated payments
[COLC_HEADER]
DOCUMENT DEFAULT OUTPUT
Invoice Value for the rate of the line item
Quote Value for the rate of the line item
Purchase Value for the rate of the line item
Packing Slip Not used
Receipt of Payment

(Single payment) Not used

(Batch payment)The amount allocated to the invoice

Remittance Advice

(Single payment) Not used

(Batch payment) The amount allocated to the purchase

Customer Statement Purchase order value or the Comment value of unallocated payments
Supplier Statement Purchase order value or the Comment value of unallocated payments
[COLD_HEADER]
DOCUMENT DEFAULT OUTPUT
Invoice Value for the net total of the line item
Quote Value for the net total of the line item
Purchase Value for the net total of the line item
Packing Slip Not used
Receipt of Payment

(Single payment) Not used

(Batch payment) Not used

Remittance Advice

(Single payment) Not used

(Batch payment) Not used

Customer Statement Invoice due date (not used for payments)
Supplier Statement Purchase order due date (not used for payments)
[COLE_HEADER]
Will not display on Invoices/ Quotes/ Purchases if you are not set-up as to be VAT Registered
DOCUMENT DEFAULT OUTPUT
Invoice Value of the VAT of the line item
Quote Value of the VAT of the line item
Purchase Value of the VAT of the line item
Packing Slip Not used
Receipt of Payment

(Single payment) Not used

(Batch payment) Not used

Remittance Advice

(Single payment) Not used

(Batch payment) Not used

Customer Statement Invoice Total
Supplier Statement Purchase order total
[COLF_HEADER]
DOCUMENT DEFAULT OUTPUT
Invoice Not used
Quote Not used
Purchase Not used
Packing Slip Not used
Receipt of Payment

(Single payment) Not used

(Batch payment) Not used

Remittance Advice

(Single payment) Not used

(Batch payment) Not used

Customer Statement

Value of the payment (not used for invoice lines)

Supplier Statement Value of the payment (not used for purchase lines)

The following variables are intended for use within the “DOCUMENT.CSS” template

Variable name Replaced with
[FONT] Name of the font family specified on The Basics tab of the PDF theme.
[FONTSIZE] Font size (pt) as specified on The Basics tab of the PDF theme.
[FONTCOLOR] Font colour in hexadecimal as specified on The Basics tab of the PDF theme.

Inserted CSS

We append some additional CSS to your template. This is either to hide sections (as the same template is used by all Document Types) or due to various other Settings defined within the IRIS Elements Cashbook account. Reviewing the details below along with the HTML used in our “Clean” template should assist you in creating your own templates.

Condition CSS
INFO_LABEL_4 is empty #docinfo_4 {display:none;}
INFO_LABEL_5 is empty #docinfo_5 {display:none;}
INFO_LABEL_6 is empty or Projects defined not to be displayed on documents #docinfo_6 {display:none;}
[SENDER_ADDRESS_*] is empty (eg, SENDER_ADDRESS_COMPANY, SENDER_ADDRESS_LINE1 etc.) .sender-address-* {display:none;} (eg, .sender-address-company {display:none;} .sender-address-line1 {display:none;} etc.)
User is not VAT registered or set their VAT Number not to show on the documents #vat-registration-info {display:none;}
Totals do not need to be shown #document-totals {display:none;}
column-* does not need to be shown (eg,column-a, column-f etc.) .column-* {display:none;} (eg, .column-a {display:none;} .column-f {display:none;} etc.)
No Document Lines need to be shown (for document types like Remittance Advice, Reminder Letters etc.) #document-lines {display:none;}
The Overdue and Paid Stamps are defined to not be displayed, or the Document is not an Overdue or Paid Invoice #stamp-image {display:none;}
The Payment Button is not defined to be displayed, or the Document is not an Unpaid Invoice #payment-button {display:none;}
The document is not a Reminder Letter #long-narrative {display:none;}
The document is not either Remittance Advice, or Receipt of Payment #short-narrative {display:none;}
The PDF Theme has no Logo uploaded for it, or it is defined to not be shown #logo{display:none;visibility:hidden;}
The user has defined a Left or Right property beneath the PDF Themes “Borders & Margins” tab Note: Top and Bottom Margins are handled automatically by the PDF conversion process #pdfdoc{margin-left:(x)px; margin-right:(y)px;}
If the font is set to Helvetica, we need to unbold headings (to match legacy settings) #pdfdoc #document-lines th, #pdfdoc h1{font-weight:normal;}

Line Templates

As well as the “DOCUMENT.HTML” and “DOCUMENT.CSS” templates there are three additional templates for the Line Items, Line Comments, and Totals of a document. These will rarely ever require editing, though can be.

LINES.HTML

This is repeated for each line of information (eg, an invoice line) in the document.

It’s important to keep the class information for each column as per the “Clean” theme:

<tr>
<td class="[COLA_CLASSES] column-a">[COLA_VALUE]</td>
<td class="[COLB_CLASSES] column-b">[COLB_VALUE]</td>
<td class="[COLC_CLASSES] column-c">[COLC_VALUE]</td>
<td class="[COLD_CLASSES] column-d">[COLD_VALUE]</td>
<td class="[COLE_CLASSES] column-e">[COLE_VALUE]</td>
<td class="[COLF_CLASSES] column-f">[COLF_VALUE]</td>
</tr>

LINES_COMMENT.HTML

This is used instead of lines.html when the line being rendered is a single cell such as a comment line:

<tr>
<td colspan="6" class="alignLeft">[COLB_VALUE]</td>
</tr>

LINES_TOTALS.HTML

This is used to generate the Document Totals beneath the main Document Lines table. It is also used for Receipt of Payments, and Remittance Advice where multiple lines need to be displayed, such as if the Payment was for multiple Invoices or Purchases:

<tr class="[class]">
<td>[label]:</td>
<td>[value]</td>
</tr>

Document spec classes

You may find need to be able to apply a different layout or formatting depending on the Document Type, and the case of Invoices, their status. This is achieved by defining a html tag within the DOCUMENT.HTML template with the class [DOCUMENT_SPECS]. For example:

<html class="[DOCUMENT_SPECS]">

Depending on the document being rendered, the variable will output the following classes:

Invoice: invoice is-paid/is-unpaid/ is-overdue is-creditNote
Packing slip: packingSlip
Quote: quote
Remittance Advice: remittanceAdvice
Payment Receipt: paymentReceipt
Purchase Order: purchaseOrder
Customer Statement: customerStatement
Supplier Statement: supplierStatement
Reminder Letter: reminderLetter

For example, if the document being rendered is an unpaid credit note, the following HTML will be rendered:

<html class="invoice is-creditNote is-unpaid">

A common example of the Document Type class being used is to insert a specialised “Additional Text” element to appear for Customer Statements. This is achieved by first creating an element within the DOCUMENT.HTML sheet within the existing “additional-text” element. For example:

<div id="additional-text" class="[ADDITIONAL_TEXT_BORDER]">
<div class="original_addText">[ADDITIONAL_TEXT]</div>
<div class="custom_addText">Some text to appear on Customer Statements about outstanding balances and Payment Terms
<br>Bank Name: name
<br>Account Number: number
<br>Sort Code: code
<p>A salutation of gratitude for their custom, or some stern warning</p></div>
</div>

Then using the defined classes as selectors within the DOCUMENT.CSS template to define under what circumstances the elements should be displayed:

/*The first selector 'targets' the custom_addText class for all
Document Types, the second 'targets' the original_addText class
for Customer Statements.*/
.custom_addText,
.customerStatement .original_addText {
display: none;
}

/*This displays our custom_addText on Customer Statements
It overrides the above declaration to not display the
custom_text on all Document Types as this is more specific
than the above simple ".custom_addText" selector.*/
.customerStatement .custom_addText {
display: initial;
}

This practise can be applied for other situations across all the Document Types and permits a great means of artistic freedom, permitting almost limitless possibilities.