Custom Templates

Custom templates are incredibly useful when you want to add a little bit of your branding to one of the four templates that ship with Esfresco, or create your own!

Tweaking or creating a template.

Download the zip file that contains the four templates’ source and a special file called base.css

If you’re tweaking an existing template, open it’s .jade or .html file, and tweak it away.

If you’re creating a new template, start off by extending base.css to create your template’s own CSS file.

Your HTML file needs to be valid. You can ensure this by previewing it in browser. We recommend Safari.

You can then ensure it’ll print properly by invoking the print dialogue (⌘ + p on OS X, Ctrl + p on Windows) and then selecting Save as PDF form the bottom left dialog box. Repeat this process till you’re satisfied with the result.

Once your HTML and CSS files are ready, copy over the entire CSS file into the <head>...</head> section of your html between the <style>...</style> tags. Create these if necessary. As Esfresco works with a single parseable file, this is a necessary step. See the section below on embedding images.

Now, it's time to host this file somewhere, so that Esfresco can publicly access it. We recommend a simple file-server, or apps like Dropbox, CloudApp, etc. which expose a publicly accessible URL. 

Copy this URL (as of iOS 9, this must be a secure HTTPS/FTPS url) and then open Esfresco, head over to Settings > Global Settings and tap on the New Icon. In the text field, paste the URL.

At this point, Esfresco will download the file and parse it. If everything was correctly done, you'll be notified. If something went wrong, check to see if the template has all the necessary tags included.

If the template is successfully imported, it'll now be available under Templates. If you have iCloud enabled, it'll sync to your other devices momentarily.

Important tags

{{tableBody<tr>
    <td colspan="5">{{itemTitle}}</td>
    <td colspan="4">{{itemQuantity}}</td>
    <td colspan="2">{{itemRate}}</td>
    <td colspan="3">{{itemTotal}}</td>
</tr>/tableBody}}

This section includes the essential information of your invoice's items. All tags are compulsory, as is this section. Omitting this section will result in a corrupted template. 

{{taxItem<tr class="taxItem">
     <td colspan="8"></td>
     <td colspan="3">{{taxTitle}}</td>
     <td colspan="3">{{taxAmount}}</td>
</tr>/taxItem}}

This section includes the essential information for your invoice's tax items. All tags are compulsory, as is this section. Omitting this section will result in a corrupted template.

Optional Tags

The following tags are optional. Esfresco will be able to successfully parse the template if either or all of the following tags are not included. These are convenience tags. If you believe we missed on a tag, let us know.

Tag Description
{{invoiceTitle}}
Title of the invoice
{{invoiceDate}}
Date on which the invoice was generated
{{dueDate}}
If the invoice has been emailed, the due date will be printed, else, it'll simply state "Draft".
{{clientName}}
Client's Company or name. The company name will be prioritized.
{{clientAddress}}
Client's address.
{{total}}
The total amount, including taxes (positive and/or negative percentiles).

Embedding Images

If you'd like to embed images in your templates, follow the steps outlined below. As Esfresco works with a single, always offline, HTML file, linking to remote images isn't supported.

You said something about Open Source?

Yes, yes we did. All of the four templates and their source files are open source. You can find them on github. Feel free to extend them as you require. If you find a bug, or a mistake, feel free to send us a pull request with the fix. Have a question, or would like to suggest a new template, open an issue as a question.

View on Github