If you'd like to use the Blue Cube template for your Jobs, please copy all of the code below and follow the instructions to upload a new template into your account.
<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: #FFFFFF;
background-color: #31b7dd;
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{
}
#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;">Work Order</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;">
<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;">
<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 class="ticket_heading">
<td> Work Order Details</td>
</tr>
<tr class="ticket_section">
<td>_Ticket.Section_<br />
_Ticket.CustomFields_</td>
</tr>
</tbody>
</table>
<table class="section">
<tbody>
<tr class="ticket_heading">
<td> Appointment Details</td>
</tr>
<tr class="ticket_section">
<td>_Ticket.Appointments_</td>
</tr>
</tbody>
</table>
<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>