I needed a customized Sales invoice in order to be aligned with local legislation. And due to that, I have made some adjustments in the alternative templates. Still, I miss columns “Quantity” and “Unit Price” and I do not know how to create it. Just for you to know, I am not familiar with HTML codes. What I have created is a result of pure curiosity and trying over, and over again.
Please find below my HTML code for the invoice which needs to be improved for 2 more additional columns, which I stated below and I would appreciate your help.
<table style="width: 100%; font-size: 13px">
<tr>
<td style="width: 100%">
<img data-bind="attr: { src: SellerLogoUrl }" src="#" style="max-height: 80px;
max-width: 300px;" />
</td>
<td style="text-align: right; white-space: nowrap">
<div><b>Br. računa / Invoice No:</b>
</div>
<div># <span data-bind="text: Number"></span>
</div>
</td>
<td style="text-align: right; white-space: nowrap; padding-left: 50px">
<div><b>Datum izdavanja računa i pružanja usluge / Date Issued:</b>
</div>
<div data-bind="text: IssueDate"></div>
</td>
</tr>
</table>
<table style="width: 100%; border: 1px solid #ccc; margin-top: 20px">
<tr>
<td colspan="2" style="padding: 40px; font-size: 24px; font-weight: bold">Račun / <span style="color: #C70052">Invoice</span>
</td>
<td></td>
</tr>
<tr>
<td style="background-color: #eee; padding: 20px; vertical-align: top">
<div style="color: #666; font-weight: bold">Račun izdaje / Issued by:</div>
<div data-bind="text: Seller" style="font-weight: bold"></div>
<div data-bind="foreach: SellerContactDetails">
<div data-bind="text: $data"></div>
</div>
</td>
<td style="background-color: #eee; padding: 20px; vertical-align: top">
<div style="color: #666; font-weight: bold">Račun za / Issued to:</div>
<div data-bind="text: Customer" style="font-weight: bold"></div>
<div data-bind="foreach: CustomerAddressLines">
<div data-bind="text: $data"></div>
</div>
</td>
<td style="background-color: #eee; padding: 0px 20px; vertical-align: top">
<div style="margin-top: -40px">
<div style="padding: 10px 20px; background-color: #950029; color: #fff; font-weight: bold; font-size: 14px; line-height: 20px">Za plaćanje / Total:</div>
<div style="padding: 20px; background-color: #C30036; color: #fff">
<div style="font-size: 20px; font-weight: bold"><span data-bind="text: Total"></span>
</div>
<div style="font-size: 10px; font-weight: bold; padding-top: 10px">Datum valute / Due:<span style="font-size: 14px; margin-left: 5px" data-bind="text: DueDate"></span>
</div>
</div>
</div>
</td>
</tr>
</table>
<div style="padding: 20px 0px; font-weight: bold; font-size: 16px"><span style="color: #999">Pregled / Summary:</span> <span data-bind="text: Summary" style="color: #C70052"></span>
</div>
<table style="width: 100%; border-top: 1px solid #ccc; border-collapse: separate; border-spacing: 0">
<thead>
<tr>
<th style="padding: 10px; color: #C70052; border-bottom: 1px solid #ccc">Opis usluge / Description</th>
<th style="text-align: center; width: 100px; padding: 10px; color: #C70052; text-align: right; border-bottom: 1px solid #ccc">Cena/Amount</th>
</tr>
</thead>
<tbody data-bind="foreach: LineItems">
<tr>
<td style="border: 1px solid #ccc; border-top: none; border-right: none; padding: 10px; vertical-align: top">
<div data-bind="foreach: Description">
<div data-bind="text: $data"></div>
</div>
</td>
<td data-bind="text: LineTotal" style="text-align: right; border: 1px solid #ccc; border-top: none; padding: 10px; vertical-align: top; background-color: #f9f9f9"></td>
</tr>
</tbody>
<tbody>
<tr data-bind="visible: Total != Subtotal">
<td style="text-align: right; padding: 5px 10px">Ukupno/Subtotal</td>
<td style="text-align: right; padding: 5px 10px; border: 1px solid #ccc; border-top: none; background-color: #f9f9f9" data-bind="text: Subtotal"></td>
</tr>
</tbody>
<tbody data-bind="visible: TaxComponents.length > 0, foreach: TaxComponents">
<tr>
<td style="text-align: right; padding: 5px 10px"><span data-bind="visible: $parent.LineItemsIncludeTax">Includes </span><span data-bind="text: Name"></span>
</td>
<td style="text-align: right; padding: 5px 10px; border: 1px solid #ccc; border-top: none; background-color: #f9f9f9" data-bind="text: Amount"></td>
</tr>
</tbody>
<tbody>
<tr>
<td style="text-align: right; padding: 5px 10px; font-weight: bold">Za plaćanje / Total:</td>
<td style="text-align: right; font-weight: bold; padding: 5px 10px; border: 1px solid #ccc; border-top: none; background-color: #f9f9f9" data-bind="text: Total"></td>
</tr>
</tbody>
</table>
<div style="padding: 0px 10px; font-size: 12px; line-height: 175%" data-bind="foreach: Notes">
<div data-bind="text: $data"></div>
</div>
lubos
October 15, 2014, 7:13am
2
I will need to create one “complete” template that has all the columns and fields. Then you can remove what you don’t need rather than trying to figure out how to add something.
I’m currently working on guides, so this will happen pretty soon.
Yes, you are right, that would be easier. I find default Sales Invoice template the most suitable for what I need, still I cannot edit it in order to make it bilingual.
Would it be possible to get HTML code for default Sales Invoice template?
lubos
October 15, 2014, 8:30am
4
If your motivation is to have invoice in your language, why not change the language in Manager? See Guides | Manager
My motivation is to have an invoice which is bilingual with all columns that I need. I don’t find this discussion as problem solving oriented one, as you are not leading me to a solution, but recommending alternatives which are not sufficient (there is only 15% translation for Serbian language finished and Serbian Cyrillic which my customers from abroad would not understand).
Thanks anyway
lubos
October 15, 2014, 11:31am
6
Well, I’m just trying to propose the simplest way to address this. It doesn’t matter that only 15% is translated. You can only translate terms that appear on invoice and then your invoice will be completely in Serbian. Much faster and easier than messing around with HTML.
I will provide new HTML template in upcoming weeks that will take advantage of all available variables. It’s up to you whether you want to translate some terms into Serbian and have it all working tomorrow or wait a few weeks for new HTML template.
I used Lubos online template to customize it and i like the results.
(the logo image is converted inline HTML markup using this method Feature request: more than one logo - #2 by gabe )
im not good at html but i hope this to help you Dragan
Hello Tiligadis,
I appreciate your help. With a little curiosity and persistence, still lacking html knowledge and skill, I managed to create and invoice the way I needed. I have created English and bilingual Serbian/English version and they both work great!
Here is the code, if someone wants to use it…
<table style="width: 100%; font-size: 12px">
<tr>
<td width="77%" style="width: 100%">
<img data-bind="attr: { src: SellerLogoUrl }" src="#" style="max-height: 80px;
max-width: 300px;" />
</td>
<td width="23%" style="text-align: right; white-space: nowrap">
<div data-bind="text: Seller" style="font-weight: bold"></div>
<div data-bind="foreach: SellerContactDetails">
<div data-bind="text: $data"></div>
</div>
</td>
</tr>
</table>
<div style="height:100px"></div>
<table style="width: 100%; border: 1px solid #ccc; margin-top: 20px">
<tr>
<td colspan="2" bgcolor="#C4161C" style="padding: 15px; font-size: 20px; font-weight: bold; border: 1px solid #ccc; text-align:center;"><span style="color: #ffffff">Invoice</span>
</td>
</tr>
<tr>
<td width="67%" style="background-color: #eee; padding: 20px; vertical-align: top; border: 1px solid #ccc;">
<div style="color: #666; font-weight: bold;"><u>Issued to:</u>
</div>
<div data-bind="text: Customer" style="font-weight: bold"></div>
<div data-bind="foreach: CustomerAddressLines">
<div data-bind="text: $data"></div>
</div>
</td>
<td width="33%" style="background-color: #eee; padding: 0px 20px; vertical-align:middle">
<div><b>Date Issued:</b>
</div>
<div data-bind="text: IssueDate"></div>
<br>
<div><b>Invoice No:</b>
</div>
<div># <span data-bind="text: Number"></span>
</div>
<br>
<div><b>Due:</b>
</div>
<div> <span data-bind="text: DueDate"></span>
</div>
</td>
</tr>
</table>
<div style="padding: 20px 0px; font-weight: bold; font-size: 18px; text-align:center"><span style="color: #999"> Summary </span>
</div>
<table style="width: 100%; border-top: 1px solid #ccc; border-collapse: separate; border-spacing: 0">
<thead>
<tr>
<th width="45%" style="padding: 5px; color: #C70052; border-bottom: 1px solid #ccc">Service</th>
<th width="12%" style="padding: 5px; color: #C70052; border-bottom: 1px solid #ccc">Quantity</th>
<th width="12%" style="padding: 5px; color: #C70052; border-bottom: 1px solid #ccc">Unit price</th>
<th width="11%" style="padding: 5px; color: #C70052; border-bottom: 1px solid #ccc">Tax</th>
<th width="20%" style="text-align: center; width: 100px; padding: 10px; color: #C70052; text-align: right; border-bottom: 1px solid #ccc">Total</th>
</tr>
</thead>
<tbody data-bind="foreach: LineItems">
<tr>
<td style="border: 1px solid #ccc; border-top: none; border-right: none; padding: 10px; vertical-align: top">
<div data-bind="foreach: Description">
<div data-bind="text: $data"></div>
</div>
</td>
<td style="border: 1px solid #ccc; border-top: none; border-right: none; padding: 10px; vertical-align: top">
<div data-bind="text: Qty"></div>
</td>
<td style="border: 1px solid #ccc; border-top: none; border-right: none; padding: 10px; vertical-align: top">
<div data-bind="text: UnitPrice"></div>
</td>
<td style="border: 1px solid #ccc; border-top: none; border-right: none; padding: 10px; vertical-align: top">
<div data-bind="text: Tax"></div>
</td>
<td data-bind="text: LineTotal" style="text-align: right; border: 1px solid #ccc; border-top: none; padding: 10px; vertical-align: top; background-color: #f9f9f9"></td>
</tr>
</tbody>
<tbody>
<tr data-bind="visible: Total != Subtotal">
<td colspan="4" style="text-align: right; padding: 5px 10px">Subtotal</td>
<td style="text-align: right; padding: 5px 10px; border: 1px solid #ccc; border-top: none; background-color: #f9f9f9" data-bind="text: Subtotal"></td>
</tr>
</tbody>
<tbody data-bind="visible: TaxComponents.length > 0, foreach: TaxComponents">
<tr>
<td colspan="4" style="text-align: right; padding: 5px 10px"><span data-bind="visible: $parent.LineItemsIncludeTax">Φ.Π.Α. </span><span data-bind="text: Name"></span>
</td>
<td style="text-align: right; padding: 5px 10px; border: 1px solid #ccc; border-top: none; background-color: #f9f9f9" data-bind="text: Amount"></td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="4" style="text-align: right; padding: 5px 10px; font-weight: bold">Total</td>
<td style="text-align: right; font-weight: bold; padding: 5px 10px; border: 1px solid #ccc; border-top: none; background-color: #f9f9f9" data-bind="text: Total">€</td>
</tr>
</tbody>
</table>
<div></div>
<div style="padding: 0px 10px; font-size: 12px; line-height: 175%" data-bind="foreach: Notes">
<div data-bind="text: $data" style="font-weight:bold"></div>
</div>
1 Like
Parrot
October 17, 2014, 5:25am
10
There was a time where themes were offered for a fee but have since disappeared ( I can’t remember seeing an explanation as to why it was discontinued. I imagine either too time consuming or not that profitable.)
I know many people have a hard time with HTML and was wondering if Lubos would consider creating a library of templates (users contributing their samples) that could be accessed on this site for those people that struggle with coding.
Would users here think that might be a good idea? Feedback Lubos?
Thanks
3 Likes
lubos
October 19, 2014, 1:23pm
11
Making custom HTML themes doesn’t scale. I will rather put on website list of companies and individuals who are offering these services.
Free samples are available at Guides | Manager
Those free samples are not very polished so that’s something I need to improve.
Sameer
February 5, 2015, 8:02am
13
Tax rate column should be compulsory on each invoice whether there is single tax rate or different tax rates for each items. When tax rate is same, tax rate column not showing on invoice. I need it to be always shown.
I hope I can help you. I did implement customized invoice template and tax column is always shown. I do have a template in English and I hope it will work for you?!
Please, let me know your email so I could send you files for customization.
Sameer
February 5, 2015, 10:02am
15
Thanks for reply.
English is OK.
My mail is samsarang2011@gmail.com
HI,
I need little help in editing HTML in the default sales invoice theme.
I tried my best to understand HTML but all i ended up learning is changing name like “To”
i want to place custom field beside customer name.
like this
Thank you
somehow i managed to change the custom field position with this code
<tr>
<td colspan="2" style="padding: 20px 0px">
<table style="width: 100%">
<tr>
<td style="vertical-align: top; font-weight: bold; width: 1px; white-space: nowrap; padding-right: 10px">
Buyer
</td>
<td style="vertical-align: top">
<div>{{ customer.name }}</div>
<div>{{ billing_address | newline_to_br }}</div>
<div>{{ customer.identifier }}</div>
</td>
<td style="vertical-align: top; width: 300px; border-left: 1px solid #000; padding-left: 20px; vertical-align: top">
<div style="vertical-align: top; font-weight: bold; width: 1px; white-space: nowrap; padding-right: 10px">
Consignee: </div>
<div> {{ custom_fields["Consignee Address"] | newline_to_br }}</div>
</td>
<td style="vertical-align: top; width: 100px; padding-right: 20px; vertical-align: top; text-align: right">
<div style="font-weight: bold">Issue date</div>
<div>{{ issue_date | date_to_string }}</div>
{% if due_date != null %}
<div style="font-weight: bold; margin-top: 10px">Due date</div>
<div>{{ due_date | date_to_string }}</div>
{% endif %}
<div style="font-weight: bold; margin-top: 10px; white-space: nowrap">Invoice number</div>
<div>{{ reference }}</div>
{% if sales_quote != empty %}
<div style="font-weight: bold; margin-top: 10px; white-space: nowrap">Sales quote</div>
<div>{{ sales_quote }}</div>
{% endif %}
{% if purchase_order != empty %}
<div style="font-weight: bold; margin-top: 10px; white-space: nowrap">Purchase order</div>
<div>{{ purchase_order }}</div>
{% endif %}
</td>
<td style="vertical-align: top; width: 100px; border-left: 1px solid #000; padding-left: 20px; vertical-align: top">
<div style="font-weight: bold; white-space: nowrap">{{ business.name }}</div>
<div style="white-space: nowrap">{{ business.contact_information | newline_to_br }}</div>
<div style="white-space: nowrap">{{ business.identifier }}</div>
</td>
</tr>
</table>
</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<div style="font-weight: bold; padding-bottom: 20px; font-size: 14px">{{ summary }}</div>
<table style="width: 100%">
<tr>
<th style="border: 1px solid #000; padding: 5px 10px">Item</th>
<th style="border: 1px solid #000; padding: 5px 10px">Description</th>
<th style="width: 40px; border: 1px solid #000; padding: 5px 10px; text-align: center">Qty</th>
<th style="width: 80px; border: 1px solid #000; padding: 5px 10px; text-align: center">Unit price</th>
<th style="width: 60px; border: 1px solid #000; padding: 5px 10px; text-align: center">Discount</th>
<th style="width: 100px; border: 1px solid #000; padding: 5px 10px; text-align: center">Amount</th>
</tr>
{% for line in lines %}
<tr>
<td style="border: 1px solid #000; padding: 5px 10px; border-bottom: none; border-top: none; vertical-align: top">{{ line.item.name }}</td>
<td style="border: 1px solid #000; padding: 5px 10px; border-bottom: none; border-top: none">{{ line.description | newline_to_br }}</td>
<td style="border: 1px solid #000; padding: 5px 10px; border-bottom: none; border-top: none; text-align: center; vertical-align: top">{{ line.qty }}</td>
<td style="border: 1px solid #000; padding: 5px 10px; border-bottom: none; border-top: none; text-align: right; vertical-align: top">{{ line.unit_price | money_without_currency }}</td>
<td style="border: 1px solid #000; padding: 5px 10px; border-bottom: none; border-top: none; text-align: center; vertical-align: top">{{ line.discount }}</td>
<td style="border: 1px solid #000; padding: 5px 10px; text-align: right; border-bottom: none; border-top: none; vertical-align: top; white-space: nowrap">{{ line.total | money_without_currency }}</td>
</tr>
{% endfor %}
<tr>
<td style="border: 1px solid #000; padding: 5px 10px; border-top: none"> </td>
<td style="border: 1px solid #000; padding: 5px 10px; border-top: none"> </td>
<td style="border: 1px solid #000; padding: 5px 10px; border-top: none"> </td>
<td style="border: 1px solid #000; padding: 5px 10px; border-top: none"> </td>
<td style="border: 1px solid #000; padding: 5px 10px; border-top: none"> </td>
<td style="border: 1px solid #000; padding: 5px 10px; border-top: none"> </td>
</tr>
{% if amounts_include_tax %}
{% if rounding != 0 %}
<tr>
<td colspan="5" style="text-align: right; padding: 5px 10px">Round off</td>
<td style="border: 1px solid #000; text-align: right; padding: 5px 10px; white-space: nowrap">{{ rounding | money }}</td>
</tr>
{% endif %}
<tr>
<td colspan="5" style="text-align: right; padding: 5px 10px; font-weight: bold">Total</td>
<td style="border: 1px solid #000; text-align: right; padding: 5px 10px; font-weight: bold; white-space: nowrap">{{ total | money }}</td>
</tr>
{% for tax_component in tax_components %}
<tr>
<td colspan="5" style="text-align: right; padding: 5px 10px">{{ tax_component.code }}</td>
<td style="border: 1px solid #000; text-align: right; padding: 5px 10px; white-space: nowrap">{{ tax_component.amount | money }}</td>
</tr>
{% endfor %}
{% else %}
{% assign tax_components_count = tax_components | size %}
{% if tax_components_count > 0 %}
<tr>
<td colspan="5" style="text-align: right; padding: 5px 10px; font-weight: bold">Subtotal</td>
<td style="border: 1px solid #000; text-align: right; padding: 5px 10px; font-weight: bold; white-space: nowrap">{{ subtotal | money }}</td>
</tr>
{% endif %}
{% for tax_component in tax_components %}
<tr>
<td colspan="5" style="text-align: right; padding: 5px 10px">{{ tax_component.code }}</td>
<td style="border: 1px solid #000; text-align: right; padding: 5px 10px; white-space: nowrap">{{ tax_component.amount | money }}</td>
</tr>
{% endfor %}
{% if rounding != 0 %}
<tr>
<td colspan="5" style="text-align: right; padding: 5px 10px">Round off</td>
<td style="border: 1px solid #000; text-align: right; padding: 5px 10px; white-space: nowrap">{{ rounding | money }}</td>
</tr>
{% endif %}
<tr>
<td colspan="5" style="text-align: right; padding: 5px 10px; font-weight: bold">Total</td>
<td style="border: 1px solid #000; text-align: right; padding: 5px 10px; font-weight: bold; white-space: nowrap">{{ total | money }}</td>
</tr>
{% endif %}
</table>
<div>{{ notes }}</div>
</td>
</tr>
</tbody>
INVOICE
{% if business.logo != empty %}
