ServiceSidekick Blog

Custom estimate and invoice templates

March 13, 2008

Today we are pleased to announce that one of our most highly requested features has been introduced - totally customizable estimate and invoice templates!

Many of our customers have already spent some time customizing estimate and invoice templates from QuickBooks and obviously didn't want to settle for our former pre-canned options.

Thankfully we now can support nearly any template style, color, or format that can be imagined!

The best part is that custom templates in ServiceSidekick are created using HTML & CSS - the building blocks of every web site on the Internet. Using basic HTML & CSS, you can design your template in any one of the thousands of html editors and then copy and paste the template into ServiceSidekick.

If you need help translating an existing template from QuickBooks into HTML or need some pointers to get started feel free to contact us and we'll help straight-away.

The Details

Let's walk through building a custom template by first looking at a very simple example.

Example 1 - Simple template (without formatting)

<html>
    <body>
        Estimate #
        <span class="estimate_number"></span>
        <div class="job_charges"></div>
    </body>
</html>

PDF Example 1

Now this template is not very pretty but it serves as a good starting point to begin explaining the process of designing a custom template.

Enclosed in the standard HTML opening tags of html and body are the following lines:

  • Estimate # Just plain text and will print out as shown in the estimate.
  • span class="estimate_number" A span HTML tag with a special class of estimate_number. This class instructs ServiceSidekick to replace this tag with the actual estimate number.
  • div class="job_charges" A div HTML tag with a special class of job_charges. This class instructs ServiceSidekick to replace this tag with all the estimate line items.

The reason this template looks jumbled is because it contains no formatting at all.

But before we add formatting, let's take a look at the basic format of a custom template that can be used as a starting point for any template.

Custom template skeleton

<html>
    <head>
        <style type="text/css">
            FORMATTING GOES HERE...
        </style>
    </head>
    <body>
        TEMPLATE GOES HERE...
    </body>
</html>

Again, those familiar with HTML & CSS will recognize this as the basic skeleton of a web page.

So now we are ready to give our example template a much-needed makeover...

Example 2 - Simple template (with formatting)

<html>
    <head>
        <style type="text/css">
            body { margin: 20px 50px; }
            table { width: 100%; margin-bottom: 20px; border-collapse: collapse; }
            table td { vertical-align: top; }

            table#charges { margin: 25px 0; border: 1px solid #555; }
            table#charges th, table#charges td { text-align: left; padding: 3px 10px; }
            table#charges td { border-top: 1px solid #dcdcdc; }
        </style>
    </head>
    <body>
        <h1>
            Estimate #
            <span class="estimate_number"></span>
        </h1>
        <div class="job_charges"></div>
    </body>
</html>

PDF Example 2

Now our template is starting to look a lot better. Let's break down what is going on here:

  • body { margin: 20px 50px; } Setting up our margins (px = pixels).
  • table { width: 100%; margin-bottom: 20px; border-collapse: collapse; } Set tables to fill the width of the page and streamline the border.
  • table td { vertical-align: top; } Align text in table rows to top.
  • table#charges { margin: 25px 0; border: 1px solid #555; } Set margin on line items table and draw border.
  • table#charges th, table#charges td { text-align: left; padding: 3px 10px; } Align text to the left and pad (make margins) in the line item text sections.
  • table#charges td { border-top: 1px solid #dcdcdc; } Separate line items with a line.

This example should serve as a good starting point for your own custom templates.

Special CSS classes

The following special classes can be used to instruct ServiceSidekick to replace it with the actual account, customer, estimate, or job data at the time the template is processed.

Account information

logo
company_name
company_billing_address
company_billing_city
company_billing_state
company_billing_zip_code
company_billing_phone_number

Customer information

customer_name
customer_number
customer_service_address
customer_service_city
customer_service_state
customer_service_zip_code
customer_billing_address
customer_billing_city
customer_billing_state
customer_billing_zip_code
customer_email_address
customer_phone_number
customer_fax
customer_alt_phone_number

Job information

job_name
job_number
job_created_on
job_scheduled_on
job_completed_on

Estimate information

estimate_name
estimate_number
estimate_created_on
estimate_scheduled_on
estimate_completed_on

Job or estimate job charges (line items)

job_charges

Examples

Add company logo (must be uploaded first)

<div class="logo"></div>

Insert company name

<div class="company_name"></div>

Insert customer email address

<div class="customer_email_address"></div>

Insert date job was completed

<div class="job_completed_on"></div>

Conclusion

We hope you really like this new feature. Again, feel free to contact us with any questions regarding custom templates at support@servicesidekick.com

Back to the Blog