The HTML editor

On templates based on the Standard Left template, you can move the Bill To block. To move the block:

• Up - decrease the number in bold #ServiceProviderBlock{padding-bottom:30px;}
• Down - increase the number in bold #BillToBlock{padding-left:0px;padding-top:0px;}
• Left - cannot move left
• Right - increase the number in bold #BillToBlock{padding-left:0px;padding-top:0px;}

On templates based on the Standard Right template, you can move the Bill To block. To move the block:

• Up - increase the number in bold #BillToBlock{padding-left:40px;padding-right:0px;padding-bottom:0px;}
• Down - Insert break tags after the element right above

<div class="invoiceInfoValueCell">[Invoice: Payment Due Date]</div>

</div>

</div>

</br>

</br>

• Left - increase the number in bold #BillToBlock{padding-left:40px;padding-right:0px;padding-bottom:0px;}
• Right - cannot move right

On templates based on the Double Window template, you can move the Bill To and the Service Provider block. To move the blocks:

Service Provider

• Up - Cannot move up
• Down - increase the number in bold #ServiceProviderBlock{height:160px;overflow:hidden;padding-left:25px;padding-top:0px;}
• Left - decrease the number in bold #ServiceProviderBlock{height:160px;overflow:hidden;padding-left:25px;padding-top:0px;}
• Right - increase the number in bold #ServiceProviderBlock{height:160px;overflow:hidden;padding-left:25px;padding-top:0px;}

Bill To

• Up - decrease the number in bold #ServiceProviderBlock{height:160px;overflow:hidden;padding-left:25px;padding-top:0px;}
• Down - increase the number in bold #ServiceProviderBlock{height:160px;overflow:hidden;padding-left:25px;padding-top:0px;}
• Left - decrease the number in bold #BillToBlock{padding-left:25px;}
• Right - increase the number in bold #BillToBlock{padding-left:25px;}

If you have limited HTML editing skills but need to adjust the positioning of the address blocks on your invoice templates to accommodate the use of a larger logo, do the following:

1. Create a copy of one of the system templates and open it.
2. Click to edit the Top of Invoice section. The editor will open in the Design view.
3. Select the Format HTML check box, and then click the HTML tab and locate the <style> tags.

4. Follow the instructions for the template your template is based on.

In the invoice template, the Bottom of Invoice content displays once, on the last page of the invoice. If all the Bottom of Invoice content cannot fit on the page when printed, it will split and continue on the next page. To keep all the Bottom of Invoice content together on one page, use the following steps to insert a "page-break-inside: avoid;" style.

NOTE  This information is based on the HTML markup found in our AutotaskStandard templates. If the HTML in this section of your template has been modified, unless you are familiar with this HTML style, we suggest that you restore the standard markup before proceeding.

1. Click Edit in the Bottom of Invoice section of the invoice template.
2. Click the HTML tab.

3. Locate the first <tr> tag for the first row in the first table.

NOTE  If needed, select the Format HTML check box to display the HTML code with line breaks and indents.

4. Insert this style

style="page-break-inside: avoid;"

between the <tr and the >.

It should look like this: <tr style="page-break-inside: avoid;">

5. Click OK to save.

1. Place the cursor in the editor where you want the variable inserted.

If working in a section of the Invoice Template, click the Insert Variable icon to open the Variables window.

2. Double-click the variable to insert it at the cursor location.
3. Reposition the cursor and double-click each variable you want to add.

If working in a section of the Invoice Template, you’ll have to click the Insert Variable icon to re-open the Variables window.

4. Use the text-formatting options as described in Editing tools available in Design mode to format your text.

The service desk variable Ticket: Priority Color behaves differently from other message and template variables. Instead of inserting database content into the body of your message, it sets the color value for text or other page elements in the message. The color value is set to correspond to the color specified for a ticket Priority in Autotask. You can use the variable in ticket related messages to highlight part of the message using the ticket priority's color. If you are not familiar with ticket priority colors in Autotask, refer to Task & ticket priorities.

You must use the Priority Color variable in the HTML editor. You cannot simply insert it into either the design view or the HTML view. It requires the necessary HTML coding to create a style attribute and apply the attribute it to the desired text or element. The style attribute would look like this:

style="color:[Ticket: Priority Color]"

The following is an example of one option you could use to display the label Priority: as regular text followed by the Priority Name displayed in the color associated with the priority.

<div>

<span>Priority: </span><span style="color:[Ticket: Priority Color]">[Ticket: Priority]</span>

</div>

Invoice, purchase order, and quote template variables do not always contain data when the final product is generated. When no data is present, the variable label still appears on the invoice, purchase order, or quote followed by white space. In addition, when the variable data = 0, the labels appear followed by 0.

For most of these variables, you can apply a condition tag to hide the variable label on the invoice, purchase order, or quote when no data is present and when data value = 0. To do this, you must use the HTML mode in the HTML Editor.

1. Add and position your Template variables or find the existing variable section that you want to make visible conditionally.
2. If needed, click the HTML tab to switch to HTML mode.
3. Locate the lines for the first variable that you want to set as conditional. The section of code for a variable will look similar to this:

<div class="invoiceInfoRow">

<div class="invoiceInfoNameCell">Purchase Order Number:</div>

<div class="invoiceInfoValueCell">[Invoice: Purchase Order Number]</div>

</div>

If the container element is a table row instead of the div, as is the case in the invoice template footer section, the section that displays the summary for non-billable hours would look like this:

<tr class="invoiceSummaryRow">

<td class="invoiceSummaryNameCell">Non-Billable Hours</td>

<td class="invoiceSummaryValueCell">[Invoice: Non-Billable Hours]</td>

</tr>

NOTE  In the examples above, the lines are contained in a "container" element (<div or <tr). The conditional tag should go on the container element, else there may be horizontal white space left behind.
The lines in your code may show different tags.

4. Add

conditional-display-variable="[variable name]"

to the first line of the variable section, directly before the > tag, replacing [variable name] with the exact name of the variable.

NOTE  The variable name appears in brackets after <div class="invoiceInfoValueCell">.

The first line in the examples above would look like this:

<div class="invoiceInfoRow" conditional-display-variable="[Invoice:Purchase Order Number]">

<tr class="invoiceSummaryRow" conditional-display-variable="[Invoice: Non-Billable Hours]">

NOTE  The conditional element is not valid on HTML elements that already include a style tag; for example, you could not use the condition tag on <div class="invoiceInfoRow" style="width: 100%">

5. Repeat for each section that you want to set as conditional.

Variables that Cannot Use "condition-display-variable"

The following variables do not currently support the conditional display tag: [Invoice: Number/ID], [Invoice: Number], [Invoice: Block Hour Contract Balance], [Invoice: Retainer Contract Balance], [Invoice: Per-Ticket Contract Balance], [Invoice: Tax Detail], [Invoice: Totals]

To completely remove a variable and its label, and the row it is displayed on, do the following:

1. In Design view, click the variable you want to remove.
2. Select the Format HTML check box.
3. Toggle to HTML view. You will see your cursor within the variable.

4. Delete the following:

<div class="invoiceInfoRow">

<div class="invoiceInfoNameCell">Purchase Order Number:</div>

<div class="invoiceInfoValueCell">[Invoice: Purchase Order Number]</div>

</div>

5. Toggle to Design view confirm your changes. If you made a mistake, click Cancel or use Restore Default Content to restore system Default values.