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; }

Work Order Internal Notes Big and Bold

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

Override Document Type and Document Date with Line Item

Name: Invoice

Unit Price: 0.0

Description:

<style>
div.document-type, div.document-date {font-size: 0em;}
div.document-type:after {font-size: 32px;font-weight: bold;content: "Invoice";}
div.document-date:after {font-size: 14px;content: "12/31/2015";}
</style>

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 { 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 { 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 { 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 { 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 !important; text-decoration: none; font-weight: bold; margin-right: 5px; }
.line-item-description { display: inline-block !important; width:auto !important;}
.line-item-level { display: inline-block !important; }

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 {font-size: 0em;}
div.document-date:after {font-size: 14px;content: "12/31/2015";}
</style>

Discount Line Item

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

Terms Formatting

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;}