Invoice Templates & Styles
-
Invoice templates define what and how information will be shown on the invoice.
-
Invoice styles define how the invoice will look.
New Invoice/Export Template
To create a new invoice/export template the easiest way is to copy the /templates/invoices/default sub-directory to make a new directory for your template. For example, you want to make a template for ACME Inc. Do the following:
- Copy /templates/invoices/default to be /templates/invoices/acme_inc.
- Copy you company logo image file to the /templates/invoices/logos directory.
- In the /templates/invoices/acme_inc directory, edit the template.tpl and style.css files to display the ACME Inc. invoice. Click here for Smarty template development documentation. Note that the template.tpl line, <link rel=”stylesheet” type=”text/css” href=”{$css|urlsafe}” media=”all”>, loads the style.css file in the template.
- If needed, create Smarty plugins in the /templates/invoices/acme_inc/plugins directory. Click here for Smarty plugin documentation.
Inside this directory is a file called, template.tpl. It’s the basic template file and will be read out automatically. So just modify this file to your needs.
The second file is called, style.css. If you want to use css tags stored in an external file then you have to store it in style.css. To include it in your template.tpl, file you have to add a <link> with the href=”{$css}” setting.
The variable $css automatically points to your style.css file.
Activating your template
Using the ACME Inc. example from above, in Simple Invoices do the following:
- Select the Settings tab.
- Select the SI Defaults menu link.
- Select the Default Invoice Template Edit icon.
- In the drop down list, select the acme_inc directory.
- Save your selection