Difference between revisions of "PDF templates"
Aleksandra.d (talk | contribs) (→XHTML elements and attributes) |
Aleksandra.d (talk | contribs) (→XHTML elements and attributes) |
||
Line 171: | 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 177: | 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 188: | 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:7 C.png | + | |4. " valign="top" align="center" width="300" | [[File:7 C.png|150px]] |
|-style="height:40px" | |-style="height:40px" | ||
Line 194: | 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 200: | 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 206: | 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 216: | 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 226: | 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 232: | 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 238: | 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 250: | 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" | ||
Line 256: | Line 256: | ||
|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" | Used to add CSS style, e.g.: <br> - '''Underline the text''' <hr/> - '''Align the text'''. <br> | ||
|3. " valign="top" align="left" width="300" | <br> <nowiki><p style="text-decoration: underline;"> Your text </p></nowiki> <hr/> <nowiki><p style="text-align: center;">This text is in the center.</p></nowiki> | |3. " valign="top" align="left" width="300" | <br> <nowiki><p style="text-decoration: underline;"> Your text </p></nowiki> <hr/> <nowiki><p style="text-align: center;">This text is in the center.</p></nowiki> | ||
− | |4. " valign="top" align="center" width="300" | <br> [[File:Your text.png | + | |4. " valign="top" align="center" width="300" | <br> [[File:Your text.png|85px]] <br> [[File:7 C.png|150px]] |
|} | |} |
Revision as of 09:21, 7 April 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
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> | |
<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> | 150px |
<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. |
<p style="text-decoration: underline;"> Your text </p> <p style="text-align: center;">This text is in the center.</p> |
85px 150px |
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.