Custom Theme Templates
About Theme Templates
In Two Accounts web, you can create custom themes for various documents like sales invoices, purchase invoices, receipts, and payments etc. This powerful feature allows you to design templates for different paper sizes (58mm/80mm) and printer types (thermal, regular).
How to Create a Custom Theme
- Navigate to Settings > PDF | Themes | Extensions > Themes
- Click New Theme
- Paste your HTML template code
- Click Create to save your theme
- You can edit or delete themes later as needed
Tip: For thermal printers, adjust margins, width, and height in your theme to ensure all fields fit properly.
Not all fields may fit on 58mm/80mm paper without adjustments.
PDF Download Note: If you experience issues with the "Get PDF Format" option using custom themes,
try using your browser's built-in PDF option during printing (e.g., "Save as PDF").
For best results, use Google Chrome when working with themes in the browser version.
Preview: Click to enlarge or right-click to open image in new tab
HTML Template:
<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>
Preview: Click to enlarge or right-click to open image in new tab
HTML Template:
<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>