Difference between revisions of "PDF templates"

From Protemos Wiki
Jump to: navigation, search
(XHTML elements and attributes)
(XHTML elements and attributes)
(37 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 define the common invoice note for the needed client.
+
You can add a common note in an invoice.  
 
 
Open the client profile, scroll down to the settings and press '''"Update"''':
 
 
 
[[File:4 settings.png|border|900px]]
 
 
 
Choose the needed invoice common note from the drop-down list, and press '''"Update"''':
 
 
 
[[File:11 from.png|border|800px]]
 
 
 
You can update this setting in the invoice as well.  
 
  
 
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 define an individual common invoice note for a vendor.
+
You can update the common vendor invoice note in invoices. Open the needed invoice and press '''"Update"''':
 
 
Open the needed vendor profile, scroll down to the settings and press '''"Update"''':
 
 
 
[[File:Screecdnshot 1.png|border|900px]]
 
 
 
Choose the needed invoice common note from the drop-down list, and press '''"Update"''':
 
 
 
[[File:Sffettings.png|border|800px]]
 
 
 
You can update the common vendor invoice note in invoices as well. Open the needed invoice and press '''"Update"''':
 
  
 
[[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]]
  
You can define an individual common quote note for a client, and it will be displayed on every PDF file of the quote you send to the client.
+
==='''Add a common quote note for a client'''===
 
 
To do so,  open the needed client profile, scroll down to the settings and press '''"Update"''':
 
 
 
[[File:Screenshdot 1.png|border|900px]]
 
 
 
Choose the needed quote common note from the drop-down list, and press '''"Update"''':
 
 
 
[[File:Screensfffhot 5.png|border|600px]]
 
  
You can update the common quote note in the needed quote as well.
+
You can update the common quote note in the needed quote when you create it.
  
Open the quote and press '''"Update"''':
+
You also can add the common not by pressing the '''"Update"''':
  
 
[[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 define an individual common job PO note for a vendor.
+
You can update the common job PO note for the needed job when you create it.  
 
 
To do so, open the needed vendor profile, scroll down to the settings and press "Update":
 
 
 
[[File:Screeqnshot 4.png|border|900px]]
 
 
 
Choose the needed job PO common note from the drop-down list, and press '''"Update"''':
 
 
 
[[File:Screesqnshot 5.png|border|600px]]
 
  
You can update the common job PO note for the needed job. Open the job and press '''"Update"''':
+
Or open already created job and press '''"Update"''':
  
 
[[File:Scdrreenshot 6.png|border|900px]]
 
[[File:Scdrreenshot 6.png|border|900px]]
Line 196: Line 162:
  
 
|-style="height:40px"
 
|-style="height:40px"
!1. " valign="top" align="center" width="100"  |  '''TAG''' !
+
|1. " valign="top" align="center" width="100"  |  '''TAG'''  
!2. " valign="top" align="center" width="300" | '''DESCRIPTION'''!
+
|2. " valign="top" align="center" width="300" | '''DESCRIPTION'''
!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" | Specific an anchor (Hyperlink). Use for link in internal/external web documents.
+
|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|border|150px]]
+
|4. " valign="top" align="center" width="300" | [[File:1 V.png|150px]]
  
 
  |-style="height:40px"
 
  |-style="height:40px"
 
|1. " valign="top" align="center" width="100"  | '''<nowiki><b></nowiki>'''
 
|1. " valign="top" align="center" width="100"  | '''<nowiki><b></nowiki>'''
|2. " valign="top" align="left" width="300" | To make the text to be bold.
+
|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|border|130px]]
+
|4. " valign="top" align="center" width="300" | [[File:2 B.png|130px]]
  
 
  |-style="height:40px"
 
  |-style="height:40px"
 
|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" | Specific a single line break.
+
|2. " valign="top" align="left" width="300" | The tag inserts a single line break.
 
|3. " valign="top" align="left" width="300" | <nowiki><br/></nowiki>
 
|3. " valign="top" align="left" width="300" | <nowiki><br/></nowiki>
  
 
  |-style="height:40px"
 
  |-style="height:40px"
 
|1. " valign="top" align="center" width="100"  | '''<nowiki><div></nowiki>'''  
 
|1. " valign="top" align="center" width="100"  | '''<nowiki><div></nowiki>'''  
|2. " valign="top" align="left" width="300" | Defines a division part.
+
|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|border|150px]]
+
|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|border|200px]]
+
|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|border|140px]]
+
|4. " valign="top" align="center" width="300" | [[File:1 line.png|140px]]
  
 
  |-style="height:40px"
 
  |-style="height:40px"
 
|1. " valign="top" align="center" width="100"  | '''<nowiki><i></nowiki>'''
 
|1. " valign="top" align="center" width="100"  | '''<nowiki><i></nowiki>'''
|2. " valign="top" align="left" width="300" | To make the text to be 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|border|110px]]
+
|4. " valign="top" align="center" width="300" | [[File:4 I.png|110px]]
  
 
  |-style="height:40px"
 
  |-style="height:40px"
 
|1. " valign="top" align="center" width="100"  | '''<nowiki><li></nowiki>'''  
 
|1. " valign="top" align="center" width="100"  | '''<nowiki><li></nowiki>'''  
|2. " valign="top" align="left" width="300" | Defines a list item either ordered list or unordered list.
+
|2. " valign="top" align="left" width="300" | The tag defines a list item. The <nowiki><li></nowiki> tag is used inside ordered lists(<nowiki><ol></nowiki>), unordered lists (<nowiki><ul></nowiki>)
 
|3. " valign="top" align="left" width="300" | <nowiki><ol>  
 
|3. " valign="top" align="left" width="300" | <nowiki><ol>  
 
  <li>Quote</li>
 
  <li>Quote</li>
Line 250: Line 216:
 
   <li>Job</li>
 
   <li>Job</li>
 
</ol></nowiki>
 
</ol></nowiki>
|4. " valign="top" align="center" width="300" | [[File:8Q.png|border|80px]]
+
|4. " valign="top" align="center" width="300" | [[File:8Q.png|80px]]
  
 
  |-style="height:40px"
 
  |-style="height:40px"
 
|1. " valign="top" align="center" width="100"  | '''<nowiki><ol></nowiki>'''
 
|1. " valign="top" align="center" width="100"  | '''<nowiki><ol></nowiki>'''
|2. " valign="top" align="left" width="300" | Defines an ordered list of items.
+
|2. " valign="top" align="left" width="300" | The tag defines an ordered list. An ordered list can be numerical or alphabetical. The <nowiki><li></nowiki> tag is used to define each list item.
 
|3. " valign="top" align="left" width="300" | <nowiki><ol>  
 
|3. " valign="top" align="left" width="300" | <nowiki><ol>  
 
  <li>Quote</li>
 
  <li>Quote</li>
Line 260: Line 226:
 
   <li>Job</li>
 
   <li>Job</li>
 
</ol></nowiki>
 
</ol></nowiki>
|4. " valign="top" align="center" width="300" | [[File:8Q.png|border|80px]]
+
|4. " valign="top" align="center" width="300" | [[File:8Q.png|80px]]
  
 
  |-style="height:40px"
 
  |-style="height:40px"
 
|1. " valign="top" align="center" width="100"  | '''<nowiki><p></nowiki>'''  
 
|1. " valign="top" align="center" width="100"  | '''<nowiki><p></nowiki>'''  
|2. " valign="top" align="left" width="300" | Used to represent a paragraph text.
+
|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|border|160px]]
+
|4. " valign="top" align="center" width="300" | [[File:1 th.png|160px]]
  
 
  |-style="height:40px"
 
  |-style="height:40px"
 
|1. " valign="top" align="center" width="100"  | '''<nowiki><span></nowiki>'''
 
|1. " valign="top" align="center" width="100"  | '''<nowiki><span></nowiki>'''
|2. " valign="top" align="left" width="300" |  
+
|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|border|130px]]
+
|4. " valign="top" align="center" width="300" | [[File:5. P.png|130px]]
  
 
  |-style="height:40px"
 
  |-style="height:40px"
 
|1. " valign="top" align="center" width="100"  | '''<nowiki><ul></nowiki>'''  
 
|1. " valign="top" align="center" width="100"  | '''<nowiki><ul></nowiki>'''  
|2. " valign="top" align="left" width="300" | Used to group and apply styles to inline elements.
+
|2. " valign="top" align="left" width="300" | The tag defines an unordered (bulleted) list. Use the <nowiki><ul></nowiki> tag together with the <nowiki><li></nowiki> tag to create unordered lists.
 
|3. " valign="top" align="left" width="300" | <nowiki>
 
|3. " valign="top" align="left" width="300" | <nowiki>
 
<ul>
 
<ul>
Line 284: Line 250:
 
</ul>
 
</ul>
 
</nowiki>
 
</nowiki>
|4. " valign="top" align="center" width="300" | [[File:6. Q.png|border|80px]]
+
|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><div style="text-align: center;">This text is in the center.</div></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:7 C.png|border|150px]]
+
|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:
  
 
[[File:Common note ex.png|600px]] [[File:Invoice ex.png|border|500px]]
 
[[File:Common note ex.png|600px]] [[File:Invoice ex.png|border|500px]]
 +
 +
<span style="color:red">Note:</span> please avoid this sign '''&''' because the system doesn't allow to save the common note.
  
 
[[File:Redirect.jpg|40px|link=Common notes]] Back to the '''table of contents'''.
 
[[File:Redirect.jpg|40px|link=Common notes]] Back to the '''table of contents'''.

Revision as of 09:03, 14 May 2021

Watch our video tutorial on Common notes - 2ag.png

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:

Screreenshot 1.png

You always can update or delete the note:

800px

Client invoice common notes

To add the client invoice common notes, go to Settings → Common notes → Client invoice:

300px

Press "New common note":

900px

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

900px

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":

900px

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

900px

You can add a common note in an invoice.

Open the needed invoice and press "Update":

Screekknshot 2.png

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

Scrseeddnshot 3.png

Redirect.jpg 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

Redirect.jpg Back to the table of contents.

Quote common notes

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

Quote common note.png

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":

1 upd fef comm.png

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

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":

Screejjlnshot 4.png

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

Screeasdnshot 5.png

Redirect.jpg 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":

Screensaswfhot 3.png

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

Or open already created job and press "Update":

Scdrreenshot 6.png

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

450px

Redirect.jpg 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> 1 V.png
<b> The tag specifies bold text without any extra importance. <b>This text is bold</b> 2 B.png
<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> Centre.png
<h1> to <h6> Defines Headings level from 1 to 6 different sizes. <h1 style="color:blue;">This is a heading</h1> 3 H.png
<hr> Represents a thematic break between paragraph-level tags. It is typically drawn horizontal line. <hr/> 1 line.png
<i> The content inside is typically displayed in italic. <i>This text is italic</i> 4 I.png
<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> 8Q.png
<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> 8Q.png
<p> The tag defines a paragraph. <p>This project is due <span style="color: red;">30 days</span>.</p> 1 th.png
<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> 5. P.png
<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> 6. Q.png
<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>

Underlined.png
Centre.png
Font.png

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:

600px 500px

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

Redirect.jpg Back to the table of contents.