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