Difference between revisions of "Common notes"

From Protemos Wiki
Jump to: navigation, search
(XHTML elements and attributes)
(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|border|150px]]
+
|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|border|130px]]
+
|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|border|150px]]
+
|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|border|200px]]
+
|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|border|140px]]
+
|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|border|110px]]
+
|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|border|80px]]
+
|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|border|80px]]
+
|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|border|160px]]
+
|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|border|130px]]
+
|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|border|80px]]
+
|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|border|85px]] <br> [[File:7 C.png|border|150px]]
+
|4. " valign="top" align="center" width="300" | <br> [[File:Your text.png|85px]] <br> [[File:7 C.png|150px]]
  
 
  |}
 
  |}

Revision as of 10:21, 7 April 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:

SsScreenshot 1.png

Client invoice common notes

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

1 client cn.png

Press "New common note":

2 client cn.png

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

1NEW UPD.png

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

Default common note.png

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

1325.png

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:

Vendvor cn.png

Press "New common note":

New cn.png

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

1 nedw.png

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

Updacte.png

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

2c2 vcm.png

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

Screenshot 9.png

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

Sccreenshot 8.png

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

Screenffshot 2.png

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

Screeddnshot 3.png

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

Screednddshot 4.png

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:

1 common note.png

Press "New common note":

Scrcsdeenshot 1.png

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

Screenvvvvvshot 2.png

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

Updsfefate.png

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

Screenshot 7.png

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> 150px
<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.

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

Common note ex.png Invoice ex.png

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

Redirect.jpg Back to the table of contents.