PDF Themes - Advanced - Tally Accounts

You can create your own PDF Themes for documents such as invoices, quotes and so on. The same theme template is used regardless of the type of document. This document is intended to assist you in creating new themes with custom HTML and CSS. To get started, go to Settings -> PDF Themes and click the con to add a new theme. We recommend copying the “Clean” theme as your basis. The “Classic” theme is filled with all sorts of jiggery-pokery that we had to add for legacy reasons. So you now have a new theme that you can edit. Let’s take a quick look at how the PDF generation works.

How PDF Themes Work

A HTML document is created based on the templates you provided. We then parse the HTML and CSS to replace specific [VARIABLES]. Some additional CSS is added, mainly to hide sections that aren’t needed. The HTML document is then converted to a PDF document. Finally, the background image and footer text is added, along with any top or bottom margin specified by the user.

Variable Replacement

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

Variable Name

What it’s replace with

[SENDER_ADDRESS_SINGLELINE] The address of the sender on a single line as entered in Settings -> Company Details.
[SENDER_ADDRESS_MULTILINE] The address of the sender separated over multiple lines in Settings-> Company Details.
[SENDER_ADDRESS_COMPANY] The senders company name.
[SENDER_ADDRESS_LINE1] to [SENDER_ADDRESS_LINE4] Lines 1 to 4 of the sender address.
[SENDER_ADDRESS_POSTCODE] The postcode for the sender address.
[SENDER_ADDRESS_PHONE] The sender phone number.
[SENDER_ADDRESS_EMAIL] The senders email address.
[DOCUMENT_TITLE] The title of the document, ie “Invoice”.
[RECIPIENT_ADDRESS] The address of the recipient, ie, the customer.
[INFO_LABEL_1] to [INFO_LABEL_6] Up to six fields of additional information are used in the document header. Typically this would list things such as the invoice number, date, due date, project name and so on.
[INFO_VALUE_1] to [INFO_VALUE_6] Whereas INFO_LABEL_X is substituted with the label for the information field (ie “Invoice Date”), the INFO_VALUE_X field shows the actual value (ie “1/12/2013”).
[LOGOFILE] The URL to the users logo image.
[COLA_HEADER] to [COLF_HEADER] Heading for Columns A (ie: “Qty”) to F.
[COLA_CLASSES] to [COLF_CLASSES] Replaced with various class names needed to control display of the columns. Can include a combination of the following: smallCol, alignLeft, alignCenter.
[ADDITIONAL_TEXT] The text the user has entered for the “additional text” field in their theme settings.
[STAMP_IMG] The URL to the image file of any stamp (“PAID”, “OVERDUE”) that needs to be displayed.
[PAYONLINE_LINK] The link to make a payment for an invoice.
[PAYONLINE_IMG] The URL to the image file the user wants to use to link to the payment link.
[DOC_INFO_BORDER] If the user has opted to include borders on around the document info section then this variable will be replace with the string “docInfoBorder”, otherwise it’ll be replaced with an empty string.
[RECIP_ADDR_BORDER] If the user has opted to include borders on around the recipient address section then this variable will be replace with the string “recipAddrBorder”, otherwise it’ll be replaced with an empty string.
[ADDITIONAL_TEXT_BORDER] If the user has opted to include borders on around the additional text section then this variable will be replace with the string “addTextBorder”, otherwise it’ll be replaced with an empty string.
[DOCUMENT_LINES] HTML to display the lines of the document.
[DOCUMENT_TOTALS] HTML for the total lines of the document.
[VATNUMINFO] The VAT number for the sender, along with any prefix set int he theme settings.
[SHORT_NARRATIVE] A short piece of text. Used on payment receipts and remittance advice.
[COMPANY] The name of the recipient company.
[CONTACT] The contact name at the recipient company.
[CUSTREF] The customer reference field. For invoices this is the same as [INFO_VALUE_5].
[CUSTCODE] The customer code field. For invoices this is the same as [INFO_VALUE_4].
[PAYMENTTERMS] The customers payment terms. ie “28″ for 28 days.
[TEL] The recipients telephone number.
[FAX] The recipients fax number.
[MOBILE] The recipients mobile number.
[TOTAL] The invoice total.

The following variables are intended for use in the CSS template:

[FONT] The name of the font the user has selected in the theme settings.
[FONTSIZE] The font size as set in the theme settings. We recommend using this for the body class and then using ‘em’ sizes in the rest of your CSS.
[FONTCOLOR] The font color set in the theme settings. eg #000000.

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 the settings a user has. 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 project info not set to show on documents #docinfo_6 {display:none;}.
[SENDER_ADDRESS_*] (eg, SENDER_ADDRESS_COMPANY, SENDER_ADDRESS_LINE1) is empty .sender-address-* {display:none;} /* eg .sender-address-company {display:none;} .sender-address-line1 {display:none;} */.
User is not VAT registered or set the VAT number not to show on the documents #vat-registration-info {display:none;}.
Totals don’t need to be shown #document-totals {display:none;}.
column-a doesn’t need to be shown (through to column-f) .column-a {display:none;}.
No lines need to be shown – eg, for letters, receipts, etc. #document-lines {display:none;}.
There is no stamp to display #stamp-image {display:none;}.
There is no payment button to display #payment-button {display:none;}.
There is no long narrative to display #long-narrative {display:none;}.
There is no short-narrative to display #short-narrative {display:none;}.
There is no logo to display #logo{display:none;visibility:hidden;}.
The user has set a left or right margin Note: Top/bottom margins are handled automatically by te 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.htm and document.css templates you’ll see that there are three additional templates for the lines on a document. These should rarely require editing. 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: class=”[COLA_CLASSES] column-a” lines_comment.html This is used instead of lines.html when the line being rendered is a single cell such as a comment line. lines_totals.htm This is used to generate the total lines at the bottom of a document. It’s also used for receipts and remittance advice where multiple lines need to be displayed (if the payment was for multiple invoices/receipt). If a total line needs to be bolded or have a line above it then the classes ‘bolded’ and ‘lineAbove’ are added. So ensure your CSS has classes named .bolded and .lineAbove for this to work.

Document spec classes

There are times when you need to be able to apply different styles depending on the status or type of document. In document.html add the following variable:

Depending on the document being rendered, the

[DOCUMENT_SPECS]

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:

Say you want to have a section in my theme with some custom payment details in document.html you would add a new section:

<h3>Payment Details</h3>

...

</div>

Of course, you don't really want the payment details to be shown unless the document is an unpaid invoice so add the following to document.css:

.custom-payment-details {

display: none;

}

.invoice.is-unpaid .custom-payment-details {

display: block;

}

Other use cases, such as payment stamps, can be achieved by taking the same approach.

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.