Document templates on Factures.com are fully customizable, this documentation will help you to code your own templates.
Our templates are made of HTML, CSS and Liquid. Liquid is a templating language often used in the Ruby community. It's very simple to use and we invite you to check the following link for an introduction
to the markup:
Liquid for designers
For the CSS part of the template, you can use either plain old CSS or Sass with the Sassy CSS syntax (SCSS). This allows you to supercharge your CSS with variables, mixins, etc.
All the variables described in this document are also available in your account default texts.
All the themes must follow a strict (but simple) HTML structure that looks like this:
<div id="document-header">
...
</div>
<div id="document-content">
...
</div>
<div id="document-footer">
...
</div>
The following table explain these differents elements:
| Element | Required | Description |
|---|---|---|
<div id="document-header"></div>
|
No | This represent the header of your template. Everything inside this element will be repeated at the top of each page in the PDF file |
<div id="document-content"></div>
|
Yes | This represent the content of your template. This is were you should insert your document lines, totals, top and bottom texts |
<div id="document-footer"></div>
|
No | This represent the footer of your template. Everything inside this element will be repeated at the bottom of each page in the PDF file |
You should not add any
<body>
element in your HTML markup because your template code will be inserted inside the HTML code of Factures.com who already has a
<body>
element.
Here is an example of a basic SCSS structure to style tour template:
#document-header, #document-content, #document-footer{
// Template global related style
}
#document-header{
// Header related style
}
#document-content{
// Content related style
}
#document-footer{
// Footer related style
}
Because you don't have any
<body>
elements in your HTML markup, every CSS rule you want to be global on your template, for example font declaration, must go inside the
#document-header, #document-content, #document-footer{ ... }
block.