Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
invoice template with account summary area (showing open balances)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>RepairShopr Invoice Template 6</title>
<style type="text/css">html, body {
font-family: Arial, "Arial Unicode", "Arial Unicode MS", Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
word-wrap: break-word;
}
.print-container {
clear: both;
/*Do something here with A4*/
padding: 54px 40px 72px 40px;
z-index: 0;
}
.print-title {
font-family: Arial, "Arial Unicode", "Arial Unicode MS", Helvetica, sans-serif;
position: absolute;
top: 0;
margin-left: 0.5in;
border: solid 1px #f1f1f1;
padding: 3px 5px;
}
.clearb {
clear: both;
}
.invheader {
min-height: 230px;
position: relative;
}
.invheader-upper {
z-index: 10;
position: relative;
margin-left: 0.20in;
min-height: 90px;
}
.invheader-lower {
clear: both;
margin-top: 20px;
margin-left: 0.20in;
min-height: 100px;
}
.invheader-address-account {
float: left;
width: 300px;
margin-bottom: 20px;
}
.invheader-logo {
float: right;
}
.invheader-logo-container {
width: 250px;
height: 90px;
float: right;
}
.invheader-address-client {
float: left;
width: 300px;
padding-bottom: 20px;
}
.invheader-invoicedetails {
float: right;
width: 300px;
padding-bottom: 20px;
padding-left: 20px;
page-break-inside: avoid;
}
.invheader-invoicedetails table {
width: 100%;
}
.invbody {
clear: both;
position: relative;
overflow: auto;
}
.invheader,
.invheader th,
.invbody,
.invbody .description,
.invstub th,
.invheader-invoicedetails th,
.attachment-header th, {
font-family: Arial, "Arial Unicode", "Arial Unicode MS", Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
text-align: left;
}
.invheader-logo {
text-align: center;
font-size: 11px;
line-height: 12px;
}
.attachment-image img {
max-height: 9in;
max-width: 100%;
}
.invheader-invoicedetails table th {
width: 50%;
font-weight: normal;
white-space: nowrap;
text-align: left;
}
.invheader-invoicedetails table td,
.attachment-header td {
text-align: right;
font-family: Arial, "Arial Unicode", "Arial Unicode MS", Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
}
.invheader-invoicedetails th, .invheader-invoicedetails td {
padding: 0px 5px;
}
.invheader-invoicedetails-balance th, .invheader-invoicedetails-balance td,
.attachment-header th, .attachment-header td {
background-color: #e5e5e5;
border-top: solid 1px #c7c7c7;
border-bottom: solid 1px #c7c7c7;
padding: 0px;
font-weight: bold;
}
.attachment-header td {
font-weight: normal;
}
.attachment-header th, .attachment-header td {
vertical-align: top;
}
.invheader-invoicedetails .invheader-invoicedetails-balance th, .attachment-header th {
border-left: solid 1px #c7c7c7;
}
.invheader-invoicedetails .invheader-invoicedetails-balance td, .attachment-header td {
border-right: solid 1px #c7c7c7;
}
.invheader-invoicedetails .invheader-invoicedetails-balance th div, .attachment-header th div {
border-left: solid 1px #f1f1f1;
border-top: solid 1px #f1f1f1;
padding: 3px 5px;
}
.invheader-invoicedetails .invheader-invoicedetails-balance td div, .attachment-header td div {
border-top: solid 1px #f1f1f1;
padding: 3px 5px;
}
/*
* TABLE
*/
.invbody-items {
width: 100%;
margin-bottom: 24px;
}
.invbody-items td, .invbody-expenses td, .invbody-timeentries td {
vertical-align: top;
}
.invbody-items thead, .invbody-expenses thead, .invbody-timeentries thead {
font-weight: bold;
page-break-after: avoid;
}
.invbody-items tbody, .invbody-expenses tbody, .invbody-timeentries tbody {
page-break-before: avoid;
vertical-align: top;
}
.invbody-items td, .invbody-expenses td, .invbody-timeentries td {
padding: 3px 0px 3px 2px;
border-bottom: solid 1px #e5e5e5;
}
.invbody-items th, .invbody-expenses th, .invbody-timeentries th {
background-color: #e3e3e3;
line-height: normal;
border-top: solid 1px #c7c7c7;
border-bottom: solid 1px #c7c7c7;
vertical-align: top;
}
.invbody-items th div, .invbody-expenses th div, .invbody-timeentries th div {
padding: 5px 0;
}
.invbody-items th.first, .invbody-expenses th.first, .invbody-timeentries th.first {
border-left: solid 1px #c7c7c7;
}
.invbody-items th.last, .invbody-expenses th.last, .invbody-timeentries th.last {
border-right: solid 1px #c7c7c7;
}
/*
* ITEMS TABLE
*/
.invbody-items thead .item {
border-left: solid 1px #f1f1f1;
border-top: solid 1px #f1f1f1;
padding-left: 5px;
text-align: left;
}
.invbody-items tbody .item {
padding-left: 5px;
text-align: left;
}
.invbody-items thead .description {
border-top: solid 1px #f1f1f1;
text-align: left;
}
.invbody-items thead .unitcost {
border-top: solid 1px #f1f1f1;
text-align: right;
}
.invbody-items tbody .unitcost {
text-align: right;
}
.invbody-items thead .quantity {
border-top: solid 1px #f1f1f1;
text-align: right;
padding-right: 5px;
}
.invbody-items tbody .quantity {
text-align: right;
padding-right: 5px;
}
.invbody-items thead .linetotal {
border-top: solid 1px #f1f1f1;
text-align: right;
padding-right: 5px;
}
.invbody-items tbody .linetotal {
text-align: right;
padding-right: 5px;
}
/*
* EXPENSE TABLE
*/
.invbody-expenses thead .description {
border-left: solid 1px #f1f1f1;
border-top: solid 1px #f1f1f1;
padding-left: 5px;
text-align: left;
}
.invbody-expenses tbody .description {
padding-left: 5px;
text-align: left;
}
.invbody-expenses thead .unitcost {
border-top: solid 1px #f1f1f1;
text-align: right;
}
.invbody-expenses tbody .unitcost {
text-align: right;
}
.invbody-expenses thead .quantity {
border-top: solid 1px #f1f1f1;
text-align: right;
}
.invbody-expenses tbody .quantity {
text-align: right;
}
.invbody-expenses thead .linetotal {
border-top: solid 1px #f1f1f1;
text-align: right;
padding-right: 5px;
}
.invbody-expenses tbody .linetotal {
text-align: right;
padding-right: 5px;
}
/*
* TIME ENTRIES TABLE
*/
.invbody-timeentries thead .notes {
border-left: solid 1px #f1f1f1;
border-top: solid 1px #f1f1f1;
padding-left: 5px;
text-align: left;
}
.invbody-timeentries tbody .notes {
padding-left: 5px;
text-align: left;
}
.invbody-timeentries thead .rate {
border-top: solid 1px #f1f1f1;
text-align: right;
}
.invbody-timeentries tbody .rate {
text-align: right;
}
.invbody-timeentries thead .hours {
border-top: solid 1px #f1f1f1;
text-align: right;
}
.invbody-timeentries tbody .hours {
text-align: right;
}
.invbody-timeentries thead .linetotal {
border-top: solid 1px #f1f1f1;
text-align: right;
padding-right: 5px;
}
.invbody-timeentries tbody .linetotal {
text-align: right;
padding-right: 5px;
}
/*
* SUMMARY TABLE
*/
.invbody-summary {
page-break-before: always;
page-break-inside: avoid;
min-height: 126px;
clear: both;
width: 100%;
border-top: solid 3px #e3e3e3;
margin-bottom: 18px;
}
.invbody-summary th {
font-weight: normal;
text-align: left;
}
.invbody-summary td {
text-align: right;
}
.invbody-summary th, .invbody-summary td {
padding: 0px 5px;
}
.invbody-summary .border {
border-top: solid 1px #e5e5e5;
padding-top: 3px;
}
.invbody-summary-paid td, .invbody-summary-paid th {
padding-bottom: 3px;
}
.invbody-summary-subtotal td, .invbody-summary-subtotal th {
padding-top: 3px;
}
.invbody-summary-discount td, .invbody-summary-discount th {
padding-top: 3px;
}
.invbody-summary-total td, .invbody-summary-total th {
background-color: #e5e5e5;
border-top: solid 1px #c7c7c7;
border-bottom: solid 1px #c7c7c7;
padding: 0px;
}
.invbody-summary-total th {
border-left: solid 1px #c7c7c7;
}
.invbody-summary-total td {
border-right: solid 1px #c7c7c7;
}
.invbody-summary .invbody-summary-total th div {
border-left: solid 1px #f1f1f1;
border-top: solid 1px #f1f1f1;
padding: 3px 5px;
}
.invbody-summary .invbody-summary-total td div {
border-top: solid 1px #f1f1f1;
padding: 3px 5px;
}
</style>
</head>
<body>
<div class="print-container">
<div class="invheader">
<div class="invheader-upper">
<div class="invheader-address-account">123 All Street<br />
Nashville, TN 98101<br />
myrepairshop.com<br />
601-555-1212</div>
<div class="invheader-logo-container">{{invoice_paid_stamp}}
<div class="invheader-logo"><img src="/__logo_url__.png" style="max-height: 80px;" /></div>
</div>
</div>
<div class="invheader-lower">
<div class="invheader-address-client">{{customer_business_name_or_customer_full_name}}<br />
{{customer_address}} {{customer_address_2}}<br />
{{customer_city}}, {{customer_state}} {{customer_zip}}</div>
<div class="invheader-invoicedetails">
<table cellspacing="0">
<tbody>
<tr>
<th>Invoice #</th>
<td>{{invoice_number}}</td>
</tr>
<tr>
<th>Invoice Date</th>
<td>{{invoice_date}}</td>
</tr>
<tr class="invheader-invoicedetails-balance">
<th>
<div>Balance Due</div>
</th>
<td>
<div>{{invoice_balance_due}}</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="invbody">
<table cellspacing="0" class="invbody-items">
<thead>
<tr>
<th class="first">
<div class="item">Account Summary</div>
</th>
<th class="last">
<div class="linetotal">Amount</div>
</th>
</tr>
</thead>
<tbody>{{invoice_account_summary_lines}}
</tbody>
</table>
<div class="invbody">
<table cellspacing="0" class="invbody-items">
<thead>
<tr>
<th class="first">
<div class="item">Item</div>
</th>
<th>
<div class="description">Description</div>
</th>
<th>
<div class="unitcost">Unit Cost</div>
</th>
<th>
<div class="quantity">Quantity</div>
</th>
<th class="last">
<div class="linetotal">Line Total</div>
</th>
</tr>
</thead>
<tbody>{{invoice_line_items_table}}
</tbody>
</table>
<div class="invbody-summary">
<div class="invheader-invoicedetails">
<table cellspacing="0">
<tbody>
<tr>
<th style="width: 150px;"><strong>Subtotal</strong></th>
<td style="width: 120px;"><strong>{{invoice_subtotal}}</strong></td>
</tr>
<tr class="invbody-summary-paid">
<th style="width: 150px;">Tax</th>
<td style="width: 120px;">{{invoice_tax}}</td>
</tr>
<tr class="invbody-summary-paid">
<th style="width: 150px;">Invoice Total</th>
<td style="width: 120px;">{{invoice_total}}</td>
</tr>
<tr class="invbody-summary-paid">
<th style="width: 150px;">Payments</th>
<td style="width: 120px;">{{invoice_payments_amount}}</td>
</tr>
<tr class="invbody-summary-paid">
<th style="width: 150px;">Credits</th>
<td style="width: 120px;">{{invoice_misc_credits}}</td>
</tr>
<tr class="invbody-summary-total">
<th style="width: 150px;">
<div><strong>Balance Due</strong></div>
</th>
<td style="width: 120px;">
<div><strong>{{customer_open_balance}}</strong></div>
</td>
</tr>
</tbody>
</table>
</div>
<h2>Disclaimer</h2>
<p><span>{{invoice_disclaimer}} </span></p>
</div>
<div class="clearb" style="height: 1px; overflow: hidden;">&nbsp;</div>
</div>
<div>{{signature_line}}</div>
<div style="text-align: center; padding: 20px;"><img src="http://barcody.herokuapp.com/barcodes/{{customer_phone}}.png" /></div>
<div class="clearb">&nbsp;</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.