Need help with HTML templates (mhelpdesk)

DocGreen · May 14, 2013

We can force the signature to be smaller. See what this code does.

Code:

<style type="text/css">
    body
    {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    }
    .pageContainer
    {
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    text-align: center;
    }
    .section
    {
    width: 100%;
    margin-bottom: 20px;
    page-break-inside: avoid;
    }
    .leftbox, .rightbox
    {
    width: 48%;
    background-color: #F3F3F3;
    }
    .customer_section, .contact_section
    {
    width: 100%;
    }
    .customer_section, .customer_section td, .contact_section, .contact_section td
    {
    border: 0px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    }
    .customer_heading, .ticket_heading, .contact_heading, .item_heading, .asset_heading, .mycompany_heading
    {
    font-size: 12px;
    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;
    }
    .customer_heading
    {
    text-align: left;
    }
    .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: 1px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    }
    .customer_label
    {
    text-align: left;
    font-weight: bold;
    color: #000000;
    background-color: #FFFFFF;
    vertical-align: top;
    white-space: nowrap;
    }
    .ticket_label, .ticket_label2, .wolabel, .amountdue_label
    {
    text-align: left;
    font-weight: bold;
    color: #000000;
    background-color: #FFFFFF;
    vertical-align: top;
    white-space: nowrap;
    border: 1px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    }
    .ticket_label
    {
    width: 120px;
    }
    .customer_label
    {
    width: 10%;
    margin-left: 10px;
    }
    .customer_text
    {
    width: 40%;
    }
    .ticket_text, .ticket_text2, .wotext, .wotext_number, .amountdue_text
    {
    text-align: left;
    color: #000000;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    }
    .ticket_text
    {
    width: auto;
    }
    .wotext_number
    {
    text-align: right;
    white-space: nowrap;
    }
    .wotext, .wotext_number
    {
    font-size: 12px;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
    padding-right: 3px;
    }
    .ticket_label2
    {
    width: 120px;
    }
    .ticket_text2
    {
    width: auto;
    }
    .mycompany_info
    {
    font-size: 16px;
    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;
    }
    .top_right_text
    {
    font-size: 36px;
    font-family: "Arial Rounded MT Bold";
    color: #DDDDDD;
    text-align: center;
    }
    .largeHeader
    {
    font-size: 24px;
    }
    .subtotal_label
    {
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
    text-align: right;
    white-space: nowrap;
    }
    .subtotal_text
    {
    border-bottom: solid 1px #999999;
    text-align: right;
    }
    .ivItemLabel, .ivItemText
    {
    text-align: left;
    color: #000000;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    padding: 3px 3px 3px 3px;
    }
    .ivItemLabel
    {
    background-color: #CCCCCC;
    }
    .ivItemText
    {
    background-color: #F3F3F3;
    }
    .dates_and_terms
    {
    float: right;
    margin: 3px 0px 3px 0px;
    padding: 1px;
    border-collapse: collapse;
    border: 1px solid #CCCCCC;
    width: 100%;
    }
    .dates_and_terms_label
    {
    background-color: #EEEEEE;
    border-left: 1px solid #CCCCCC;
    padding: 0px 3px 0px 3px;
    width: 25%;
    }
	#sig img {
	max-height: 120px;
	width: auto;
	}
</style>
<div class="pageContainer">
<table class="section">
    <tbody>
        <tr>
            <td>
            <table style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
                <tbody>
                    <tr>
                        <td class="mycompany_info" style="width: 20%;">_MyCompanyLogo_&nbsp;</td>
                        <td class="mycompany_info" style="width: 35%;">
                        <div style="font-size: 20px; text-align: left;"><span style="font-family: Arial;"><span style="font-family: Arial;">
                        PC Pit Crew</span><br />
                        </span></div>
                        <span style="font-family: Arial;">
                        <div style="text-align: left;"><span style="text-align: center;">_MyCompanyWebsite_</span>
                        </div>
                        <span style="text-align: center; font-weight: bold; font-family: Arial; font-size: 16px; color: #000000;">
                        <div style="text-align: left;">_MyCompanyEmail_</div>
                        </span>
                        <div style="text-align: left;">Ph. _MyCompanyPhone_</div>
                        <div style="text-align: left;">Fax _MyCompanyFax_</div>
                        </span></td>
                        <td style="width: 35%; text-align: right; vertical-align: top;">
                        <div style="padding-bottom: 12px; font-size: 22px; text-align: right;"><span style="font-family: Arial;">
                        Invoice #: _InvoiceNumber_</span></div>
                        <div class="contact_section">
                        <div class="customer_heading"><span style="font-family: Arial;">
                        Bill To</span></div>
                        <span style="font-family: Arial;">
                        _BillTo_
                        </span></div>
                        <div class="contact_section">
                        <div class="customer_heading"><span style="font-family: Arial;">
                        Service Location</span></div>
                        <span style="font-family: Arial;">
                        _ServiceLocationAddress_
                        </span></div>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>
<table class="dates_and_terms" border="0" cellspacing="0" cellpadding="2">
    <tbody>
        <tr>
            <td class="dates_and_terms_label" style="border-left-color: #cccccc; border-left-width: 0px; border-left-style: none;">
            Issued date: _IssuedDate_ &nbsp;
            </td>
            <td class="dates_and_terms_label">
            Due date: _DueDate_ &nbsp;
            </td>
            <td class="dates_and_terms_label">
            Terms: _Terms_ &nbsp;
            </td>
            <td class="dates_and_terms_label">
            P.O. #: _PONumber_ &nbsp;
            </td>
        </tr>
    </tbody>
</table>
<table class="section item_section">
    <tbody>
        <tr>
            <td class="ticket_heading">
            Item(s)
            </td>
        </tr>
        <tr>
            <td>
            _Items_
            </td>
        </tr>
    </tbody>
</table>
<table class="section">
    <tbody>
        <tr>
            <td style="width: 60%; vertical-align: top;">
            <table style="width: 90%;" border="0" cellspacing="3" cellpadding="2">
                <tbody>
                    <tr>
                        <td id='sig' style="width: 75%; border-bottom-color: #000000; border-bottom-width: 1px; border-bottom-style: solid;">
                        _Signature_
                        </td>
                        <td valign="bottom" style="width: 22%; border-bottom-color: #000000; border-bottom-width: 1px; border-bottom-style: solid;">
                        _SignatureDate_
                        </td>
                    </tr>
                    <tr>
                        <td>
                        Signature
                        </td>
                        <td>
                        Date
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td style="width: 40%; vertical-align: top;">
            <table width="100%" style="float: right;" border="0" cellspacing="2" cellpadding="2">
                <tbody>
                    <tr>
                        <td class="subtotal_label">
                        Subtotal &nbsp;
                        </td>
                        <td class="subtotal_text">
                        &nbsp; _SubTotal_
                        </td>
                    </tr>
                    <tr>
                        <td class="subtotal_label">
                        Tax &nbsp;
                        </td>
                        <td class="subtotal_text">
                        &nbsp; _Tax_
                        </td>
                    </tr>
                    <tr>
                        <td class="subtotal_label" style="width: 25%; font-weight: bold;">
                        Total &nbsp;
                        </td>
                        <td class="subtotal_text" style="width: 75%;">
                        &nbsp; _Total_
                        </td>
                    </tr>
                    <tr>
                        <td class="subtotal_label" style="width: 25%; font-weight: bold;">
                        Paid &nbsp;
                        </td>
                        <td class="subtotal_text" style="width: 75%;">
                        &nbsp; _Paid_
                        </td>
                    </tr>
                    <tr>
                        <td class="subtotal_label" style="width: 25%; font-weight: bold;">
                        Balance Due &nbsp;
                        </td>
                        <td class="subtotal_text" style="width: 75%;">
                        &nbsp; _BalanceDue_
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>
<table class="section">
    <tbody>
        <tr>
            <td class="ticket_heading">
            Notes
            </td>
        </tr>
        <tr>
            <td>
            _Notes_
            <br />
            </td>
        </tr>
    </tbody>
</table>
<table class="section">
    <tbody>
        <tr>
            <td class="ticket_heading">
            Terms
            </td>
        </tr>
        <tr>
            <td>
            Unless otherwise specified, payment for services is due upon completion. &nbsp;Payment may be made by Cash, Check, Major Credit Card, or Paypal. &nbsp;Credit/Debit payments made via phone will incur an additional 3% processing fee.&nbsp; Customer acknowledges by signature that all equipment has been returned in proper condition.</td>
        </tr>
    </tbody>
</table>
<div class="pageContainer" style="width: 728px;">
<table class="section" style="width: 728px;" border="0" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td style="width: 364px; vertical-align: top;"><br />
            </td>
            <td style="width: 364px; vertical-align: top;">
            <table style="width: 364px;" border="0" cellspacing="6" cellpadding="2">
                <tbody>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>
</div>
<table class="section">
    <tbody>
        <tr>
            <td style="width: 50%; vertical-align: top;">
            &nbsp;
            </td>
            <td style="width: 50%; vertical-align: top;">
            </td>
        </tr>
    </tbody>
</table>
<!-- Signature -->
</div>

Didn't see that reply yet... lemme give that a shot!

DocGreen · May 14, 2013

Just tried that last code... didn't change the size of the sig field.

As for the mhelpdesk app, yeah... I've tried it. It sucks. (even they say so). They're working on a new one, but their solution in the meantime is to use the mobile web version (which is essentially the same thing). Regardless, I checked for any difference in sig capture and it gives the same result as what I've been posting already.

Here's the latest result:

mikeroq · May 14, 2013

When I get home I will sign the invoice on my phone and check the code.

DocGreen · May 14, 2013

Thanks a ton, Mike! If I could give you more rep, I would!

mikeroq · May 15, 2013

I can make the signature smaller if you go via HTML but when you save to PDF it is still big.

DocGreen · May 15, 2013

mikeroq said:
I can make the signature smaller if you go via HTML but when you save to PDF it is still big.

Absolutely acceptable to me!! I prefer the HTML layout to the PDF, honestly.

mikeroq · May 15, 2013

Code:

<style type="text/css">
    body
    {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    }
    .pageContainer
    {
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    text-align: center;
    }
    .section
    {
    width: 100%;
    margin-bottom: 20px;
    page-break-inside: avoid;
    }
    .leftbox, .rightbox
    {
    width: 48%;
    background-color: #F3F3F3;
    }
    .customer_section, .contact_section
    {
    width: 100%;
    }
    .customer_section, .customer_section td, .contact_section, .contact_section td
    {
    border: 0px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    }
    .customer_heading, .ticket_heading, .contact_heading, .item_heading, .asset_heading, .mycompany_heading
    {
    font-size: 12px;
    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;
    }
    .customer_heading
    {
    text-align: left;
    }
    .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: 1px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    }
    .customer_label
    {
    text-align: left;
    font-weight: bold;
    color: #000000;
    background-color: #FFFFFF;
    vertical-align: top;
    white-space: nowrap;
    }
    .ticket_label, .ticket_label2, .wolabel, .amountdue_label
    {
    text-align: left;
    font-weight: bold;
    color: #000000;
    background-color: #FFFFFF;
    vertical-align: top;
    white-space: nowrap;
    border: 1px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    }
    .ticket_label
    {
    width: 120px;
    }
    .customer_label
    {
    width: 10%;
    margin-left: 10px;
    }
    .customer_text
    {
    width: 40%;
    }
    .ticket_text, .ticket_text2, .wotext, .wotext_number, .amountdue_text
    {
    text-align: left;
    color: #000000;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    }
    .ticket_text
    {
    width: auto;
    }
    .wotext_number
    {
    text-align: right;
    white-space: nowrap;
    }
    .wotext, .wotext_number
    {
    font-size: 12px;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
    padding-right: 3px;
    }
    .ticket_label2
    {
    width: 120px;
    }
    .ticket_text2
    {
    width: auto;
    }
    .mycompany_info
    {
    font-size: 16px;
    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;
    }
    .top_right_text
    {
    font-size: 36px;
    font-family: "Arial Rounded MT Bold";
    color: #DDDDDD;
    text-align: center;
    }
    .largeHeader
    {
    font-size: 24px;
    }
    .subtotal_label
    {
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
    text-align: right;
    white-space: nowrap;
    }
    .subtotal_text
    {
    border-bottom: solid 1px #999999;
    text-align: right;
    }
    .ivItemLabel, .ivItemText
    {
    text-align: left;
    color: #000000;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    padding: 3px 3px 3px 3px;
    }
    .ivItemLabel
    {
    background-color: #CCCCCC;
    }
    .ivItemText
    {
    background-color: #F3F3F3;
    }
    .dates_and_terms
    {
    float: right;
    margin: 3px 0px 3px 0px;
    padding: 1px;
    border-collapse: collapse;
    border: 1px solid #CCCCCC;
    width: 100%;
    }
    .dates_and_terms_label
    {
    background-color: #EEEEEE;
    border-left: 1px solid #CCCCCC;
    padding: 0px 3px 0px 3px;
    width: 25%;
    }
    .signature {
    max-height: 120px;
    width: auto;
    }
</style>
<div class="pageContainer">
<table class="section">
    <tbody>
        <tr>
            <td>
            <table style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
                <tbody>
                    <tr>
                        <td class="mycompany_info" style="width: 20%;">_MyCompanyLogo_&nbsp;</td>
                        <td class="mycompany_info" style="width: 35%;">
                        <div style="font-size: 20px; text-align: left;"><span style="font-family: Arial;"><span style="font-family: Arial;">
                        PC Pit Crew</span><br />
                        </span></div>
                        <span style="font-family: Arial;">
                        <div style="text-align: left;"><span style="text-align: center;">_MyCompanyWebsite_</span>
                        </div>
                        <span style="text-align: center; font-weight: bold; font-family: Arial; font-size: 16px; color: #000000;">
                        <div style="text-align: left;">_MyCompanyEmail_</div>
                        </span>
                        <div style="text-align: left;">Ph. _MyCompanyPhone_</div>
                        <div style="text-align: left;">Fax _MyCompanyFax_</div>
                        </span></td>
                        <td style="width: 35%; text-align: right; vertical-align: top;">
                        <div style="padding-bottom: 12px; font-size: 22px; text-align: right;"><span style="font-family: Arial;">
                        Invoice #: _InvoiceNumber_</span></div>
                        <div class="contact_section">
                        <div class="customer_heading"><span style="font-family: Arial;">
                        Bill To</span></div>
                        <span style="font-family: Arial;">
                        _BillTo_
                        </span></div>
                        <div class="contact_section">
                        <div class="customer_heading"><span style="font-family: Arial;">
                        Service Location</span></div>
                        <span style="font-family: Arial;">
                        _ServiceLocationAddress_
                        </span></div>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>
<table class="dates_and_terms" border="0" cellspacing="0" cellpadding="2">
    <tbody>
        <tr>
            <td class="dates_and_terms_label" style="border-left-color: #cccccc; border-left-width: 0px; border-left-style: none;">
            Issued date: _IssuedDate_ &nbsp;
            </td>
            <td class="dates_and_terms_label">
            Due date: _DueDate_ &nbsp;
            </td>
            <td class="dates_and_terms_label">
            Terms: _Terms_ &nbsp;
            </td>
            <td class="dates_and_terms_label">
            P.O. #: _PONumber_ &nbsp;
            </td>
        </tr>
    </tbody>
</table>
<table class="section item_section">
    <tbody>
        <tr>
            <td class="ticket_heading">
            Item(s)
            </td>
        </tr>
        <tr>
            <td>
            _Items_
            </td>
        </tr>
    </tbody>
</table>
<table class="section">
    <tbody>
        <tr>
            <td style="width: 60%; vertical-align: top;">
            <table style="width: 90%;" border="0" cellspacing="3" cellpadding="2">
                <tbody>
                    <tr>
                        <td id="sig" style="width: 75%; border-bottom-color: #000000; border-bottom-width: 1px; border-bottom-style: solid;">
                        _Signature_
                        </td>
                        <td valign="bottom" style="width: 22%; border-bottom-color: #000000; border-bottom-width: 1px; border-bottom-style: solid;">
                        _SignatureDate_
                        </td>
                    </tr>
                    <tr>
                        <td>
                        Signature
                        </td>
                        <td>
                        Date
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td style="width: 40%; vertical-align: top;">
            <table width="100%" style="float: right;" border="0" cellspacing="2" cellpadding="2">
                <tbody>
                    <tr>
                        <td class="subtotal_label">
                        Subtotal &nbsp;
                        </td>
                        <td class="subtotal_text">
                        &nbsp; _SubTotal_
                        </td>
                    </tr>
                    <tr>
                        <td class="subtotal_label">
                        Tax &nbsp;
                        </td>
                        <td class="subtotal_text">
                        &nbsp; _Tax_
                        </td>
                    </tr>
                    <tr>
                        <td class="subtotal_label" style="width: 25%; font-weight: bold;">
                        Total &nbsp;
                        </td>
                        <td class="subtotal_text" style="width: 75%;">
                        &nbsp; _Total_
                        </td>
                    </tr>
                    <tr>
                        <td class="subtotal_label" style="width: 25%; font-weight: bold;">
                        Paid &nbsp;
                        </td>
                        <td class="subtotal_text" style="width: 75%;">
                        &nbsp; _Paid_
                        </td>
                    </tr>
                    <tr>
                        <td class="subtotal_label" style="width: 25%; font-weight: bold;">
                        Balance Due &nbsp;
                        </td>
                        <td class="subtotal_text" style="width: 75%;">
                        &nbsp; _BalanceDue_
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>
<table class="section">
    <tbody>
        <tr>
            <td class="ticket_heading">
            Notes
            </td>
        </tr>
        <tr>
            <td>
            _Notes_
            <br />
            </td>
        </tr>
    </tbody>
</table>
<table class="section">
    <tbody>
        <tr>
            <td class="ticket_heading">
            Terms
            </td>
        </tr>
        <tr>
            <td>
            Unless otherwise specified, payment for services is due upon completion. &nbsp;Payment may be made by Cash, Check, Major Credit Card, or Paypal. &nbsp;Credit/Debit payments made via phone will incur an additional 3% processing fee.&nbsp; Customer acknowledges by signature that all equipment has been returned in proper condition.</td>
        </tr>
    </tbody>
</table>
<div class="pageContainer" style="width: 728px;">
<table class="section" style="width: 728px;" border="0" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td style="width: 364px; vertical-align: top;"><br />
            </td>
            <td style="width: 364px; vertical-align: top;">
            <table style="width: 364px;" border="0" cellspacing="6" cellpadding="2">
                <tbody>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>
</div>
<table class="section">
    <tbody>
        <tr>
            <td style="width: 50%; vertical-align: top;">
            &nbsp;
            </td>
            <td style="width: 50%; vertical-align: top;">
            </td>
        </tr>
    </tbody>
</table>
<!-- Signature -->
</div>

Also do you intend for the signature and text below to be centered?

DocGreen · May 15, 2013

That does the trick!!

What did you modify to change the size of the signature?
I'd like to play with it a bit to try get the "balance due" line and the Signature line to line up a bit better.

mikeroq · May 15, 2013

Code:

<style type="text/css">
    body
    {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    }
    .pageContainer
    {
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    text-align: center;
    }
    .section
    {
    width: 100%;
    margin-bottom: 20px;
    page-break-inside: avoid;
    }
    .leftbox, .rightbox
    {
    width: 48%;
    background-color: #F3F3F3;
    }
    .customer_section, .contact_section
    {
    width: 100%;
    }
    .customer_section, .customer_section td, .contact_section, .contact_section td
    {
    border: 0px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    }
    .customer_heading, .ticket_heading, .contact_heading, .item_heading, .asset_heading, .mycompany_heading
    {
    font-size: 12px;
    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;
    }
    .customer_heading
    {
    text-align: left;
    }
    .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: 1px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    }
    .customer_label
    {
    text-align: left;
    font-weight: bold;
    color: #000000;
    background-color: #FFFFFF;
    vertical-align: top;
    white-space: nowrap;
    }
    .ticket_label, .ticket_label2, .wolabel, .amountdue_label
    {
    text-align: left;
    font-weight: bold;
    color: #000000;
    background-color: #FFFFFF;
    vertical-align: top;
    white-space: nowrap;
    border: 1px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    }
    .ticket_label
    {
    width: 120px;
    }
    .customer_label
    {
    width: 10%;
    margin-left: 10px;
    }
    .customer_text
    {
    width: 40%;
    }
    .ticket_text, .ticket_text2, .wotext, .wotext_number, .amountdue_text
    {
    text-align: left;
    color: #000000;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    }
    .ticket_text
    {
    width: auto;
    }
    .wotext_number
    {
    text-align: right;
    white-space: nowrap;
    }
    .wotext, .wotext_number
    {
    font-size: 12px;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
    padding-right: 3px;
    }
    .ticket_label2
    {
    width: 120px;
    }
    .ticket_text2
    {
    width: auto;
    }
    .mycompany_info
    {
    font-size: 16px;
    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;
    }
    .top_right_text
    {
    font-size: 36px;
    font-family: "Arial Rounded MT Bold";
    color: #DDDDDD;
    text-align: center;
    }
    .largeHeader
    {
    font-size: 24px;
    }
    .subtotal_label
    {
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
    text-align: right;
    white-space: nowrap;
    }
    .subtotal_text
    {
    border-bottom: solid 1px #999999;
    text-align: right;
    }
    .ivItemLabel, .ivItemText
    {
    text-align: left;
    color: #000000;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    padding: 3px 3px 3px 3px;
    }
    .ivItemLabel
    {
    background-color: #CCCCCC;
    }
    .ivItemText
    {
    background-color: #F3F3F3;
    }
    .dates_and_terms
    {
    float: right;
    margin: 3px 0px 3px 0px;
    padding: 1px;
    border-collapse: collapse;
    border: 1px solid #CCCCCC;
    width: 100%;
    }
    .dates_and_terms_label
    {
    background-color: #EEEEEE;
    border-left: 1px solid #CCCCCC;
    padding: 0px 3px 0px 3px;
    width: 25%;
    }
	.signature {
	 max-height: 108px;
    width: auto;
	}

</style>
<div class="pageContainer">
<table class="section">
    <tbody>
        <tr>
            <td>
            <table style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
                <tbody>
                    <tr>
                        <td class="mycompany_info" style="width: 20%;">_MyCompanyLogo_&nbsp;</td>
                        <td class="mycompany_info" style="width: 35%;">
                        <div style="font-size: 20px; text-align: left;"><span style="font-family: Arial;"><span style="font-family: Arial;">
                        PC Pit Crew</span><br />
                        </span></div>
                        <span style="font-family: Arial;">
                        <div style="text-align: left;"><span style="text-align: center;">_MyCompanyWebsite_</span>
                        </div>
                        <span style="text-align: center; font-weight: bold; font-family: Arial; font-size: 16px; color: #000000;">
                        <div style="text-align: left;">_MyCompanyEmail_</div>
                        </span>
                        <div style="text-align: left;">Ph. _MyCompanyPhone_</div>
                        <div style="text-align: left;">Fax _MyCompanyFax_</div>
                        </span></td>
                        <td style="width: 35%; text-align: right; vertical-align: top;">
                        <div style="padding-bottom: 12px; font-size: 22px; text-align: right;"><span style="font-family: Arial;">
                        Invoice #: _InvoiceNumber_</span></div>
                        <div class="contact_section">
                        <div class="customer_heading"><span style="font-family: Arial;">
                        Bill To</span></div>
                        <span style="font-family: Arial;">
                        _BillTo_
                        </span></div>
                        <div class="contact_section">
                        <div class="customer_heading"><span style="font-family: Arial;">
                        Service Location</span></div>
                        <span style="font-family: Arial;">
                        _ServiceLocationAddress_
                        </span></div>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>
<table class="dates_and_terms" border="0" cellspacing="0" cellpadding="2">
    <tbody>
        <tr>
            <td class="dates_and_terms_label" style="border-left-color: #cccccc; border-left-width: 0px; border-left-style: none;">
            Issued date: _IssuedDate_ &nbsp;
            </td>
            <td class="dates_and_terms_label">
            Due date: _DueDate_ &nbsp;
            </td>
            <td class="dates_and_terms_label">
            Terms: _Terms_ &nbsp;
            </td>
            <td class="dates_and_terms_label">
            P.O. #: _PONumber_ &nbsp;
            </td>
        </tr>
    </tbody>
</table>
<table class="section item_section">
    <tbody>
        <tr>
            <td class="ticket_heading">
            Item(s)
            </td>
        </tr>
        <tr>
            <td>
            _Items_
            </td>
        </tr>
    </tbody>
</table>
<table class="section">
    <tbody>
        <tr>
            <td style="width: 60%; vertical-align: top;">
            <table style="width: 90%;" border="0" cellspacing="3" cellpadding="2">
                <tbody>
                    <tr>
                        <td id="sig" style="width: 75%; border-bottom-color: #000000; border-bottom-width: 1px; border-bottom-style: solid;">
                        _Signature_
                        </td>
                        <td valign="bottom" style="width: 22%; border-bottom-color: #000000; border-bottom-width: 1px; border-bottom-style: solid;">
                        _SignatureDate_
                        </td>
                    </tr>
                    <tr>
                        <td>
                        Signature
                        </td>
                        <td>
                        Date
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td style="width: 40%; vertical-align: top;">
            <table width="100%" style="float: right;" border="0" cellspacing="2" cellpadding="2">
                <tbody>
                    <tr>
                        <td class="subtotal_label">
                        Subtotal &nbsp;
                        </td>
                        <td class="subtotal_text">
                        &nbsp; _SubTotal_
                        </td>
                    </tr>
                    <tr>
                        <td class="subtotal_label">
                        Tax &nbsp;
                        </td>
                        <td class="subtotal_text">
                        &nbsp; _Tax_
                        </td>
                    </tr>
                    <tr>
                        <td class="subtotal_label" style="width: 25%; font-weight: bold;">
                        Total &nbsp;
                        </td>
                        <td class="subtotal_text" style="width: 75%;">
                        &nbsp; _Total_
                        </td>
                    </tr>
                    <tr>
                        <td class="subtotal_label" style="width: 25%; font-weight: bold;">
                        Paid &nbsp;
                        </td>
                        <td class="subtotal_text" style="width: 75%;">
                        &nbsp; _Paid_
                        </td>
                    </tr>
                    <tr>
                        <td class="subtotal_label" style="width: 25%; font-weight: bold;">
                        Balance Due &nbsp;
                        </td>
                        <td class="subtotal_text" style="width: 75%;">
                        &nbsp; _BalanceDue_
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>
<table class="section">
    <tbody>
        <tr>
            <td class="ticket_heading">
            Notes
            </td>
        </tr>
        <tr>
            <td>
            _Notes_
            <br />
            </td>
        </tr>
    </tbody>
</table>
<table class="section">
    <tbody>
        <tr>
            <td class="ticket_heading">
            Terms
            </td>
        </tr>
        <tr>
            <td>
            Unless otherwise specified, payment for services is due upon completion. &nbsp;Payment may be made by Cash, Check, Major Credit Card, or Paypal. &nbsp;Credit/Debit payments made via phone will incur an additional 3% processing fee.&nbsp; Customer acknowledges by signature that all equipment has been returned in proper condition.</td>
        </tr>
    </tbody>
</table>
<div class="pageContainer" style="width: 728px;">
<table class="section" style="width: 728px;" border="0" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td style="width: 364px; vertical-align: top;"><br />
            </td>
            <td style="width: 364px; vertical-align: top;">
            <table style="width: 364px;" border="0" cellspacing="6" cellpadding="2">
                <tbody>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>
</div>
<table class="section">
    <tbody>
        <tr>
            <td style="width: 50%; vertical-align: top;">
            &nbsp;
            </td>
            <td style="width: 50%; vertical-align: top;">
            </td>
        </tr>
    </tbody>
</table>
<!-- Signature -->
</div>

In the style section, I bumped it down to 108px the size of the image it makes when you sign it on the desktop site.

Code:

.signature {
	 max-height: 108px;
    width: auto;
	}

DocGreen · May 15, 2013

mikeroq said:
In the style section, I bumped it down to 108px the size of the image it makes when you sign it on the desktop site.

Code:

.signature { max-height: 108px; width: auto; }

I actually just did that like 2 seconds before I got the post notifications, lol.

What I did was opened a screenshot of the html in Photoshop, and then measured the pixel difference between the two lines (18px). Found that line in the style section and changed it to 102px... and presto!! It's perfect

Mike.... you are the f****** man! I am SO happy to finally have this fixed. It's been driving me absolutely bonkers having my invoices take up 2 pages with a bunch of empty space. Hell, you probably just saved a tree or two! Thank you thank you thank you! LOL

mikeroq · May 15, 2013

DocGreen said:
I actually just did that like 2 seconds before I got the post notifications, lol.

What I did was opened a screenshot of the html in Photoshop, and then measured the pixel difference between the two lines (18px). Found that line in the style section and changed it to 102px... and presto!! It's perfect

Mike.... you are the f****** man! I am SO happy to finally have this fixed. It's been driving me absolutely bonkers having my invoices take up 2 pages with a bunch of empty space. Hell, you probably just saved a tree or two! Thank you thank you thank you! LOL

No problem, I think that was the easiest thing I've done all day!

UCanFixit · May 15, 2013

Again, excellent job mikerog!

DocGreen · May 15, 2013

I'm thinking about doing the same thing with the estimates... do you think it'd work out if I just moved the signature field over in the mhelpdesk WYSIWYG designer and then manually change the max height in the style section?

DocGreen · May 15, 2013

DocGreen said:
I'm thinking about doing the same thing with the estimates... do you think it'd work out if I just moved the signature field over in the mhelpdesk WYSIWYG designer and then manually change the max height in the style section?

Eh... not so much.

The estimate HTML didn't have that same entry that the Invoice did...

Code:

.signature {
	 max-height: 108px;
    width: auto;
	}

So, I added that to the bottom of the style section... didn't do anything.

Does the .signature tag link to another part of the HTML?

***EDIT***

Copied the entire Signature table from the invoice over to the estimate... worked like a charm! Apparently the code on the estimate page was all screwed up.... bunch of unnecessary "&nbsp" all over the place... really annoying. Good to go now though!

mikeroq · May 15, 2013

UCanFixit said:
Again, excellent job mikerog!

Ok I can't take it anymore. It's a

QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQ

Thank you.

The .signature class is placed on the actual image that replaces the _Signature_.

DocGreen said:
Eh... not so much.

The estimate HTML didn't have that same entry that the Invoice did...

I added that style in myself.

DocGreen · May 15, 2013

mikeroq said:
QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQ

ROFL

fillerfillerfillerfiller

hmig89 · Jul 18, 2013

Share

Hi Docgreen,

Sorry to bring up this thread, but would you mind sharing this layout? or the HTML in this case if not I understand if not.

Thanks
Hugo

DocGreen · Jul 18, 2013

I don't mind at all. Once I get back to the office I'll post that for ya. :thumbup:

hmig89 · Jul 18, 2013

thanks

DocGreen said:
I don't mind at all. Once I get back to the office I'll post that for ya. :thumbup:

Thanks Doc!

Filler

DocGreen · Jul 18, 2013

Here ya go. Keep in mind you'll probably have to edit this to replace my company specific stuff with your own. First one is the invoice HTML:

Code:

<style type="text/css">
    body
    {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    }
    .pageContainer
    {
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    text-align: center;
    }
    .section
    {
    width: 100%;
    margin-bottom: 20px;
    page-break-inside: avoid;
    }
    .leftbox, .rightbox
    {
    width: 48%;
    background-color: #F3F3F3;
    }
    .customer_section, .contact_section
    {
    width: 100%;
    }
    .customer_section, .customer_section td, .contact_section, .contact_section td
    {
    border: 0px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    }
    .customer_heading, .ticket_heading, .contact_heading, .item_heading, .asset_heading, .mycompany_heading
    {
    font-size: 12px;
    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;
    }
    .customer_heading
    {
    text-align: left;
    }
    .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: 1px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    }
    .customer_label
    {
    text-align: left;
    font-weight: bold;
    color: #000000;
    background-color: #FFFFFF;
    vertical-align: top;
    white-space: nowrap;
    }
    .ticket_label, .ticket_label2, .wolabel, .amountdue_label
    {
    text-align: left;
    font-weight: bold;
    color: #000000;
    background-color: #FFFFFF;
    vertical-align: top;
    white-space: nowrap;
    border: 1px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    }
    .ticket_label
    {
    width: 120px;
    }
    .customer_label
    {
    width: 10%;
    margin-left: 10px;
    }
    .customer_text
    {
    width: 40%;
    }
    .ticket_text, .ticket_text2, .wotext, .wotext_number, .amountdue_text
    {
    text-align: left;
    color: #000000;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    }
    .ticket_text
    {
    width: auto;
    }
    .wotext_number
    {
    text-align: right;
    white-space: nowrap;
    }
    .wotext, .wotext_number
    {
    font-size: 12px;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
    padding-right: 3px;
    }
    .ticket_label2
    {
    width: 120px;
    }
    .ticket_text2
    {
    width: auto;
    }
    .mycompany_info
    {
    font-size: 16px;
    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;
    }
    .top_right_text
    {
    font-size: 36px;
    font-family: "Arial Rounded MT Bold";
    color: #DDDDDD;
    text-align: center;
    }
    .largeHeader
    {
    font-size: 24px;
    }
    .subtotal_label
    {
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
    text-align: right;
    white-space: nowrap;
    }
    .subtotal_text
    {
    border-bottom: solid 1px #999999;
    text-align: right;
    }
    .ivItemLabel, .ivItemText
    {
    text-align: left;
    color: #000000;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    padding: 3px 3px 3px 3px;
    }
    .ivItemLabel
    {
    background-color: #CCCCCC;
    }
    .ivItemText
    {
    background-color: #F3F3F3;
    }
    .dates_and_terms
    {
    float: right;
    margin: 3px 0px 3px 0px;
    padding: 1px;
    border-collapse: collapse;
    border: 1px solid #CCCCCC;
    width: 100%;
    }
    .dates_and_terms_label
    {
    background-color: #EEEEEE;
    border-left: 1px solid #CCCCCC;
    padding: 0px 3px 0px 3px;
    width: 25%;
    }
    .signature {
    max-height: 102px;
    width: auto;
    }
</style>
<div class="pageContainer">
<table class="section">
    <tbody>
        <tr>
            <td>
            <table style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
                <tbody>
                    <tr>
                        <td class="mycompany_info" style="width: 20%;">_MyCompanyLogo_&nbsp;</td>
                        <td class="mycompany_info" style="width: 35%;">
                        <div style="font-size: 20px; text-align: left;"><span style="font-family: Arial;"><span style="font-family: Arial;">
                        PC Pit Crew</span><br />
                        </span></div>
                        <span style="font-family: Arial;">
                        <div style="text-align: left;"><span style="text-align: center;">_MyCompanyWebsite_</span>
                        </div>
                        <span style="text-align: center; font-weight: bold; font-family: Arial; font-size: 16px; color: #000000;">
                        <div style="text-align: left;">_MyCompanyEmail_</div>
                        </span>
                        <div style="text-align: left;">Ph. _MyCompanyPhone_</div>
                        <div style="text-align: left;">Fax _MyCompanyFax_</div>
                        </span></td>
                        <td style="width: 35%; text-align: right; vertical-align: top;">
                        <div style="padding-bottom: 12px; font-size: 22px; text-align: right;"><span style="font-family: Arial;">
                        Invoice #: _InvoiceNumber_</span></div>
                        <div class="contact_section">
                        <div class="customer_heading"><span style="font-family: Arial;">
                        Bill To</span></div>
                        <span style="font-family: Arial;">
                        _BillTo_
                        </span></div>
                        <div class="contact_section">
                        <div class="customer_heading"><span style="font-family: Arial;">
                        Service Location</span></div>
                        <span style="font-family: Arial;">
                        _ServiceLocationAddress_
                        </span></div>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>
<table class="dates_and_terms" border="0" cellspacing="0" cellpadding="2">
    <tbody>
        <tr>
            <td class="dates_and_terms_label" style="border-left-color: #cccccc; border-left-width: 0px; border-left-style: none;">
            Issued date: _IssuedDate_ &nbsp;
            </td>
            <td class="dates_and_terms_label">
            Due date: _DueDate_ &nbsp;
            </td>
            <td class="dates_and_terms_label">
            Terms: _Terms_ &nbsp;
            </td>
            <td class="dates_and_terms_label">
            P.O. #: _PONumber_ &nbsp;
            </td>
        </tr>
    </tbody>
</table>
<table class="section item_section">
    <tbody>
        <tr>
            <td class="ticket_heading">
            Item(s)
            </td>
        </tr>
        <tr>
            <td>
            _Items_
            </td>
        </tr>
    </tbody>
</table>
<table class="section">
    <tbody>
        <tr>
            <td style="width: 60%; vertical-align: top;">
            <table style="width: 90%;" border="0" cellspacing="3" cellpadding="2">
                <tbody>
                    <tr>
                        <td id="sig" style="width: 75%; border-bottom-color: #000000; border-bottom-width: 1px; border-bottom-style: solid;">
                        _Signature_
                        </td>
                        <td valign="bottom" style="width: 22%; border-bottom-color: #000000; border-bottom-width: 1px; border-bottom-style: solid;">
                        _SignatureDate_
                        </td>
                    </tr>
                    <tr>
                        <td>
                        Signature
                        </td>
                        <td>
                        Date
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td style="width: 40%; vertical-align: top;">
            <table width="100%" style="float: right;" border="0" cellspacing="2" cellpadding="2">
                <tbody>
                    <tr>
                        <td class="subtotal_label">
                        Subtotal &nbsp;
                        </td>
                        <td class="subtotal_text">
                        &nbsp; _SubTotal_
                        </td>
                    </tr>
                    <tr>
                        <td class="subtotal_label">
                        Tax &nbsp;
                        </td>
                        <td class="subtotal_text">
                        &nbsp; _Tax_
                        </td>
                    </tr>
                    <tr>
                        <td class="subtotal_label" style="width: 25%; font-weight: bold;">
                        Total &nbsp;
                        </td>
                        <td class="subtotal_text" style="width: 75%;">
                        &nbsp; _Total_
                        </td>
                    </tr>
                    <tr>
                        <td class="subtotal_label" style="width: 25%; font-weight: bold;">
                        Paid &nbsp;
                        </td>
                        <td class="subtotal_text" style="width: 75%;">
                        &nbsp; _Paid_
                        </td>
                    </tr>
                    <tr>
                        <td class="subtotal_label" style="width: 25%; font-weight: bold;">
                        Balance Due &nbsp;
                        </td>
                        <td class="subtotal_text" style="width: 75%;">
                        &nbsp; _BalanceDue_
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>
<table class="section">
    <tbody>
        <tr>
            <td class="ticket_heading">
            Notes
            </td>
        </tr>
        <tr>
            <td>
            _Notes_
            <br />
            </td>
        </tr>
    </tbody>
</table>
<table class="section">
    <tbody>
        <tr>
            <td class="ticket_heading">
            Terms
            </td>
        </tr>
        <tr>
            <td>
            Unless otherwise specified, payment for services is due upon completion. &nbsp;Payment may be made by Cash, Check, Major Credit Card, or Paypal. &nbsp;Credit/Debit payments made via phone will incur an additional 3% processing fee.&nbsp; Customer acknowledges by signature that all equipment has been returned in proper condition.</td>
        </tr>
    </tbody>
</table>
<div class="pageContainer" style="width: 728px;">
<table class="section" style="width: 728px;" border="0" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td style="width: 364px; vertical-align: top;"><br />
            </td>
            <td style="width: 364px; vertical-align: top;">
            <table style="width: 364px;" border="0" cellspacing="6" cellpadding="2">
                <tbody>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>
</div>
<table class="section">
    <tbody>
        <tr>
            <td style="width: 50%; vertical-align: top;">
            &nbsp;
            </td>
            <td style="width: 50%; vertical-align: top;">
            </td>
        </tr>
    </tbody>
</table>
<!-- Signature -->
</div>

Next one is the Estimate HTML:

Code:

<style type="text/css">
    body
    {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    }
    .pageContainer
    {
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-align: center;
    }
    .section
    {
    width: 100%;
    margin-bottom: 20px;
    /*page-break-inside: avoid;*/
    }
    .leftbox, .rightbox
    {
    width: 48%;
    background-color: #F3F3F3;
    }
    .customer_section, .contact_section
    {
    width: 100%;
    }
    .customer_section, .customer_section td, .contact_section, .contact_section td
    {
    border: 0px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    }
    .customer_heading, .ticket_heading, .contact_heading, .item_heading, .asset_heading, .mycompany_heading
    {
    font-size: 12px;
    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;
    }
    .customer_heading
    {
    text-align: left;
    }
    .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: 1px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    }
    .customer_label
    {
    text-align: left;
    font-weight: bold;
    color: #000000;
    background-color: #FFFFFF;
    vertical-align: top;
    white-space: nowrap;
    }
    .ticket_label, .ticket_label2, .wolabel, .amountdue_label
    {
    text-align: left;
    font-weight: bold;
    color: #000000;
    background-color: #FFFFFF;
    vertical-align: top;
    white-space: nowrap;
    border: 1px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    }
    .ticket_label
    {
    width: 10%;
    }
    .customer_label
    {
    width: 10%;
    margin-left: 10px;
    }
    .customer_text
    {
    width: 40%;
    }
    .ticket_text, .ticket_text2, .wotext, .wotext_number, .amountdue_text
    {
    text-align: left;
    color: #000000;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    }
    .ticket_text
    {
    width: 40%;
    }
    .wotext_number
    {
    text-align: right;
    white-space: nowrap;
    }
    .wotext, .wotext_number
    {
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
    padding-right: 3px;
    }
    .ticket_label2
    {
    width: 10%;
    }
    .ticket_text2
    {
    width: 40%;
    }
    .mycompany_info
    {
    font-size: 16px;
    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;
    }
    .top_right_text
    {
    font-size: 36px;
    font-family: "Arial";
    color: #DDDDDD;
    text-align: center;
    }
    .largeHeader
    {
    font-size: 24px;
    }
    .subtotal_label
    {
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
    text-align: right;
    white-space: nowrap;
    }
    .subtotal_text
    {
    border-bottom: solid 1px #999999;
    text-align: right;
    }
    .signature
    {
    max-height: 102px;
    width: auto;
    }
</style>
<div class="pageContainer">
<table class="section">
    <tbody>
        <tr>
            <td>
            <table style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
                <tbody>
                    <tr>
                        <td class="mycompany_info" style="width: 20%;">&nbsp;<span style="font-size: 14px;">_MyCompanyLogo_</span></td>
                        <td class="mycompany_info" style="width: 30%;">
                        <div style="font-size: 20px; text-align: left;"><span style="font-family: Arial;">PC Pit Crew</span></div>
                        <div style="text-align: left;"><span style="font-size: 14px; font-family: Arial;"><span style="font-size: 14px; font-weight: bold; color: #000000;">_MyCompanyEmail_</span><br />
                        _MyCompanyWebsite_<br />
                        </span></div>
                        <div style="text-align: left;"><span style="font-size: 14px; font-family: Arial;">Ph. _MyCompanyPhone_</span></div>
                        <div style="text-align: left;"><span style="font-size: 14px; font-family: Arial;">Fax _MyCompanyFax_</span></div>
                        </td>
                        <td class="top_right_text" style="width: 50%;"><span style="font-family: Arial; color: #000000;">
                        Estimate<br />
                        </span>
                        <div style="font-size: 16px;"><span style="font-family: Arial;"><span style="color: #000000;">
                        _ID_<br />
                        _EstimateDate_</span><br />
                        </span></div>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>
<span style="font-size: 11px;"></span><span style="font-size: 11px;"></span>
<table class="section">
    <tbody>
        <tr>
            <td class="leftbox" style="text-align: left; vertical-align: top;">
            <div class="customer_section">
            <div class="customer_heading"><span style="font-size: 11px;">
            _CustomerHeader_</span></div>
            <span style="font-size: 11px;">
            _CustomerInfo_
            </span></div>
            </td>
            <td><span style="font-size: 11px;">
            &nbsp;
            </span></td>
            <td class="rightbox" style="text-align: right; vertical-align: top;">
            <div class="contact_section">
            <div class="customer_heading"><span style="font-size: 11px;">
            Service Location<br />
            </span></div>
            <span style="font-size: 11px;">
            _ServiceLocationAddress_
            </span></div>
            </td>
        </tr>
    </tbody>
</table>
<table class="section item_section">
    <tbody>
        <tr>
            <td class="ticket_heading"><span style="font-size: 11px;">
            Item(s)
            </span></td>
        </tr>
        <tr>
            <td><span style="font-size: 11px;">
            _Items_
            </span></td>
        </tr>
    </tbody>
</table>
<table class="section">
    <tbody>
        <tr>
            <!-- Signature -->
            <td style="width: 60%; vertical-align: top;">
            <table style="width: 90%;" border="0" cellspacing="3" cellpadding="2">
                <tbody>
                    <tr>
                        <td id="sig" style="width: 75%; border-bottom-color: #000000; border-bottom-width: 1px; border-bottom-style: solid;">
                        _Signature_
                        </td>
                        <td valign="bottom" style="width: 22%; border-bottom-color: #000000; border-bottom-width: 1px; border-bottom-style: solid;">
                        _SignatureDate_
                        </td>
                    </tr>
                    <tr>
                        <td>
                        Signature
                        </td>
                        <td>
                        Date
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
            <!-- Totals -->
            <td style="width: 40%; vertical-align: top;">
            <table width="100%" style="float: right;" border="0" cellspacing="2" cellpadding="2">
                <tbody>
                    <tr>
                        <td class="subtotal_label"><span style="font-size: 12px;">
                        Subtotal &nbsp;
                        </span></td>
                        <td class="subtotal_text"><span style="font-size: 12px;">
                        &nbsp; _subtotal_
                        </span></td>
                    </tr>
                    <tr>
                        <td><span style="font-size: 12px;">
                        &nbsp;
                        </span></td>
                        <td><span style="font-size: 12px;">
                        &nbsp;
                        </span></td>
                    </tr>
                    <tr>
                        <td class="subtotal_label"><span style="font-size: 12px;">
                        Tax &nbsp;
                        </span></td>
                        <td class="subtotal_text"><span style="font-size: 12px;">
                        &nbsp; _tax_
                        </span></td>
                    </tr>
                    <tr>
                        <td><span style="font-size: 12px;">
                        &nbsp;
                        </span></td>
                        <td><span style="font-size: 12px;">
                        &nbsp;
                        </span></td>
                    </tr>
                    <tr>
                        <td class="subtotal_label" style="width: 25%; font-weight: bold;"><span style="font-size: 16px;">
                        Total &nbsp;
                        </span></td>
                        <td class="subtotal_text" style="width: 75%;"><span style="font-size: 16px;">
                        &nbsp; _total_
                        </span></td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>
<!-- Notes -->
<table class="section">
    <tbody>
        <tr>
            <td class="ticket_heading"><span style="font-size: 11px;">
            Notes
            </span></td>
        </tr>
        <tr>
            <td style="text-align: justify;"><span style="font-size: 11px;">
            _ArrivalWindow_ _ServiceLocationNotes_ _WorkOrderNotes_
            </span></td>
        </tr>
    </tbody>
</table>
<!-- Terms -->
<table class="section">
    <tbody>
        <tr>
            <td class="ticket_heading"><span style="font-size: 11px;">
            Terms
            </span></td>
        </tr>
        <tr>
            <td style="text-align: justify;"><span style="font-family: Arial; font-size: 10px;">
            Redacted</span></td>
        </tr>
    </tbody>
</table>
</div>

Need help with HTML templates (mhelpdesk)

Well-Known Member

Well-Known Member

Well-Known Member

Well-Known Member

Well-Known Member

Well-Known Member

Well-Known Member

Well-Known Member

Well-Known Member

Well-Known Member

Well-Known Member

New Member

Well-Known Member

Well-Known Member

Well-Known Member

Well-Known Member

Active Member

Well-Known Member

Active Member

Well-Known Member

Similar threads