Difference between revisions of "PDF templates"
(→XHTML elements and attributes) |
|||
(139 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | + | =='''PDF Templates'''== | |
− | You can | + | You can create PDF templates for client invoices, vendor invoices, quotes, and job PO. |
− | + | PDF templates 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 | + | To create a template, go to '''Settings → PDF Templates:''' |
− | [[File: | + | [[File:Settings - pdf templates.png|border|280px]] |
− | You always can update or delete the | + | You always can clone, update or delete the templates: |
− | [[File: | + | [[File:Client invoice pdf templates+.png|border|1070px]] |
− | =='''Client invoice | + | =='''Client invoice PDF templates'''== |
− | To | + | To create the client invoice PDF template, go to '''Settings → PDF Templates → Client invoice''': |
− | [[File: | + | [[File:Settings - pdf templates - client invoice.png|border|280px]] |
− | + | Click '''"New PDF template"''': | |
− | [[File: | + | [[File:New pdf template (client invoice).png|border|1000px]] |
− | + | Fill in the fields, select the needed options and click '''"Create"''': | |
− | [[File: | + | [[File:New cl invoice pdf template2.png|border|1000px]] |
− | + | *'''Name''' — the name of the template; | |
− | + | *'''Page size''' — select A4 or a letter size; | |
− | + | *'''Page orientation''' — select the portrait or landscape page orientation; | |
− | + | *'''Top margin, mm''' — the top margin height in millimeters; | |
− | + | *'''Bottom margin, mm''' — the bottom margin height in millimeters; | |
− | + | *'''Locale''' — locale defines the language of the template text; | |
− | + | *'''Page header''' — the text that appears at the top of the page; | |
− | + | *'''Page footer''' — the text that appears at the bottom of the page; | |
− | + | *'''Common note''' — this field is used for any additional notes; | |
− | + | *'''Include CAT log details''' — unmark this checkbox if you want to remove CAT log details from the PDF template. | |
− | + | You can define a default client invoice PDF template that will be applied to invoices for all the new clients. | |
− | + | Go to the '''Account''' page, scroll down to the '''Account settings''', and click '''"Update"''': | |
− | + | [[File:Account settings (client invoice template).png|border|1000px]] | |
− | + | Select the needed one from the drop-down list and click '''"Update"''': | |
− | + | [[File:Update account settings+.png|border|1000px]] | |
− | + | You can also select the default client invoice PDF template for a particular client. | |
− | + | Go to the needed client profile, scroll down to the '''Settings''' section and click '''"Update"''': | |
− | [[File: | + | [[File:Client profile setting section.png|border|1000px]] |
− | + | Select the template from the drop-down list and click '''"Update"''': | |
− | + | [[File:Client profile settings section1.png|border|1000px]] | |
− | + | If needed, you can select the template for a specific client invoice. Open the needed invoice and click '''"Update"''': | |
− | + | [[File:Update client invoice.png|border|1000px]] | |
− | + | Choose the template from the drop-down list and click '''"Update"''': | |
− | + | [[File:Update cl invoice2.png|border|1000px]] | |
− | [[File: | + | [[File:Redirect.jpg|40px|link=PDF templates]] Back to the '''table of contents'''. |
− | + | =='''Vendor invoice PDF templates'''== | |
− | + | To add the vendor invoice PDF templates, go to '''Settings → PDF Templates → Vendor invoice''': | |
− | [[File: | + | [[File:Settings - pdf templates - vendor invoice.png|border|280px]] |
− | + | Click '''"New PDF template"''': | |
+ | [[File:New vendor invoice PDF templates.png|border|1000px]] | ||
− | + | Fill in the fields, select the needed options and click '''"Create"''': | |
− | + | [[File:New cl invoice pdf template2.png|border|1000px]] | |
− | + | *'''Name''' — the name of the template; | |
− | + | *'''Page size''' — select A4 or a letter size; | |
− | + | *'''Page orientation''' — select the portrait or landscape page orientation; | |
− | + | *'''Top margin, mm''' — the top margin height in millimeters; | |
− | + | *'''Bottom margin, mm''' — the bottom margin height in millimeters; | |
− | + | *'''Locale''' — locale defines the language of the template text; | |
− | + | *'''Page header''' — the text that appears at the top of the page; | |
− | + | *'''Page footer''' — the text that appears at the bottom of the page; | |
− | + | *'''Common note''' — this field is used for any additional notes; | |
− | + | *'''Include CAT log details''' — unmark this checkbox if you want to remove CAT log details from the PDF template. | |
− | + | You can define a default vendor invoice PDF template that will be applied to invoices for all the new vendors. | |
− | + | Go to the '''Account''' page, scroll down to the '''Account settings''', and click '''"Update"''': | |
− | + | [[File:Account settings - def v invoice template.png|border|1000px]] | |
− | + | Select the needed one from the drop-down list and click '''"Update"''': | |
− | + | [[File:Update account settings (v invoice).png|border|1000px]] | |
− | + | You can also select the default vendor invoice PDF template for each vendor. | |
− | + | Go to the needed vendor profile, scroll down to the '''Settings''' section and click '''"Update"''': | |
− | + | [[File:Update vendor profile+.png|border|1000px]] | |
− | + | Select the template from the drop-down list and click '''"Update"''': | |
− | [[File:1 | + | [[File:Update vendor profile+1.png|border|1000px]] |
− | + | If needed, you can select the template for a specific vendor invoice. Open the needed invoice and click '''"Update"''': | |
− | [[File: | + | [[File:Update vendor invoice.png|border|1000px]] |
− | + | Choose the template from the drop-down list and click '''"Update"''': | |
− | [[File: | + | [[File:Update vendor invoice2.png|border|1000px]] |
− | + | [[File:Redirect.jpg|40px|link=PDF templates]] Back to the '''table of contents'''. | |
− | + | =='''Quote PDF templates'''== | |
− | + | To create the quote PDF template, go to '''Settings → PDF Templates → Quote''': | |
− | + | [[File:Settings - pdf templates - quote.png|border|280px]] | |
− | + | Click '''"New PDF Template"''': | |
− | + | [[File:New quote pdf template.png|border|1000px]] | |
− | + | Fill in the fields, select the needed options and click '''"Create"''': | |
− | [[File: | + | [[File:New cl invoice pdf template2.png|border|1000px]] |
− | + | *'''Name''' — the name of the template; | |
− | + | *'''Page size''' — select A4 or a letter size; | |
− | [[File:Redirect.jpg|40px|link=Common notes]] Back to the '''table of contents'''. | + | *'''Page orientation''' — select the portrait or landscape page orientation; |
+ | |||
+ | *'''Top margin, mm''' — the top margin height in millimeters; | ||
+ | |||
+ | *'''Bottom margin, mm''' — the bottom margin height in millimeters; | ||
+ | |||
+ | *'''Locale''' — locale defines the language of the template text; | ||
+ | |||
+ | *'''Page header''' — the text that appears at the top of the page; | ||
+ | |||
+ | *'''Page footer''' — the text that appears at the bottom of the page; | ||
+ | |||
+ | *'''Common note''' — this field is used for any additional notes; | ||
+ | |||
+ | *'''Include CAT log details''' — unmark this checkbox if you want to remove CAT log details from the PDF template. | ||
+ | |||
+ | You can define a default quote PDF template that will be selected automatically when creating quotes. | ||
+ | |||
+ | Go to the '''Account''' page, scroll down to the '''Account settings''' section and click '''"Update"''': | ||
+ | |||
+ | [[File:Define default quote template.png|border|1000px]] | ||
+ | |||
+ | Select the needed one from the drop-down list and click '''"Update"''': | ||
+ | |||
+ | [[File:Update account settings (quote).png|border|1000px]] | ||
+ | |||
+ | You can select the PDF template for the quote when you create it. | ||
+ | |||
+ | If needed, you can select the template for a specific quote. Open the needed quote and click '''"Update"''': | ||
+ | |||
+ | [[File:Update quote (pdf template).png|border|1000px]] | ||
+ | |||
+ | Choose the template from the drop-down list, and click '''"Update"''': | ||
+ | |||
+ | [[File:Update quote2.png|border|1000px]] | ||
+ | |||
+ | [[File:Redirect.jpg|40px|link=PDF templates]] Back to the '''table of contents'''. | ||
+ | |||
+ | =='''Job PO PDF templates'''== | ||
+ | |||
+ | To add the job PO PDF templates, go to '''Settings → PDF templates → Job PO''': | ||
+ | |||
+ | [[File:Settings - pdf templates - job PO.png|border|280px]] | ||
+ | |||
+ | Click '''"New PDF Template"''': | ||
+ | |||
+ | [[File:New PDF template (job po).png|border|1000px]] | ||
+ | |||
+ | Fill in the fields, select the needed options and click '''"Create"''': | ||
+ | |||
+ | [[File:New cl invoice pdf template2.png|border|1000px]] | ||
+ | |||
+ | *'''Name''' — the name of the template; | ||
+ | |||
+ | *'''Page size''' — select A4 or a letter size; | ||
+ | |||
+ | *'''Page orientation''' — select the portrait or landscape page orientation; | ||
+ | |||
+ | *'''Top margin, mm''' — the top margin height in millimeters; | ||
+ | |||
+ | *'''Bottom margin, mm''' — the bottom margin height in millimeters; | ||
+ | |||
+ | *'''Locale''' — locale defines the language of the template text; | ||
+ | |||
+ | *'''Page header''' — the text that appears at the top of the page; | ||
+ | |||
+ | *'''Page footer''' — the text that appears at the bottom of the page; | ||
+ | |||
+ | *'''Common note''' — this field is used for any additional notes; | ||
+ | |||
+ | *'''Include CAT log details''' — unmark this checkbox if you want to remove CAT log details from the PDF template. | ||
+ | |||
+ | You can define a default job PO PDF template that will be applied to every job PO you create. | ||
+ | |||
+ | Go to the '''Account''' page, scroll down to the '''Account settings''' section, and click '''"Update"''': | ||
+ | |||
+ | [[File:Account settings (job po).png|border|1000px]] | ||
+ | |||
+ | Select the needed one from the drop-down list and click '''"Update"''': | ||
+ | |||
+ | [[File:Update account settings (job po)2.png|border|1000px]] | ||
+ | |||
+ | You can also select the job PO PDF template for the job when you create it. | ||
+ | |||
+ | If needed, you can select the job PO template for a specific job. Open the needed job and click "Update": | ||
+ | |||
+ | [[File:Update job (select PO template)1.png|border|1000px]] | ||
+ | |||
+ | Choose the needed job PO PDF template from the drop-down list and click '''"Update"''': | ||
+ | |||
+ | [[File:Update job (select PO template).png|border|1000px]] | ||
+ | |||
+ | [[File:Redirect.jpg|40px|link=PDF templates]] Back to the '''table of contents'''. | ||
+ | |||
+ | =='''Add images'''== | ||
+ | |||
+ | ''PDF template images page: [https://cloud.protemos.com/pdf-image-file/index cloud.protemos.com/pdf-image-file/index]'' | ||
+ | ---- | ||
+ | |||
+ | This functionality can be used for adding signatures, seals, payment systems logos, etc. to your PDF templates. | ||
+ | |||
+ | To add images to your templates, go to the '''PDF images''' page first: | ||
+ | |||
+ | [[File:Settings - pdf templates - pdf images+.png|border|270px]] | ||
+ | |||
+ | Click the '''"New PDF image"''' button: | ||
+ | |||
+ | [[File:Pdf template images+.png|border|1070px]] | ||
+ | |||
+ | Fill in the name, select a needed image, then click '''"Create"''': | ||
+ | |||
+ | [[File:Upload image.1.png|border|1070px]] | ||
+ | |||
+ | The uploaded image will be displayed on the '''PDF template images''' page, and you will be able to add it to the templates: | ||
+ | |||
+ | [[File:Uploaded images list.png|border|1070px]] | ||
+ | |||
+ | Find the needed template and click '''"Update"''': | ||
+ | |||
+ | [[File:Update the template.png|border|1070px]] | ||
+ | |||
+ | To add the image, please use the corresponding HTML markup elements and attributes: '''<img src="{IMAGE:visa_logo}" alt=""/>''' | ||
+ | |||
+ | [[File:Add image to template (html).png|border|1070px]] | ||
+ | |||
+ | This is what the added images will look like on the PDF file: | ||
+ | |||
+ | [[File:Pdf example.png|border|650px]] | ||
+ | |||
+ | ==='''Download, update and delete images'''=== | ||
+ | |||
+ | You can also download, change the name and choose another image or delete images by clicking the corresponding buttons: | ||
+ | |||
+ | [[File:Download, update and delete images.png|border|1070px]] | ||
+ | |||
+ | <span style="color:orange">'''Note:'''</span> Images that are already used in templates cannot be deleted, but you can replace the uploaded image so that its name and URL macro stay the same. To do so, click '''"Update"''': | ||
+ | |||
+ | [[File:Update uploaded image.png|border|1070px]] | ||
+ | |||
+ | Click '''"Choose file"''', select the needed image and click '''"Update"''': | ||
+ | |||
+ | [[File:Update uploaded image+.png|border|1070px]] | ||
=='''XHTML elements and attributes'''== | =='''XHTML elements and attributes'''== | ||
Line 169: | Line 311: | ||
|3. " valign="top" align="center" width="300" | '''EXAMPLE''' | |3. " valign="top" align="center" width="300" | '''EXAMPLE''' | ||
|4. " valign="top" align="center" width="300" | '''VIEW''' | |4. " valign="top" align="center" width="300" | '''VIEW''' | ||
− | |||
|-style="height:10px" | |-style="height:10px" | ||
|1. " valign="top" align="center" width="100" | '''<nowiki><a href></nowiki>''' | |1. " valign="top" align="center" width="100" | '''<nowiki><a href></nowiki>''' | ||
− | |2. " valign="top" align="left" width="300" | 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. | + | |2. " valign="top" align="left" width="300" | 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. |
− | |3. " valign="top" align="left" width="300" | <nowiki><a href="protemos.com">Visit my website</a></nowiki> | + | |3. " valign="top" align="left" width="300" | <nowiki><a href="https://protemos.com">Visit my website</a></nowiki> |
+ | <br> <nowiki><a href="mailto:as@protemos.com">as@protemos.com</a></nowiki> | ||
+ | |||
|4. " valign="top" align="center" width="300" | [[File:1 V.png|150px]] | |4. " valign="top" align="center" width="300" | [[File:1 V.png|150px]] | ||
Line 185: | Line 328: | ||
|1. " valign="top" align="center" width="100" | '''<nowiki><br/></nowiki>''' | |1. " valign="top" align="center" width="100" | '''<nowiki><br/></nowiki>''' | ||
|2. " valign="top" align="left" width="300" | The tag inserts a single line break. | |2. " valign="top" align="left" width="300" | The tag inserts a single line break. | ||
+ | To add a blank line, use this tag twice. | ||
|3. " valign="top" align="left" width="300" | <nowiki><br/></nowiki> | |3. " valign="top" align="left" width="300" | <nowiki><br/></nowiki> | ||
Line 191: | Line 335: | ||
|2. " valign="top" align="left" width="300" | Defines a division part. It's a block-level element | |2. " valign="top" align="left" width="300" | Defines a division part. It's a block-level element | ||
|3. " valign="top" align="left" width="300" | <nowiki><div style="text-align: center;">This text is in the center.</div></nowiki> | |3. " valign="top" align="left" width="300" | <nowiki><div style="text-align: center;">This text is in the center.</div></nowiki> | ||
− | |4. " valign="top" align="center" width="300" | [[File: | + | |4. " valign="top" align="center" width="300" | [[File:Centre.png|150px]] |
|-style="height:40px" | |-style="height:40px" | ||
Line 257: | Line 401: | ||
|-style="height:40px" | |-style="height:40px" | ||
|1. " valign="top" align="center" width="100" | '''<nowiki><style></nowiki>''' | |1. " valign="top" align="center" width="100" | '''<nowiki><style></nowiki>''' | ||
− | |2. " valign="top" align="left" width="300" | Used to add CSS style, e.g.: <br> - '''Underline the text''' <hr/> - '''Align the text'''. <br> | + | |2. " valign="top" align="left" width="300" | <br>Used to add CSS style, e.g.: <br> - '''Underline the text''' <hr/> <br>- '''Align the text'''<hr/> - '''Change the size of the text'''. <br> |
− | |3. " valign="top" align="left" width="300" | <br> <nowiki><p style="text-decoration: underline;"> | + | |3. " valign="top" align="left" width="300" | <br> <nowiki><p style="text-decoration: underline;"> Underlined text </p></nowiki> <hr/> <nowiki><p style="text-align: center;">This text is in the center.</p> </nowiki> <hr/> <nowiki> <p style="font-size:12px">This text size is 12 px.</p></nowiki> |
− | |4. " valign="top" align="center" width="300" | <br> [[File: | + | |4. " valign="top" align="center" width="300" | <br> [[File:Underlined.png|125px]] <br> [[File:Centre.png|175px]]<br>[[File:Font.png|125px]] |
|} | |} | ||
− | + | * If you need to adjust the text in various ways (for instance, change its color and center it), please input the XHTML elements in the following way<nowiki>: <p style=</nowiki>'''"color:orange; text-align: center;"'''<nowiki> >If you have any questions about this invoice, please <a href="protemos.com"> contact us.</a> </p> </nowiki> | |
− | |||
+ | * For text to start from a new page: <nowiki><p style="clear: both; display: block; page-break-after: always;"></p></nowiki> | ||
− | That's | + | That's an example of how your invoice can look like: |
− | [[File: | + | [[File:Invoice pdf template example.2.png|border|900px]] [[File:Invoice example.1.1.png|border|700px]] |
− | <span style="color: | + | <span style="color:orange">'''Note:'''</span> please avoid this sign '''&''' because the system doesn't allow to save the common note. |
− | [[File:Redirect.jpg|40px|link= | + | [[File:Redirect.jpg|40px|link=PDF templates]] Back to the '''table of contents'''. |
Latest revision as of 12:28, 24 November 2023
Contents
PDF Templates
You can create PDF templates for client invoices, vendor invoices, quotes, and job PO.
PDF templates 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:
Client invoice PDF templates
To create the client invoice PDF template, go to Settings → PDF Templates → Client invoice:
Click "New PDF template":
Fill in the fields, select the needed options and click "Create":
- Name — the name of the template;
- Page size — select A4 or a letter size;
- Page orientation — select the portrait or landscape page orientation;
- Top margin, mm — the top margin height in millimeters;
- Bottom margin, mm — the bottom margin height in millimeters;
- Locale — locale defines the language of the template text;
- Page header — the text that appears at the top of the page;
- Page footer — the text that appears at the bottom of the page;
- Common note — this field is used for any additional notes;
- Include CAT log details — unmark this checkbox if you want to remove CAT log details from the PDF template.
You can define a default client invoice PDF template that will be applied to invoices for all the new clients.
Go to the Account page, scroll down to the Account settings, and click "Update":
Select the needed one from the drop-down list and click "Update":
You can also select the default client invoice PDF template for a particular 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 PDF templates
To add the vendor invoice PDF templates, go to Settings → PDF Templates → Vendor invoice:
Click "New PDF template":
Fill in the fields, select the needed options and click "Create":
- Name — the name of the template;
- Page size — select A4 or a letter size;
- Page orientation — select the portrait or landscape page orientation;
- Top margin, mm — the top margin height in millimeters;
- Bottom margin, mm — the bottom margin height in millimeters;
- Locale — locale defines the language of the template text;
- Page header — the text that appears at the top of the page;
- Page footer — the text that appears at the bottom of the page;
- Common note — this field is used for any additional notes;
- Include CAT log details — unmark this checkbox if you want to remove CAT log details from the PDF template.
You can define a default vendor invoice PDF template that will be applied to invoices for all the new vendors.
Go to the Account page, scroll down to the Account settings, and click "Update":
Select the needed one from the drop-down list and click "Update":
You can also select the default vendor invoice PDF template for each vendor.
Go to the needed vendor 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 vendor 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.
Quote PDF templates
To create the quote PDF template, go to Settings → PDF Templates → Quote:
Click "New PDF Template":
Fill in the fields, select the needed options and click "Create":
- Name — the name of the template;
- Page size — select A4 or a letter size;
- Page orientation — select the portrait or landscape page orientation;
- Top margin, mm — the top margin height in millimeters;
- Bottom margin, mm — the bottom margin height in millimeters;
- Locale — locale defines the language of the template text;
- Page header — the text that appears at the top of the page;
- Page footer — the text that appears at the bottom of the page;
- Common note — this field is used for any additional notes;
- Include CAT log details — unmark this checkbox if you want to remove CAT log details from the PDF template.
You can define a default quote PDF template that will be selected automatically when creating quotes.
Go to the Account page, scroll down to the Account settings section and click "Update":
Select the needed one from the drop-down list and click "Update":
You can select the PDF template for the quote when you create it.
If needed, you can select the template for a specific quote. Open the needed quote and click "Update":
Choose the template from the drop-down list, and click "Update":
Back to the table of contents.
Job PO PDF templates
To add the job PO PDF templates, go to Settings → PDF templates → Job PO:
Click "New PDF Template":
Fill in the fields, select the needed options and click "Create":
- Name — the name of the template;
- Page size — select A4 or a letter size;
- Page orientation — select the portrait or landscape page orientation;
- Top margin, mm — the top margin height in millimeters;
- Bottom margin, mm — the bottom margin height in millimeters;
- Locale — locale defines the language of the template text;
- Page header — the text that appears at the top of the page;
- Page footer — the text that appears at the bottom of the page;
- Common note — this field is used for any additional notes;
- Include CAT log details — unmark this checkbox if you want to remove CAT log details from the PDF template.
You can define a default job PO PDF template that will be applied to every job PO you create.
Go to the Account page, scroll down to the Account settings section, and click "Update":
Select the needed one from the drop-down list and click "Update":
You can also select the job PO PDF template for the job when you create it.
If needed, you can select the job PO template for a specific job. Open the needed job and click "Update":
Choose the needed job PO PDF template from the drop-down list and click "Update":
Back to the table of contents.
Add images
PDF template images page: cloud.protemos.com/pdf-image-file/index
This functionality can be used for adding signatures, seals, payment systems logos, etc. to your PDF templates.
To add images to your templates, go to the PDF images page first:
Click the "New PDF image" button:
Fill in the name, select a needed image, then click "Create":
The uploaded image will be displayed on the PDF template images page, and you will be able to add it to the templates:
Find the needed template and click "Update":
To add the image, please use the corresponding HTML markup elements and attributes: <img src="{IMAGE:visa_logo}" alt=""/>
This is what the added images will look like on the PDF file:
Download, update and delete images
You can also download, change the name and choose another image or delete images by clicking the corresponding buttons:
Note: Images that are already used in templates cannot be deleted, but you can replace the uploaded image so that its name and URL macro stay the same. To do so, click "Update":
Click "Choose file", select the needed image and click "Update":
XHTML elements and attributes
- If you need to adjust the text in various ways (for instance, change its color and center it), please input the XHTML elements in the following way: <p style="color:orange; text-align: center;" >If you have any questions about this invoice, please <a href="protemos.com"> contact us.</a> </p>
- For text to start from a new page: <p style="clear: both; display: block; page-break-after: always;"></p>
That's an example of how your invoice can look like:
Note: please avoid this sign & because the system doesn't allow to save the common note.