Need help with HTML templates (mhelpdesk)

Hello Doc I know this is a little off topic and maybe I need to start a new thread but can you tell me overall how you like MHD? I have been in business now for about 7 years on my own and just recently opened a brick and mortar store and I have been using Freshbooks for about 6 years and I really like it but it lacks features like bar coding and internal notes and things like that.

I am looking to invest into MHD but just wanted another pc techs opinion. Do you use the barcode asset tracking that MHD offers? Thanks so much for your time!

Dave
 
I think MHD is awesome... but I also don't run a brick & mortar. The barcoding is a nice feature, but it leaves a lot to be desired. The barcodes are ONLY for systems right now, and even if you use something else to make barcodes (ie. Dymo's software) the only other searchable fields are "customer" and "tickets." For a brick and mortar, you may want to look at one of the other softwares that offer POS features. MHD has talked about adding POS, but as it stands its just talk.
 
Thank you for taking the time to post on my question. I am very happy with Freshbooks if only it had asset tracking like MHD but I am willing to switch if it helps things flow better here in the shop. I am not sure yet what I am going to use as a POS at this point or if I will even need it yet since I am starting small on stocking inventory.

I am mostly looking for a better way to track the computers and devices coming in and out of the shop without some of the paper lying around. I am trying to avoid printing out work orders and laying them on top of the machines and the messy handwriting of all the various notes and things. If we can enter those notes in I think it will be more efficient for my other techs who look up the notes.

Thanks again for your time!
 
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>


Boy am I glad to have found this old thread! I was just trying to add something to my invoice template and somehow managed to completely break it, and for the life of me I couldn't find a working copy of that template anywhere... except here!! LOL
 
Thanks Mike, I may take you up on that. My html is getting better, but I still know squat about css. I do have a copy of Dreamweaver that I've been playing with though, which is what I used to modify the template this time to add in the "pay online" feature... helped a lot!
 
Back
Top