Template 6 Invoice HTML

 Select all of the following code and paste in your mHelpDesk template. For instructions, please visit our template library.

  <style type=”text/css”> body,html { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } .print_page_container { font-size: 12px; width: 100%; font-family: “Times New Roman”, Times, serif; text-align: left; } .section { width: 100%; margin-bottom: 20px; padding: 0 0; border-collapse: collapse; border-spacing: 0; /*page-break-inside: avoid;*/ } .leftbox, .rightbox { width: 48%; background-color: #F3F3F3; } .middlebox { width: 4%; } .customer_section, .contact_section { width: 100%; border: 0px solid #CCCCCC; border-collapse: collapse; border-spacing: 0; } .print_heading, .ticket_heading, .mycompany_heading { text-align: left; font-weight: bold; color: #000000; background-color: #CCCCCC; border-collapse: collapse; border-spacing: 0; border-bottom: 0px; border-top: 1px solid #CCCCCC; border-left: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; padding: 3px 3px; } .customer_body { padding: 3px 3px; } .amountdue_section { text-align: right; border: 2px solid #CCCCCC; border-collapse: collapse; border-spacing: 0; } .ticket_section, .item_section, .asset_section, .appointment_section { width: 100%; text-align: left; border: 0px solid #CCCCCC; border-collapse: collapse; border-spacing: 0; } .customer_label { display:none; text-align: left; font-weight: bold; color: #000000; background-color: #FFFFFF; vertical-align: top; white-space: nowrap; } .ticket_label, .ticket_label2, .wolabel, .amountdue_label, .asset_label { text-align: left; vertical-align: top; font-weight: bold; color: #000000; background-color: #FFFFFF; white-space: nowrap; border: 1px solid #CCCCCC; border-collapse: collapse; border-spacing: 0; padding: 2px 2px; } .ticket_text, .ticket_text2, .wotext, .wotext_number, .amountdue_text, .asset_text { text-align: left; vertical-align: top; color: #000000; background-color: #FFFFFF; border: 1px solid #CCCCCC; border-collapse: collapse; border-spacing: 0; padding: 2px 2px; } .ticket_label, .ticket_label2 { width: 10%; } .ticket_text, .ticket_text2 { width: 40%; } .customer_label { width: 10%; margin-left: 10px; } .customer_text { width: 40%; } .asset_label { width: 20%; } .asset_text { width: 80%; } .wotext_number { text-align: right; white-space: nowrap; } .wotext, .wotext_number { padding-top: 3px; padding-bottom: 3px; padding-left: 3px; padding-right: 3px; } .my_company_info { font-weight: bold; color: #000000; background-color: #FFFFFF; } .customer_section, .customer_label, .customer_text, .contact_section, .wolabel { text-align: left; background-color: #F3F3F3; } .amountdue_label { text-align: right; } .ticket_info { font-family: “Arial Rounded MT Bold”; color: #DDDDDD; text-align: center; } .largeHeader { } .subtotal_label { font-family: Arial; font-weight: bold; text-align: right; white-space: nowrap; } .subtotal_text { border-bottom: solid 1px #999999; text-align: right; } .signature { width: 216px; page-break-inside: avoid; } .my_company_logo img { } center{ text-align: center; } #items td{ border: 1px solid #000000; border-bottom: 1px solid #000000; border-top:none; } #items tr:last-child td{ border-bottom: 1px solid #000000; } #items table tr:first-child td{ background-color: #31b7dd; text-align: center; color: #ffffff; border-top: 1px solid #000000; } #items tr:last-child td{ border-bottom: 1px solid #000000; } #items table tr td:nth-child(2), #items table tr td:nth-child(6),#items table tr td:nth-child(7){ display: none; } #items table tr td:nth-child(1){ width: 10%; } #items table tr td:nth-child(3){ width: 60%; } #items table tr td:nth-child(5),#items table tr td:nth-child(4){ width: 15%; } </style> <div class=”print_page_container”> <div style=”left: 0px; right: 0px; position: absolute; margin: 0px auto; text-align: center; padding: 10px; color: #ffffff; width: 100px; font-size: 18px; background-color: #31b7dd;”>INVOICE</div> <table style=”width: 100%;”> <tbody> <tr> <td style=”width: 100%; border-bottom: 1px solid #999999;”><br /> </td> </tr> </tbody> </table> <table style=”width: 100%;”> <tbody> <tr> <td style=”width: 30%;”> </td> <td style=”width: 40%; padding-top: 18px;” class=”my_company_logo”> <center>_MyCompanyLogo_</center> </td> <td style=”width: 30%;”> </td> </tr> <tr> <td colspan=”3″><center>_MyCompanyPhone_<br /> ​_MyCompanyWebsite_</center></td> </tr> </tbody> </table> <table style=”width: 100%;”> <tbody> <tr> <td style=”width: 40%; vertical-align: top;”> &nbsp;&nbsp;&nbsp;<strong>TO: </strong> <br /> <table style=”width: 100%; border-collapse: collapse;”> <tbody> <tr> <td style=”width: 100%; border: 1px solid #000000;”> _CustomerName_ </td> </tr> <tr> <td style=”width: 100%; border-width: medium 1px 1px; border-style: none solid solid; border-image-source: none;”> _CustomerAddress_ </td> </tr> </tbody> </table> </td> <td style=”width: 20%;”> </td> <td style=”width: 40%; vertical-align: top;”> &nbsp;&nbsp;&nbsp;<strong>FOR: </strong> <br /> <table style=”width: 100%; border-collapse: collapse;”> <tbody> <tr> <td style=”width: 100%; border: 1px solid #000000;”> _ServiceLocationName_ </td> </tr> <tr> <td style=”width: 100%; border-width: medium 1px 1px; border-style: none solid solid; border-image-source: none;”> _ServiceLocationAddress_ </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <br /> <br /> <table class=”section”> <tbody> <tr> <td style=”border: 1px solid #000000; width: 35%; text-align: center; color: #ffffff; background-color: #31b7dd;”><strong>TECHNICIAN / SALES PERSON</strong></td> <td style=”border: 1px solid #000000; width: 35%; text-align: center; color: #ffffff; background-color: #31b7dd;”><strong>PAYMENT TERMS</strong></td> <td style=”border: 1px solid #000000; width: 35%; text-align: center; color: #ffffff; background-color: #31b7dd;”>&nbsp;<strong>DATE ISSUED</strong><br /> </td> </tr> <tr> <td style=”border: 1px solid #000000; width: 35%; text-align: center; color: #000000; vertical-align: top; background-color: #ffffff;”>_AssignedTo_ </td> <td style=”border: 1px solid #000000; width: 35%; text-align: center; color: #000000; vertical-align: top; background-color: #ffffff;”>_Terms_</td> <td style=”border: 1px solid #000000; width: 35%; text-align: center; color: #000000; vertical-align: top; background-color: #ffffff;”>&nbsp;_Invoice.IssuedDate_</td> </tr> </tbody> </table> <table style=”width: 100%; border-collapse: collapse;”> <tbody> <tr> <td id=”items”>_Invoice.Items_</td> </tr> </tbody> </table> <table style=”width: 100%; border-collapse: collapse;”> <tbody> <tr> <td style=”width: 70%; border-top-width: medium; border-top-style: none;”> <br /> </td> <td style=”width: 15%; border-width: medium 1px 1px; border-style: none solid solid; text-align: right; vertical-align: middle; padding: 5px;”>TOTAL</td> <td style=”width: 15%; border-top-width: medium; border-top-style: none; border-right: 1px solid #000000; border-bottom: 1px solid #000000; text-align: right; vertical-align: middle; padding: 5px;”>_Invoice.Total_ </td> </tr> </tbody> </table> <br /> <br /> <table> <tbody> <tr> <td style=”width: 45%; vertical-align: bottom;”> Note: Payment for this invoice is due by <strong>_Invoice.DueDate_</strong>.<br /> </td> </tr> </tbody> </table> <br /> <span style=”font-size: 18px;”><strong>Acceptance of Invoice</strong></span> <br /> <br /> <br /> <table class=”section”> <tbody> <tr> <td style=”width: 15%; vertical-align: bottom;”> Signature: </td> <td style=”width: 35%; border-bottom: 1px solid #000000; vertical-align: bottom;”> X _Signature_ </td> <td style=”width: 5%;”> </td> <td style=”width: 15%; vertical-align: bottom;”> Date of Acceptance: </td> <td style=”width: 30%; border-bottom: 1px solid #000000; vertical-align: bottom;”> _SignatureDate_ </td> </tr> </tbody> </table> </div>

Don't have an account? Try now risk free!

Click here for our support page