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.