Theme template
In Two Accounts web user may add custom theme for several invoice like sales invoice, purchase invoice, receipts, payments etc. Using this feature users are able to create custom theme like 58/80mm paper, POS (point of sale) invoice for thermal printer etc. If you are familiar with html, javascript etc you may create yourself. To create custom theme go Settings > PDF | Themes | Extensions > Themes > New Theme . Then paste below html. Click Create button to create. You may edit or delete theme later. If you want to adjust width, height etc of the theme edit theme or create new theme as your requirement like thermal printer margin setting, regular paper margin etc. If you want to add custom field, discount, unite price etc 80 mm invoice like regular invoice please edit or adjust margin, width, height for 80mm paper since not all field will not fit in 80mm, thermal paper. If having any problem downloading pdf (Get PDF Format) using custom theme please download pdf from built in pdf option in browser or system during print. eg: Save as pdf . Please use google chrome for better experience for theme rendering if you use Two Accounts web from browser rather desktop version. Below are some examples.
Example: Sales invoice regular theme.
Preview: hover mouse on image to zoom or right click Open image in new tab to view in full resolution.
Html:
<table style="padding: 30px 60px; print-color-adjust: exact; -webkit-print-color-adjust: exact;width: -webkit-fill-available; width: -moz-available; width: -ms-available; width: -o-available;" class="w-full themeInvoice">
<thead>
<tr>
<td colspan="99">
<table style="margin-bottom: 20px" class="w-full"><tr>
{% if business.logo != null %}<td style="width: 300px"><img src="{{ business.logo }}" style="max-height: 150px; max-width: 300px; display: inline" /></td>{% endif %}
<td style="font-weight: bold; font-size: 32px; background-color: #ffffff; border-color: #d3d3d3; border-bottom-width: 5px; padding: 20px; vertical-align: bottom; color: #000; text-align: right">{{ title }}</td>
</tr></table>
<table style="margin-bottom: 20px" class="w-full"><tr>
<td>
<div style="font-weight: bold;text-decoration: underline;text-decoration-thickness: 3px;margin-bottom: 3px;">Customer Information:</div>
<div style="font-weight: bold">{{ recipient.name }}</div>
<div>{{ recipient.address | newline_to_br }}</div>
<div>{{ recipient.identifier }}</div>
</td>
<td style="padding-right: 20px; text-align: right">
{% for field in fields %}
<div style="font-weight: bold">{{ field.label }}</div>
<div style="margin-bottom: 10px">{{ field.text }}</div>
{% endfor %}
</td>
</tr></table>
<div style="font-size: 14px; font-weight: bold; margin-bottom: 20px">{{ description }}</div>
</td>
</tr>
<tr style=" background: #d3d3d3;">
{% for column in table.columns %}
<td style="writing-mode: horizontal-tb; border-inline-start-width: 1px; border-inline-start-style: solid; border-inline-start-color: #000; {% if forloop.last == true %} border-inline-end-width: 1px; border-inline-end-style: solid; border-inline-end-color: #000{% endif %}; text-align: {{ column.align }}; font-weight: bold; padding: 5px 10px; border-bottom-width: 1px; border-bottom-color: #000; border-top-width: 1px; border-top-color: #000; border-top-style: solid; border-bottom-style: solid {% if forloop.first and column.label == "#" %};width: 1px {% elsif column.nowrap %};width: 80px{% endif %}">{{ column.label }}</td>
{% endfor %}
</tr>
</thead>
<tbody>
{% for row in table.rows %}
<tr>
{% for cell in row.cells %}
<td style="writing-mode: horizontal-tb; border-inline-start-width: 1px; border-inline-start-style: solid; border-inline-start-color: #000; {% if forloop.last == true %} border-inline-end-width: 1px; border-inline-end-style: solid; border-inline-end-color: #000{% endif %}; padding: 5px 10px; text-align: {{ table.columns[forloop.index0].align }}; {% if forloop.first and table.columns[forloop.index0].label == "#" %};width: 1px {% elsif table.columns[forloop.index0].nowrap %}; white-space: nowrap; width: 80px{% endif %}">{{ cell.text | newline_to_br }}</td>
{% endfor %}
</tr>
{% endfor %}
<tr>
{% for column in table.columns %}
<td style="writing-mode: horizontal-tb; border-inline-start-width: 1px; border-inline-start-style: solid; border-inline-start-color: #000; {% if forloop.last == true %} border-inline-end-width: 1px; border-inline-end-style: solid; border-inline-end-color: #000{% endif %}; border-bottom-width: 1px; border-bottom-color: #000000; border-bottom-style: solid"> </td>
{% endfor %}
</tr>
{% for total in table.totals %}
<tr>
<td colspan="{{ table.columns | size | minus:1 }}" style="text-align: end; padding: 5px 10px{% if total.inherit_string == true %}; font-weight: bold{% endif %}">{{ total.label }}</td>
<td style="border-left-width: 1px; border-left-style: solid; border-left-color: #000; border-right-width: 1px; border-right-style: solid; border-right-color: #000; text-align: right; white-space: nowrap; border-bottom-width: 1px; border-bottom-color: #000000; border-bottom-style: solid; padding: 5px 10px{% if total.inherit_string == true %}; font-weight: bold{% endif %}">{{ total.text }}</td>
</tr>
{% endfor %}
{% for field in custom_fields %}
<tr>
<td colspan="99">
<div style="font-weight: bold; padding-top: 20px">{{ field.label }}</div>
<div>{{ field.text | newline_to_br }}</div>
</td>
</tr>
{% endfor %}
<tr>
<td colspan="99">
{% if inherit_string.text != null and inherit_string.positive %}
<div style="text-align: center; margin-top: 40px"><span style="color: #006400; border-width: 5px; border-color: #006400; border-style: solid; padding: 10px; font-size: 20px">{{ inherit_string.text | downcase }}</span></div>
{% endif %}
{% if inherit_string.text != null and inherit_string.negative %}
<div style="text-align: center; margin-top: 40px"><span style="color: #FF0000; border-width: 5px; border-color: #FF0000; border-style: solid; padding: 10px; font-size: 20px">{{ inherit_string.text | downcase }}</span></div>
{% endif %}
</td>
</tr>
</tbody>
</table>
<div id="footer" class="footer" style="background: #5783a9;" class="template-footer">
<tr><td colspan="99" style="">
<div style="border-top-width: 1px;border-color: #999999;font-size: 11px;padding: 10px 20px;color: #fff; text-align: end;text-transform: uppercase;">
<div style="font-weight: bold">{{ business.name }}</div>
<div>{{ business.address | replace: "\n", " " }}</div>
{% for field in business.custom_fields %}
<div>{{ field.label }} {{ field.text }}</div>
{% endfor %}
</div>
</td></tr>
</div>
<style type="text/css" media="print">
@page {
size: A4;
margin-top: 0.00in;
margin-bottom: 0.00in;
margin-left: 0.00in;
margin-right: 0.00in;
}
@media print {
#batchViewContent div.bg-white {
padding: 30px;
}
#batchViewContent table.themeInvoice {
width: 100%;
border-collapse: separate;
}
tfoot {
position: fixed;
bottom: 0;
width: -webkit-fill-available;
}
#footer, .template-footer {
position: fixed;
bottom: 0;
width: -webkit-fill-available;
margin-left: -30px;
}
}
</style>
Example: Sales invoice theme for thermal printer. pos (point of sale) paper, 80mm paper etc
Preview: hover mouse on image to zoom or right click Open image in new tab to view in full resolution.
Html:
<table style="background-color: #FFFFFF; width: 0px; color: #000000; text-transform:capitalize" align="left">
<thead>
<tr>
<td>
<div style="width: 250px;word-wrap: break-word;margin-bottom: 0px" align="center">
{% if business.logo != null %} <img src="{{ business.logo }}" style="height: 75px;width: 130px;"> {% endif %}
</div>
</td>
</tr>
<tr>
<td>
<div style="text-align: center; width: 250px; word-wrap: break-word; margin-top: 3px;margin-bottom: 0px">
<div style="font-size: 20px; font-weight: bold; margin: 5px 0 10px 0">{{ business.name }}</div>
<div style=" font-size: 10px; width: 250px; text-transform: uppercase;">{{ business.address | replace: "\n", " " }}</div>
<div style="font-weight: bold; font-size: 15px; padding: 5px; text-align: center; margin-bottom: -10px; color: #000000; margin-top: 0px">{{ title }}</div>
<div style="font-weight: bold;margin-top: 0px;border-bottom: dashed;border-color: #d1d1d1;border-bottom-width: 2px;padding: 7px;font-size: 12px; padding-left: 3px; text-align: left;">Customer Name: <span style="font-weight: normal;text-transform: none;">{{ recipient.name }}</span></div>
<div style="font-weight: bold;margin-top: 0px;border-bottom: dashed;border-color: #d1d1d1;border-bottom-width: 2px;padding: 7px;font-size: 12px; padding-left: 3px; text-align: left;">Description: <span style="font-weight: normal;text-transform: none;">{{ description }}</span></div>
</div>
</td>
</tr>
<tr>
<td>
<div style="text-align: right;width: 250px;word-wrap: break-word;margin-bottom:0px;margin-top: 5px;">
{% for field in fields %}
<div style="display: inline-block;margin-bottom: -10px;">
<div style="font-weight: bold; float: left; margin-right: 5px">{{ field.label }}: </div>
<div style="float:left; margin-bottom: 10px; margin-right: 5px">{{ field.text }}</div>
</div>
{% endfor %}
</div>
</td>
</tr>
<tr>
<td style="font-weight: bold;color: #000000;text-align: left;padding-left: 0px;padding-right: 0px;width: inherit;margin: 0 auto;padding-bottom: 5px;">
<div style="width: 285px;">
{% for column in table.columns %}
{% case column.label %}
{% when '#' %}
{% assign linenumber = forloop.index0 %}
<span style="display: block;word-wrap: break-word;width: 7%;float:left;border-bottom: solid;border-bottom-width: 1px;padding-left: 10px;">{{ column.label }}</span>
{% when 'Item' %}
{% assign item = forloop.index0 %}
<span style="display: block;word-wrap: break-word;width: 53%;float:left;border-bottom: solid;border-bottom-width: 1px;padding-left: 10px;">{{ column.label }}</span>
{% when 'Description' or 'Account' %}
{% assign description = forloop.index0 %}
<!-- <span style="display: block;word-wrap: break-word;width: 46%;float:left;border-bottom: solid;border-bottom-width: 1px;padding-left: 10px;">{{ column.label }}</span> -->
{% when 'Qty' %}
{% assign qty = forloop.index0 %}
<span style="display: block;word-wrap: break-word;width: 10%;float:left;border-bottom: solid;border-bottom-width: 1px;border-bottom: solid;border-bottom-width: 1px;">{{ column.label }}</span>
<span> </span>
{% when 'Total' or 'Amount' %}
{% assign amount = forloop.index0 %}<span style="display: block;word-wrap: break-word;width: min-content;float:left;border-bottom: solid;border-bottom-width: 1px;">Amount</span>
{% endcase %}
{% endfor %}
</div>
</td>
</tr>
</thead>
<tbody>
{% for row in table.rows %}
<tr>
<td style="color: #000000; text-align: left; padding-left: 10px; padding-right: 3px; width: inherit; margin: 0 auto;">
<div style="width: 285px">
{% for cell in row.cells %}
{% case forloop.index0 %}
{% when linenumber %}
<span style="display: block; word-wrap: break-word; width: 7%; float:left;font-weight: bold;">{{ cell.text }}.</span>
{% when item %}
<span style="display: block; word-wrap: break-word; width: 53%; float:left">{{ cell.text }}</span>
{% when description %}
<!-- <span style="display: block; word-wrap: break-word; width: 46%; float:left">{{ cell.text }}</span> -->
{% when qty %}
<span style="display: block; word-wrap: break-word; width: 10%; float:left">{{ cell.text }} <!-- <span style="font-size: 7px;">{% if table.columns[forloop.index].label == "Unit price" %} x {{ row.cells[forloop.index].text }}</span> {% endif %} --></span>
{% when amount %}
<span style="display: block; word-wrap: break-word; width: 30%; float:left">{{ cell.text }}</span>
{% endcase %}
{% endfor %}
</div>
</td>
</tr>
{% endfor %}
{% for total in table.totals %}
<tr>
<td style="text-align: right; font-weight: bold; font-size: 13px">
<div style="width: 260px">
<span style="display: block; float:left; width: 70%; {% if forloop.first == true %} margin-top: 10px;{% endif %} {% if forloop.last == true %}margin-bottom:10px;{% endif %}padding-right: 5px;"> {{ total.label }}:</span>
<span style="display: block;float: left;width: 30%; {% if forloop.first == true %} margin-top: 10px;{% endif %} {% if forloop.last == true %}margin-bottom:10px;{% endif %} padding-right: 17px;"> <span style="{% if forloop.first %} border-top: solid; border-top-width: 1px; padding-top: 5px; {% endif %}{% if forloop.last %} border-bottom: solid; border-bottom-width: 1px; padding-bottom: 5px; {% endif %}">{{ total.text }}</span></span>
</div>
</td>
</tr>
{% endfor %}
<tr>
<td>
{% if inherit_string.text != null and inherit_string.positive %}
<div style="padding-left: 10px;width: 280px;word-wrap: break-word;font-size: 9px;">
<div style="font-weight: bold; margin-top: 0px">Status: <span style="border-bottom: solid; border-bottom-width: 1px;">{{ inherit_string.text | capitalize }}</span></div>
</div>
{% endif %}
{% if inherit_string.text != null and inherit_string.negative %}
<div style="padding-left: 10px;width: 280px;word-wrap: break-word;font-size: 9px;">
<div style="font-weight: bold; margin-top: 0px">Status: <span style="border-bottom: solid; border-bottom-width: 1px;">{{ inherit_string.text | capitalize }}</span></div>
</div>
{% endif %}
</td>
</tr>
<tr>
<td>
<div style="padding-left: 10px;width: 280px;word-wrap: break-word;font-size: 9px;">
{% for field in custom_fields %}
<div style="font-weight: bold; margin-top: 0px">{{ field.label }}</div>
<div style="{% if forloop.length > 1 and forloop.last %}padding-bottom: 20px;{% else %} padding-bottom: 5px;{% endif %} margin-top: 0px">{{ field.text | newline_to_br }}
{{ custom_fields.size }}
</div>
{% endfor %}
</div>
</td>
</tr>
<tr>
<td>
<div style="padding-left: 4px;width: 250px;word-wrap: break-word;text-align:center;border-top: dashed;border-color: #d1d1d1;border-top-width: 2px;padding: 7px;font-size: 12px;">
<p style="text-transform: none;"><b>Thank you. Visit again.</b></p>
</div>
</td>
</tr>
</tbody>
</table>
Html: 
Html: 
Two Accounts web