In the default theme on invoices, you have 5 fields.
Invoice Date, Due Date, Invoice Number, PO Number and Quote Number. Having five fields displayed as they are on the sales invoice in the default template takes up a lot of vertical space. In addition, the company address details, Reg no and Vat No also takes up a lot of space vertically. This pushes the sales inventory items table almost half way down the page which is quite a waste of space.
I have changed my custom template to have the Business Address details, Reg No and Vat No as a one line footer. This takes up a lot less space and because most of the time end clients only need to put in supplier details on their system once - it’s information that is available but out of the way as most clients only need Invoice details and amounts.
However, this left the five fields at the top taking up the vertical space. I changed the coding so that the first three fields show on the RHS and the next two fields show to the left of it.
However, it doesn’t work so well because it only works for the Invoice form. The quote form, for example lost the Quote number and date. I am not sure if there is a way to fix this so that the changes work on all forms, but I think its something worth considering as the default coding pushes the table almost half way down the page if you have all 5 fields.
Here is the coding that I used for my custom invoice template.
<table style="padding: 10px 30px">
<thead>
<tr>
<td colspan="99">
<table style="margin-bottom: 20px"><tr>
<td style="font-weight: bold; font-size: 48px; color: #282f6b; border-bottom-width: 5px; padding-top: 20px; border-color: #B4C6E7">{{ title }}</td>
{% if business.logo != null %}<td style="width: 300px; border-color: #B4C6E7; border-bottom-width: 5px; padding-bottom: 20px"><img src="{{ business.logo }}" style="max-height: 150px; max-width: 300px" /></td>{% endif %}
</tr></table>
<table style="color: #282f6b; font-size: 14px; margin-bottom: 20px"><tr>
<td>
<div><b>{{ recipient.name }}</b> {{ recipient.code }}</div>
<div>{{ recipient.address | newline_to_br }}</div>
<div>{{ recipient.identifier }}</div>
</td>
<td style="{% if business.address != null %} {% endif %}text-align: right"></td>
<td style="text-align: right;">
{% for field in fields %}
{% if field.label == 'Quote number' %}
<div><p style="font-weight: bold; margin-bottom:0;">{{ field.label }}</p>
<p style="margin-bottom: 10px">{{ field.text }}</p></div>
{% endif %}
{% if field.label == 'Order number' %}
<div><p style="font-weight: bold; margin-bottom:0;">{{ field.label }}</p>
<p style="margin-bottom: 10px">{{ field.text }}</p></div>
{% endif %}
{% endfor %}
</td>
<td style="text-align: right;">
{% for field in fields %}
{% if field.label == 'Invoice date' %}
<div><p style="font-weight: bold; margin-bottom:0;">{{ field.label }}</p>
<p style="margin-bottom: 10px">{{ field.text }}</p></div>
{% endif %}
{% if field.label == 'Due date' %}
<div><p style="font-weight: bold; margin-bottom:0;">{{ field.label }}</p>
<p style="margin-bottom: 10px">{{ field.text }}</p></div>
{% endif %}
{% if field.label == 'Invoice number' %}
<div><p style="font-weight: bold; margin-bottom:0;">{{ field.label }}</p>
<p style="margin-bottom: 10px">{{ field.text }}</p></div>
{% endif %}
{% endfor %}{{ fields[1].label }}
</td>
</tr></table>
<div style="color: #282f6b;font-size: 16px; font-weight: bold; margin-bottom: 20px">{{ description }}</div>
</td>
</tr>
<tr>
{% for column in table.columns %}
<td style="font-weight: bolder; padding: 10px; color: #FFF; font-size: 12px; border-color: #B4C6E7; border-bottom-width: 2px; border-top-width: 2px; text-align: {{ column.align }}; background-color: #B4C6E7{% if 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="padding: 10px; background-color: #f3f3f1; border-color: #B4C6E7; border-bottom-width: 2px; text-align: {{ table.columns[forloop.index0].align }}{% if table.columns[forloop.index0].nowrap %}; white-space: nowrap; width: 80px{% endif %}{% if forloop.last == true %}; border-color: #B4C6E7; background-color: #d3d0cb; {% endif %}">{{ cell.text | newline_to_br }}</td>
{% endfor %}
</tr>
{% endfor %}
{% for total in table.totals %}
<tr>
<td colspan="{{ table.columns | size | minus:1 }}" style="padding: 10px; border-color: #FFF; border-bottom-width: 2px; background-color: #fff; color: #282f6b; text-align: right{% if total.emphasis == true %}; font-size: 16px; font-weight: bold{% endif %}">{{ total.label }}</td>
<td style="white-space: nowrap; border-color: #B4C6E7; background-color: #d3d0cb; border-bottom-width: 2px; padding: 5px 10px; text-align: right{% if total.emphasis == true %}; font-size: 16px; font-weight: bold{% endif %}">{{ total.text }}</td>
</tr>
{% endfor %}
{% for field in custom_fields %}
<tr>
<td colspan="99">
<div style="padding: 10px 10px; background-color: #f3f3f1;display: inherit;">
<p style="color: #282f6b; font-weight: bold; padding-top: 10px;">{{ field.label }}</p>
<p style="color: #282f6b">{{ field.text | newline_to_br }}</p>
</div>
</td>
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr><td colspan="99" style="padding-top: 20px">
<div style="font-size: 11px; text-align: center; color: #B4C6E7">
<div>{{ business.name }}, {{ business.address | newline_to_br | replace: "<br />", " " }} | {{ business.identifier }}</div>
</div>
</td></tr>
</tfoot>