Difference between revisions of "PDF templates"
Aleksandra.d (talk | contribs) (→XHTML elements and attributes) |
(→XHTML elements and attributes) |
||
(28 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
+ | Watch our video tutorial on Common notes - [[File:2ag.png|40px|link=https://youtu.be/hCA48afcmR4]] | ||
+ | |||
You can define common notes for client invoices, vendor invoices, quotes and job PO. | You can define common notes for client invoices, vendor invoices, quotes and job PO. | ||
Line 35: | Line 37: | ||
[[File:1325.png|border|900px]] | [[File:1325.png|border|900px]] | ||
− | You can | + | You can add a common note in an invoice. |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
Open the needed invoice and press '''"Update"''': | Open the needed invoice and press '''"Update"''': | ||
Line 81: | Line 73: | ||
[[File:2c2 vcm.png|border|900px]] | [[File:2c2 vcm.png|border|900px]] | ||
− | + | You can update the common vendor invoice note in invoices. Open the needed invoice and press '''"Update"''': | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | You can update the common vendor invoice note in invoices | ||
[[File:Screenshot 9.png|border|900px]] | [[File:Screenshot 9.png|border|900px]] | ||
Line 125: | Line 107: | ||
[[File:Screednddshot 4.png|border|600px]] | [[File:Screednddshot 4.png|border|600px]] | ||
− | + | ==='''Add a common quote note for a client'''=== | |
− | + | 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"''': | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | You can | ||
− | |||
− | |||
[[File:Screejjlnshot 4.png|border|900px]] | [[File:Screejjlnshot 4.png|border|900px]] | ||
Line 171: | Line 145: | ||
[[File:Screensaswfhot 3.png|border|600px]] | [[File:Screensaswfhot 3.png|border|600px]] | ||
− | You can | + | You can update the common job PO note for the needed job when you create it. |
− | + | Or open already created job and press '''"Update"''': | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
[[File:Scdrreenshot 6.png|border|900px]] | [[File:Scdrreenshot 6.png|border|900px]] | ||
Line 205: | Line 171: | ||
|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="protemos.com">Visit my website</a></nowiki> | ||
− | |4. " valign="top" align="center" width="300" | [[File:1 V.png | + | |4. " valign="top" align="center" width="300" | [[File:1 V.png|150px]] |
|-style="height:40px" | |-style="height:40px" | ||
Line 211: | Line 177: | ||
|2. " valign="top" align="left" width="300" | The tag specifies bold text without any extra importance. | |2. " valign="top" align="left" width="300" | The tag specifies bold text without any extra importance. | ||
|3. " valign="top" align="left" width="300" | <nowiki><b>This text is bold</b></nowiki> | |3. " valign="top" align="left" width="300" | <nowiki><b>This text is bold</b></nowiki> | ||
− | |4. " valign="top" align="center" width="300" | [[File:2 B.png | + | |4. " valign="top" align="center" width="300" | [[File:2 B.png|130px]] |
|-style="height:40px" | |-style="height:40px" | ||
Line 222: | Line 188: | ||
|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 228: | Line 194: | ||
|2. " valign="top" align="left" width="300" | Defines Headings level from 1 to 6 different sizes. | |2. " valign="top" align="left" width="300" | Defines Headings level from 1 to 6 different sizes. | ||
|3. " valign="top" align="left" width="300" | <nowiki><h1 style="color:blue;">This is a heading</h1></nowiki> | |3. " valign="top" align="left" width="300" | <nowiki><h1 style="color:blue;">This is a heading</h1></nowiki> | ||
− | |4. " valign="top" align="center" width="300" | [[File:3 H.png | + | |4. " valign="top" align="center" width="300" | [[File:3 H.png|200px]] |
|-style="height:40px" | |-style="height:40px" | ||
Line 234: | Line 200: | ||
|2. " valign="top" align="left" width="300" | Represents a thematic break between paragraph-level tags. It is typically drawn horizontal line. | |2. " valign="top" align="left" width="300" | Represents a thematic break between paragraph-level tags. It is typically drawn horizontal line. | ||
|3. " valign="top" align="left" width="300" | <nowiki><hr/></nowiki> | |3. " valign="top" align="left" width="300" | <nowiki><hr/></nowiki> | ||
− | |4. " valign="top" align="center" width="300" | [[File:1 line.png | + | |4. " valign="top" align="center" width="300" | [[File:1 line.png|140px]] |
|-style="height:40px" | |-style="height:40px" | ||
Line 240: | Line 206: | ||
|2. " valign="top" align="left" width="300" | The content inside is typically displayed in ''italic''. | |2. " valign="top" align="left" width="300" | The content inside is typically displayed in ''italic''. | ||
|3. " valign="top" align="left" width="300" | <nowiki><i>This text is italic</i></nowiki> | |3. " valign="top" align="left" width="300" | <nowiki><i>This text is italic</i></nowiki> | ||
− | |4. " valign="top" align="center" width="300" | [[File:4 I.png | + | |4. " valign="top" align="center" width="300" | [[File:4 I.png|110px]] |
|-style="height:40px" | |-style="height:40px" | ||
Line 250: | Line 216: | ||
<li>Job</li> | <li>Job</li> | ||
</ol></nowiki> | </ol></nowiki> | ||
− | |4. " valign="top" align="center" width="300" | [[File:8Q.png | + | |4. " valign="top" align="center" width="300" | [[File:8Q.png|80px]] |
|-style="height:40px" | |-style="height:40px" | ||
Line 260: | Line 226: | ||
<li>Job</li> | <li>Job</li> | ||
</ol></nowiki> | </ol></nowiki> | ||
− | |4. " valign="top" align="center" width="300" | [[File:8Q.png | + | |4. " valign="top" align="center" width="300" | [[File:8Q.png|80px]] |
|-style="height:40px" | |-style="height:40px" | ||
Line 266: | Line 232: | ||
|2. " valign="top" align="left" width="300" |The tag defines a paragraph. | |2. " valign="top" align="left" width="300" |The tag defines a paragraph. | ||
|3. " valign="top" align="left" width="300" | <nowiki><p>This project is due <span style="color: red;">30 days</span>.</p></nowiki> | |3. " valign="top" align="left" width="300" | <nowiki><p>This project is due <span style="color: red;">30 days</span>.</p></nowiki> | ||
− | |4. " valign="top" align="center" width="300" | [[File:1 th.png | + | |4. " valign="top" align="center" width="300" | [[File:1 th.png|160px]] |
|-style="height:40px" | |-style="height:40px" | ||
Line 272: | Line 238: | ||
|2. " valign="top" align="left" width="300" | The tag is an inline container used to mark up a part of a text, or a part of a document. The <span> tag is much like the <nowiki><div></nowiki> element, but <nowiki><div></nowiki> is a block-level element and <span> is an inline element. | |2. " valign="top" align="left" width="300" | The tag is an inline container used to mark up a part of a text, or a part of a document. The <span> tag is much like the <nowiki><div></nowiki> element, but <nowiki><div></nowiki> is a block-level element and <span> is an inline element. | ||
|3. " valign="top" align="left" width="300" | <nowiki><p>This is a <span style="color:blue;"> paragraph</span>.</p></nowiki> | |3. " valign="top" align="left" width="300" | <nowiki><p>This is a <span style="color:blue;"> paragraph</span>.</p></nowiki> | ||
− | |4. " valign="top" align="center" width="300" | [[File:5. P.png | + | |4. " valign="top" align="center" width="300" | [[File:5. P.png|130px]] |
|-style="height:40px" | |-style="height:40px" | ||
Line 284: | Line 250: | ||
</ul> | </ul> | ||
</nowiki> | </nowiki> | ||
− | |4. " valign="top" align="center" width="300" | [[File:6. Q.png | + | |4. " valign="top" align="center" width="300" | [[File:6. Q.png|80px]] |
|-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 | + | |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" | <nowiki>< | + | |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" | [[File: | + | |4. " valign="top" align="center" width="300" | <br> [[File:Underlined.png|125px]] <br> [[File:Centre.png|175px]]<br>[[File:Font.png|125px]] |
|} | |} | ||
+ | |||
+ | For text to start from a new page - <nowiki><p style="clear: both; display: block; page-break-after: always;"></p></nowiki> | ||
+ | |||
+ | |||
That's the example on how your invoice can look like: | That's the example on how your invoice can look like: |
Revision as of 10:03, 14 May 2021
Watch our video tutorial on Common notes -
You can define common notes for client invoices, vendor invoices, quotes and job PO.
Common note 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 add the common notes, go to Settings → Common notes:
You always can update or delete the note:
Contents
Client invoice common notes
To add the client invoice common notes, go to Settings → Common notes → Client invoice:
Press "New common note":
Enter the name, the comment, and press "Create":
You can define a default client invoice common note and it will be displayed in every client invoice you issue.
Go to the Account page, scroll down to the Default settings, and press "Update":
From the drop-won list choose the needed one, and press "Update":
You can add a common note in an invoice.
Open the needed invoice and press "Update":
Choose the needed invoice common note from the drop-down list, and press "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:
Press "New common note":
Enter the name, the comment, and press "Create":
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":
From the drop-won list choose the needed one, and press "Update":
You can update the common vendor invoice note in invoices. Open the needed invoice and press "Update":
Choose the needed invoice common note from the drop-down list, and press "Update":
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":
Enter the name, the comment, and press "Create":
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":
Add a common quote note for a client
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:
Press "New common note":
Enter the name, the comment, and press "Create":
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":
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":
Back to the table of contents.
XHTML elements and attributes
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.