PDF Themes – Advanced

Preface

This article assumes the reader has knowledge of at least the basic principles of both HTML and CSS, and explains the majority of HTML and CSS features that are unique to KashFlow’s PDF Theme Generator. This does not advise on general HTML/ CSS practises.

If you are not devising a PDF Theme entirely from scratch, it is advisable that you specify “Clean” as the Template. The “Classic” PDF Theme has superfluous HTML and CSS with classes, ids and selectors that are used only in conjunction with the unique formatting features found within its interface; as a “Template” only copies the HTML and CSS code, these features are no longer utilised and thus their code is redundant.

How ‘PDF Themes’ Work

First, a HTML document is created based on the HTML and CSS templates you have defined.

We then parse the HTML and CSS to replace specific [VARIABLES].

Some additional CSS is added, mainly to hide sections that are not needed for that specific Document Type.

The HTML document is then converted to a PDF document.

Finally, the ‘Logo’, ‘Background Image’, and ‘Document Footer’ are added along with any margins defined within the “Borders & Margins” tab of the PDF Theme.

Please Note
If you are not devising a PDF Theme entirely from scratch, it is advisable that you specify “Clean” as the Template. The “Classic” PDF Theme has superfluous HTML and CSS with classes, ids and selectors that are used only in conjunction with the unique formatting features found within its interface; as a “Template” only copies the HTML and CSS code, these features are no longer utilised and thus their code is redundant.

Variable Replacement

You should use these variables in your HTML. They’ll then be replaced with the appropriate values.

Variable NameWhat it is replace with
[SENDER_ADDRESS_COMPANY]‘Company Name’ as defined for the KashFlow Bookkeeping account
[SENDER_ADDRESS_LINE1]
[SENDER_ADDRESS_LINE2]
[SENDER_ADDRESS_LINE3]
[SENDER_ADDRESS_LINE4]
‘Address’ lines 1, 2, 3, 4 as defined for the KashFlow Bookkeeping account
[SENDER_ADDRESS_POSTCODE]‘Post Code’ as defined for the KashFlow Bookkeeping account
[SENDER_ADDRESS_PHONE]‘Tel’ as defined for the KashFlow Bookkeeping account
[SENDER_ADDRESS_EMAIL]‘Email’ as defined for the KashFlow Bookkeeping account
[SENDER_ADDRESS_SINGLELINE]A compilation of the Sender Address values 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 Sender Address (your) values 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, ie “Invoice”, “Customer Statement” etc.
[RECIPIENT_ADDRESS]A compilation of the Recipient Address in the format of
Name
Address Line 1
Address Line 2
Address Line 3
Address Line 4
Post Code
Country
[LOGOFILE]An URL to the Logo uploaded for the PDF Theme
[ADDITIONAL_TEXT]The text entered within “Misc Options” > “Additional Text” of the respective PDF Theme, for the Document Type as the tab is labelled
[STAMP_IMG]The URL to the default “PAID” and “OVERDUE” stamps of Invoices
[PAYONLINE_LINK]The URL to appropriate Payment Processor gateway for the associated Invoice
[PAYONLINE_IMG]The URL to the “Payment Button” image as specified for the KashFlow Account under ‘Settings’ > ‘Card Options’. When given the if of “#payment-button” the element will only appear on emailed documents
[DOC_INFO_BORDER]If the user has specified to “Include a border on the document details section” then this variable will be replace with the string “docInfoBorder”, otherwise it will be replaced with an empty string
[RECIP_ADDR_BORDER]If the user has specified to Include a border on the customer address then this variable will be replace with the string “recipAddrBorder”, otherwise it will be replaced with an empty string
[ADDITIONAL_TEXT_BORDER]If the user has specified to Include a border on the Additional Text section then this variable will be replace 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]The VAT Registration “Number” as defined under “Settings” > “Company Details”, with a pre-fix as defined within the “Field Names” tab of the respective PDF Theme
[SHORT_NARRATIVE]Used with Reciept 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.
[COMPANY]The company “Name” of the recipient
[CONTACT]The “Full Name” of the contact for the recipient company
[CUSTREF]
DOCUMENTDEFAULT OUTPUT
InvoiceThe Purchase Order of the Invoice
QuoteThe Purchase Order of the Quote
PurchaseThe Supplier Reference of the associated Purchase
Packing SlipThe Purchase Order of the associated Invoice
Receipt of PaymentThe Purchase Order of the associated Invoice
Remittance AdviceThe Supplier Reference of the associated Purchase
Customer StatementNot Used
Supplier StatementNot Used
[CUSTCODE]
DOCUMENTDEFAULT OUTPUT
InvoiceThe Customer Code
QuoteThe Customer Code
PurchaseThe Supplier Code
Packing SlipThe Customer Code
Receipt of PaymentThe Customer Code
Remittance AdviceThe Supplier Code
Customer StatementNot Used
Supplier StatementNot 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 “Telephone” number of the recipient
[FAX]The “Fax” number of the recipient
[MOBILE]The “Mobile” number of the recipient
[TOTAL]The total of the respective document
The following refer to the “labels” of the Document Details
[INFO_LABEL_1]
DOCUMENTDEFAULT OUTPUT
InvoiceInvoice Number
QuoteQuote Number
PurchasePO Ref
Packing SlipInvoice Number
Receipt of PaymentInvoice Number
Remittance AdviceOur Ref
Customer StatementCompany
Supplier StatementCompany
[INFO_LABEL_2]
DOCUMENTDEFAULT OUTPUT
InvoiceInvoice Date
QuoteQuote Date
PurchasePO Date
Packing SlipInvoice Date
Receipt of PaymentInvoice Date
Remittance AdviceInvoice Date
Customer StatementAccount
Supplier StatementAccount
[INFO_LABEL_3]
DOCUMENTDEFAULT OUTPUT
InvoiceDue Date
QuoteValid For
PurchaseYour Ref
Packing SlipDue Date
Receipt of PaymentDue Date
Remittance AdviceDue Date
Customer StatementDate
Supplier StatementDate
[INFO_LABEL_4]
DOCUMENTDEFAULT OUTPUT
InvoiceAccount
QuoteAccount
PurchaseNot Used
Packing SlipAccount
Receipt of PaymentAccount
Remittance AdviceAccount
Customer StatementNot Used
Supplier StatementNot Used
[INFO_LABEL_5]
DOCUMENTDEFAULT OUTPUT
InvoicePurchase Order
QuoteQuote Ref
PurchaseNot Used
Packing SlipPurchase Order
Receipt of PaymentNot Used
Remittance AdviceYour Ref
Customer StatementNot Used
Supplier StatementNot Used
[INFO_LABEL_6]
Will not display if you have specified to show Projects per Line Item
DOCUMENTDEFAULT OUTPUT
InvoiceProject
QuoteProject
PurchaseProject
Packing SlipProject
Receipt of PaymentProject
Remittance AdviceProject
Customer StatementNot Used
Supplier StatementNot Used
The following refer to the values of the Document Details
[INFO_VALUE_1]
DOCUMENTDEFAULT OUTPUT
InvoiceThe Number of the Invoice
QuoteThe Number of the Quote
PurchaseThe Number of the Purchase
Packing SlipThe Number of the associated Invoice
Receipt of PaymentThe Number of the associated Invoice
Remittance AdviceThe Number of the associated Purchase
Customer StatementThe Customer ‘Name’
Supplier StatementThe Supplier ‘Name’
[INFO_VALUE_2]
DOCUMENTDEFAULT OUTPUT
InvoiceThe Issue Date of the Invoice
QuoteThe Issue Date of the Quote
PurchaseThe Issue Date of the Purchase
Packing SlipThe Issue Date of the associated Invoice
Receipt of PaymentThe Issue Date of the associated Invoice
Remittance AdviceThe Issue Date of the associated Purchase
Customer StatementThe Customer Code
Supplier StatementThe Supplier Code
[INFO_VALUE_3]
DOCUMENTDEFAULT OUTPUT
InvoiceThe Due Date of the Invoice
QuoteThe “Valid for” time in a “* Days” format
PurchaseThe Supplier Reference of the Purchase
Packing SlipThe Due Date of the associated Invoice
Receipt of PaymentThe Due Date of the associated Invoice
Remittance AdviceThe Due Date of the associated Purchase
Customer StatementThe Statement Date
Supplier StatementThe Statement Date
[INFO_VALUE_4]
DOCUMENTDEFAULT OUTPUT
InvoiceThe Customer Code
QuoteThe Customer Code
PurchaseThe Supplier Code
Packing SlipThe Customer Code
Receipt of PaymentThe Customer Code
Remittance AdviceThe Supplier Code
Customer StatementNot Used
Supplier StatementNot Used
[INFO_VALUE_5]
DOCUMENTDEFAULT OUTPUT
InvoiceThe Purchase Order of the Invoice
QuoteThe Purchase Order of the Quote
PurchaseNot Used
Packing SlipThe Purchase Order of the associated Invoice
Receipt of PaymentThe Purchase Order of the associated Invoice
Remittance AdviceThe Supplier Reference of the associated Purchase
Customer StatementNot Used
Supplier StatementNot Used
[INFO_VALUE_6]
Will not display if you have specified to show Projects per Line Item
DOCUMENTDEFAULT OUTPUT
InvoiceThe Project Number of the Invoice
QuoteThe Project Number of the Quote
PurchaseNot Used
Packing SlipThe Project Number of the associated Invoice
Receipt of PaymentThe Project Number of the associated Invoice
Remittance AdviceThe Supplier Reference of the associated Purchase
Customer StatementNot Used
Supplier StatementNot Used
The following refer to the headers of Document Lines
[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
DOCUMENTDEFAULT OUTPUT
InvoiceQty
QuoteQty
PurchaseQty
Packing SlipQty
Receipt of Payment(Batch Payment) Not Used
(Batch Payment) Invoice Number
Remittance Advice(Batch Payment) Not Used
(Batch Payment) Our Ref
Customer StatementDate
Supplier StatementDate
[COLB_HEADER]
DOCUMENTDEFAULT OUTPUT
InvoiceDescription
QuoteDescription
PurchaseDescription
Packing SlipDescription
Receipt of Payment(Batch Payment) Not Used
(Batch Payment) Purchase Order
Remittance Advice(Batch Payment) Not Used
(Batch Payment) Your Ref
Customer Statement#
Supplier StatementReceipt #
[COLC_HEADER]
DOCUMENTDEFAULT OUTPUT
InvoiceRate
QuoteRate
PurchaseRate
Packing SlipNot Used
Receipt of Payment(Batch Payment) Not Used
(Batch Payment) Amount
Remittance Advice(Batch Payment) Not Used
(Batch Payment) Amount
Customer StatementPurchase Order
Supplier StatementRef
[COLD_HEADER]
DOCUMENTDEFAULT OUTPUT
InvoiceTotal
QuoteTotal
PurchaseTotal
Packing SlipNot Used
Receipt of Payment(Batch Payment) Not Used
(Batch Payment) Not Used
Remittance Advice(Batch Payment) Not Used
(Batch Payment) Not Used
Customer StatementDue
Supplier StatementDue
[COLE_HEADER]
Will not display on Invoices/ Quotes/ Purchases if you are not set-up as to be VAT Registered
DOCUMENTDEFAULT OUTPUT
InvoiceVAT
QuoteVAT
PurchaseVAT
Packing SlipNot Used
Receipt of Payment(Batch Payment) Not Used
(Batch Payment) Not Used
Remittance Advice(Batch Payment) Not Used
(Batch Payment) Not Used
Customer StatementInvoice Issued
Supplier StatementInvoice Received
[COLF_HEADER]
DOCUMENTDEFAULT OUTPUT
InvoiceNot Used
QuoteNot Used
PurchaseNot Used
Packing SlipNot Used
Receipt of Payment(Batch Payment) Not Used
(Batch Payment) Not Used
Remittance Advice(Batch Payment) Not Used
(Batch Payment) Not Used
Customer StatementPayment Received
Supplier StatementPayment Made
The following variables are replaced with various class names needed to control display of the columns. Can include a combination of any of the following: smallCol,
alignLeft, alignCenter
[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
DOCUMENTDEFAULT OUTPUT
InvoiceThe value for the quantity of the Line Item
QuoteThe value for the quantity of the Line Item
PurchaseThe value for the quantity of the Line Item
Packing SlipThe value for the quantity of the Line Item
Receipt of Payment(Single Payment) Not Used
(Batch Payment) The Invoice Number
Remittance Advice(Single Payment) Not Used
(Batch Payment) The Purchase Number
Customer StatementThe Date of the Invoice/ Payment
Supplier StatementThe Date of the Purchase/ Payment
[COLB_CLASSES]
DOCUMENTDEFAULT OUTPUT
InvoiceThe value for the Description of the Line Item
QuoteThe value for the Description of the Line Item
PurchaseThe value for the Description of the Line Item
Packing SlipThe value for the Description of the Line Item
Receipt of Payment(Single Payment) Not Used
(Batch Payment) The value for the Purchase Order of the Invoice
Remittance Advice(Single Payment) Not Used
(Batch Payment) The value for the Purchase Order of the Purchase
Customer StatementThe Invoice Number, or, the Bank Account for Unallocated Payments
Supplier StatementThe Purchase Number, or, the Bank Account for Unallocated Payments
[COLC_CLASSES]
DOCUMENTDEFAULT OUTPUT
InvoiceThe value for the Rate of the Line Item
QuoteThe value for the Rate of the Line Item
PurchaseThe value for the Rate of the Line Item
Packing SlipNot 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 StatementPurchase Order value, or, the ‘Comment’ value of Unallocated Payments
Supplier StatementPurchase Order value, or, the ‘Comment’ value of Unallocated Payments
[COLD_CLASSES]
DOCUMENTDEFAULT OUTPUT
InvoiceThe value for the net total of the Line Item
QuoteThe value for the net total of the Line Item
PurchaseThe value for the net total of the Line Item
Packing SlipNot Used
Receipt of Payment(Single Payment) Not Used
(Batch Payment) Not Used
Remittance Advice(Single Payment) Not Used
(Batch Payment) Not Used
Customer StatementThe Due Date of the Invoice. Not used for Payments
Supplier StatementThe Due Date of the Purchase. Not used for Payments
[COLE_CLASSES]
Will not display on Invoices/ Quotes/ Purchases if you are not set-up as to be VAT Registered
DOCUMENTDEFAULT OUTPUT
InvoiceThe value for the VAT Amount of the Line Item
QuoteThe value for the VAT Amount of the Line Item
PurchaseThe value for the VAT Amount of the Line Item
Packing SlipNot Used
Receipt of Payment(Single Payment) Not Used
(Batch Payment) Not Used
Remittance Advice(Single Payment) Not Used
(Batch Payment) Not Used
Customer StatementThe value of the Invoice Total
Supplier StatementThe value of the Purchase Total
[COLF_CLASSES]
DOCUMENTDEFAULT OUTPUT
InvoiceNot Used
QuoteNot Used
PurchaseNot Used
Packing SlipNot Used
Receipt of Payment(Single Payment) Not Used
(Batch Payment) Not Used
Remittance Advice(Single Payment) Not Used
(Batch Payment) Not Used
Customer StatementNot used for Invoice lines. The value of the Payment
Supplier StatementNot used for Purchase lines. The value of the Payment
The following variables are intended for use within the “DOCUMENT.CSS” template
[FONT]The name of the “Font” family as specified under “The Basics” tab of the respective PDF Theme
[FONTSIZE]The “Font” size (pt) as specified under “The Basics” tab of the respective PDF Theme
[FONTCOLOR]The “Font” colour in hexadecimal as specified under “The Basics” tab of the respective 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 KashFlow account. Reviewing the details below along with the HTML used in our “Clean” template should assist you in creating your own templates.

ConditionCSS
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.

Be a Hero

If you create a beautiful template that you think others will enjoy then do let us know and we’ll see if we can share it.

See how KashFlow works with your business and your books