Difference between revisions of "PDF templates"

Revision as of 09:05, 19 July 2022

Features described in this article will be available with the forthcoming system release.

Watch our video tutorial on Common notes -

You can create PDF templates for client invoices, vendor invoices, quotes, and job PO.

PDF template text can contain valid XHTML 1.0 markup. Allowed XHTML elements: a, b, br, div, h1, h2, h3, h4, h5, h6, hr, i, li, ol, p, span, ul. Allowed attributes: href, style.

To create a template, go to Settings → PDF Templates:

You always can clone, update or delete the templates:

800px

Client invoice PDF templates

To create the client invoice PDF template, go to Settings → PDF Templates → Client invoice:

300px

Click "New PDF template":

900px

Fill in the fields and select the needed options:

• Name — a name of the template;

• Page size — select whether the page size is A4 or a letter size;

• Page orientation — select the portrait or landscape page orientation;

• Top margin, mm — select the top margin height in millimeters;

• Bottom margin, mm — select the bottom margin height in millimeters;

• Locale - locale defines the language of the template text;

• Page header — a text that appears at the top of the page;

• Page footer — a text that appears at the bottom of the page;

• Common note — a text that appears after the payment method description;

900px

You can define a default client invoice PDF template and it will be applied to all the newly created clients.

Go to the Account page, scroll down to the Default settings, and click "Update":

900px

Select the needed one from the drop-down list and click "Update":

900px

You can also select the default client invoice PDF template for each client.

Go to the needed client profile, scroll down to the Settings section and click "Update":

Select the template from the drop-down list and click "Update":

If needed, you can select the template for a specific client invoice:

Open the needed invoice and click "Update":

Choose the template from the drop-down list, and click "Update":

Back to the table of contents.

Vendor invoice common notes

To add the vendor invoice common notes, go to Settings → Common notes → Vendor invoice:

300px

Press "New common note":

900px

Enter the name, the comment, and press "Create":

900px

You can define a default vendor invoice common note that will be displayed in every vendors' invoices you issue.

Go to the Account page, scroll down to the Default settings, and press "Update":

900px

From the drop-won list choose the needed one, and press "Update":

900px

You can update the common vendor invoice note in invoices. Open the needed invoice and press "Update":

900px

Choose the needed invoice common note from the drop-down list, and press "Update":

600px

Back to the table of contents.

Quote common notes

To add the quote common notes, go to Settings → Common notes → Quote:

Press "New common note":

900px

Enter the name, the comment, and press "Create":

900px

You can define a default quote common note that will be added to every quote you create.

Go to the Account page, scroll down to the Default settings, and press "Update":

From the drop-down list choose the needed one, and press "Update":

600px

Add a quote common note

You can update the common quote note in the needed quote when you create it.

You also can add the common not by pressing the "Update":

Choose the needed quote common note from the drop-down list, and press "Update":

Back to the table of contents.

Job PO common notes

To add the job PO common notes, go to Settings → Common notes → Job PO:

300px

Press "New common note":

900px

Enter the name, the comment, and press "Create":

900px

You can define a default job PO common note that will be added to every job you create.

Go to the Account page, scroll down to the Default settings, and press "Update":

900px

From the drop-down list choose the needed one, and press "Update":

You can update the common job PO note for the needed job when you create it.

Or open already created job and press "Update":

Choose the needed job PO common note from the drop-down list, and press "Update":

450px

Back to the table of contents.

XHTML elements and attributes

TAG	DESCRIPTION	EXAMPLE	VIEW
<a href>	The <a> tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the <a> element is the href attribute, which indicates the link's destination.	<a href="protemos.com">Visit my website</a> <a href="mailto:as@protemos.com">as@protemos.com</a>
<b>	The tag specifies bold text without any extra importance.	<b>This text is bold</b>
<br/>	The tag inserts a single line break.	<br/>
<div>	Defines a division part. It's a block-level element	<div style="text-align: center;">This text is in the center.</div>
<h1> to <h6>	Defines Headings level from 1 to 6 different sizes.	<h1 style="color:blue;">This is a heading</h1>
<hr>	Represents a thematic break between paragraph-level tags. It is typically drawn horizontal line.	<hr/>
<i>	The content inside is typically displayed in italic.	<i>This text is italic</i>
<li>	The tag defines a list item. The <li> tag is used inside ordered lists(<ol>), unordered lists (<ul>)	<ol> <li>Quote</li> <li>Project</li> <li>Job</li> </ol>
<ol>	The tag defines an ordered list. An ordered list can be numerical or alphabetical. The <li> tag is used to define each list item.	<ol> <li>Quote</li> <li>Project</li> <li>Job</li> </ol>
<p>	The tag defines a paragraph.	<p>This project is due <span style="color: red;">30 days</span>.</p>
<span>	The tag is an inline container used to mark up a part of a text, or a part of a document. The tag is much like the <div> element, but <div> is a block-level element and is an inline element.	<p>This is a <span style="color:blue;"> paragraph</span>.</p>
<ul>	The tag defines an unordered (bulleted) list. Use the <ul> tag together with the <li> tag to create unordered lists.	<ul> <li>Quote</li> <li>Project</li> <li>Job</li> </ul>
<style>	Used to add CSS style, e.g.: - Underline the text - Align the text - Change the size of the text.	<p style="text-decoration: underline;"> Underlined text </p> <p style="text-align: center;">This text is in the center.</p> <p style="font-size:12px">This text size is 12 px.</p>

For text to start from a new page - <p style="clear: both; display: block; page-break-after: always;"></p>

That's the example on how your invoice can look like:

Note: please avoid this sign & because the system doesn't allow to save the common note.

Back to the table of contents.