Document Formatting Tricks and Tips

All of the formatting options below will be used on the Document Templates page which can be found by going to Settings>Document Templates inside Estimate Rocket. Copy and paste the code you want to use into the field stated in the instructions.


Text Formatting     Document CSS      International Currency Symbols     Line Item Formatting     Terms Formatting


Page and Text formatting



Insert Job/Project Name and Project Location address into Intro Section

---
<div class='project_location' style="text-align:right; font-weight: bold" >{project_name} </div>
<div class='project_location' style="text-align:right; font-weight: bold" >Job Location: {project_location} </div>
---


Page Break

<div style='page-break-before: always'></div>


Change Font Size - Change the 9px for the size. Bigger number = Bigger text size

<span style='font-size: 9px;'>Text that you want this size.</span>


Change Text Color - #ff0000 is the color red.

<span style="color: #ff0000">10% Discount</span>



Document Style Settings (CSS)



Add a Paragraph Margin

To add spacing between paragraphs in line item descriptions

.line-item-description p { margin-bottom: 5px }


Remove Paragraph Margin From Last Line

p:last-child { margin-bottom: 0 }


Add padding to Group Header on right

.line-item-headers .line-item-total { padding-right: 2px; }


Shade Line Item Group Headers Examples

Dark Grey Letters on Light Grey Background:

thead { background: #e7e3e4; color: #333333; }
thead {border-bottom: 1px #ccc solid;}

White Letters on Blue Background (CTP):

thead { background: #0099cc; color: #fff; } 
thead {border-bottom: 1px #ccc solid;}

White Letters on Grey Background:

thead { background: #d3d3d3; color: #FEFEFE; }
thead {border-bottom: 1px #ccc solid;}


Make the Client Name and Address Section Bold

.section-client { font-weight: bold; }


Make the Totals Section Bold

.totals th { font-weight: bold; } 
.totals td { font-weight: bold; }


Align Prices with Top of Line Item Description instead of middle of the description

.line-item td { vertical-align: top; }


Add text After the Document Type (Estimate, Work Order, Invoice)

.document-type:after {
 content: "/Scope";
}


Add text Before the Document Type (Estimate, Work Order, Invoice)

.document-type:before {
 content: "Job ";
}


Work Order Internal Notes Big and Bold

.line-item-description p { margin-bottom: 5px }
.line-item-notes {font-size: 18px; font-weight: bold; }


Replace the Document type Text

These settings on the Estimate Document Template would change the word Estimate to Proposal.

Place the line below in the Document Settings Intro Tab - replace the bold text with what you want for the Document type

<span class='document-type' style='position: absolute; top: 0; right: 0;'>Proposal</span>

Place the line below in the CSS Tab

div.document-type { visibility: hidden; }


Override Document Type and Document Date with Line Item

Name: Invoice

Unit Price: 0.0

Description:

<style>
div.document-type { visibility: hidden; }
div.document-date { visibility: hidden; }
</style>
<span class='document-type' style='position: absolute; top: 0; right: 0;'> Invoice </span>
<span class='document-date' style='position: absolute; top: 0; right: 0;'>12/31/2015 </span>



International Currency Symbols (CSS Tab)


Change the word Tax to VAT in document total section

.totals tr:nth-child(2) th:before {content: 'VAT'; position: relative; right: -24px; background: white; }


British Pounds (Group totals breaks if hiding unit prices or quantities)

.totals td:before, td .line-item-unit-price:before, td .line-item-total:before, .line-items tfoot tr td:nth-child(4):before { content: '£'; position: relative; right: -8px; background: white; }


Euro symbol (Group totals breaks if hiding unit prices or quantities)

.totals td:before, td .line-item-unit-price:before, td .line-item-total:before, .line-items tfoot tr td:nth-child(4):before { content: '€'; position: relative; right: -8px; background: white; }


South African RAND (Group totals breaks if hiding unit prices or quantities)

.totals td:before, td .line-item-unit-price:before, td .line-item-total:before, .line-items tfoot tr td:nth-child(4):before { content: 'R'; position: relative; right: -8px; background: white; }


India Rupee (Group totals breaks if hiding unit prices or quantities)

.totals td:before, td .line-item-unit-price:before, td .line-item-total:before, .line-items tfoot tr td:nth-child(4):before { content: '‎₹ '; position: relative; right: -8px; background: white; }



Line Item Formatting


Merge Item Name and Description (Put in the CSS tab)

.line-item-name { display: inline-block; text-decoration: none; font-weight: bold; margin-right: 5px; }
.line-item-description { display: inline-block; }


Line Item Name with no Underline (Put in the CSS tab)

.line-item-name { text-decoration: none; font-weight: bold; margin-right: 5px; }


Line item to override work order date

Work order description with Date override....

Add in photo of line item here....

<style>div.document-date { visibility: hidden; }</style>
<span class='document-date' >10/15/2015 </span>


Discount Line Item

### <span style="color: #ff0000">10% Discount</span>



Terms Formatting


Acceptance Block (Put in the Terms tab)

## <span style="color: #4169e1">Acceptance</span>
### I acknowledge that I have read, understand and agree to what is included in the work described above and agree to the price pursuant to the Terms and Contract conditions included below:

<table>
<tr><td>Date:_____________________________</td><td>Signature: ________________________________</td></tr>
</table>


Compact Signature Block (Put in the Terms tab)

<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;border-color:#ccc;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 2px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#ccc;color:#333;background-color:#fff;}
.tg .tg-sig-label{width:20%;font-weight:bold;text-align:center}
.tg .tg-sig{width:35%;text-align:left}
.tg .tg-date-label{width:10%;font-weight:bold;text-align:center}
.tg .tg-date{width:30%;text-align:left}
</style>
<table class="tg">
 <tr>
 <td class="tg-sig-label">Client Signature</td>
 <td class="tg-sig"></td>
 <td class="tg-date-label">Date</td>
 <td class="tg-date"></td>
 </tr>
</table>


Center Logo and Company Address at Top of Page (Put in the CSS tab)

.section-logo { width: 100%; text-align: center; }
.section-document { position: absolute; text-align: right; top: 145px; right: 0; }

.section-company { width: 100%; text-align: center; display: block; margin-bottom: 20px; }

.section-company div { color: #8AB8C6; display: inline-block; margin: 0 2px; }
.section-company .company-address1 { margin: 0 2px 0 2px; }
.section-company .company-address2 { margin: 0 2px; }
.section-company .company-city { margin: 0 2px; }
.section-company .company-state { margin: 0 2px; }
.section-company .company-zip { margin: 0 2px 0 2px; }
.company-name:after {content: " - ";}
.company-address2:after {content: " - ";}
.company-zip:after {content: " - ";}

.section-client { text-align: left; margin-bottom: 20px; }
.project-billing-city { margin: 0; }
.project-location { display: none; }


Hide client billing address (Put in the CSS tab)

.project-billing-address1 { display: none; }.project-billing-address2 { display: none; }.project-billing-city { display: none; }.project-billing-state { display: none; }.project-billing-zip { display: none; }


Hide Work Order Details (Put in the CSS tab)

.nested-line-item {display:none;}

Was this article helpful?

Can’t find what you’re looking for?

Our award-winning customer care team is here for you.

Contact Support