Hi guys.
I have put a screenshot of my invoice theme below. I have 6 custom fields. Everything in the invoice is perfect except I would like the lower 3 custom fields to move to the top, besides the upper 3 custom fields and also add a ‘horizontal line’ similar to the two above. So the invoice looks more filled and symmetrical. I tried a lot but I couldn’t do it myself as I am not very tech savvy. I tried a few local web developers but they too couldn’t figure it out? I don’t really know but the would simply not take up the work. If anyone on the forums can help me then I would really appreciate it.
I am putting the invoice code below.
<table style="padding: 5px">
<thead>
<tr>
<td colspan="99">
<table style="margin-bottom: 20px"><tr>
{% if business.logo != null %}<td style="text-align: left"><img src="{{ business.logo }}" style="max-height: 150px; max-width: 300px"></td>{% endif %}
<td style="padding-left: 20px; width: 250px">
<div style="text-ALIGN:LEFT;background-color:#FFFFFFF;font-weight: bold;color:#000000; font-size: 32px; white-space: nowrap;text-transform: uppercase;">{{ title }}</div>
<p style="color:#ffffff;">.</p>
<div style="text-align:LEFT;font-weight: bold">{{ business.name }}</div>
<div style="text-align:LEFT;font-weight: bold">{{ business.address | newline_to_br }}</div>
<div style="text-align:LEFT;font-weight: bold">{{ business.identifier }}</div>
</td>
<tr></tr>
<tr></tr>
<tr><td colspan="99">
<div style="border-top-width: 1px; border-color: #A9A9A9; font-size: 2px; padding:0.5px; background-color: #A9A9A9; color: #ffffff">
</div>
</td></tr>
</tr></table>
<table style="margin-bottom: 20px"><tr>
<td style="padding-left: 30px">
<div style="font-weight: bold"><p>Bill To: {{ recipient.name }}</p></div>
<div>{{ recipient.address | newline_to_br }}</div>
<div>{{ recipient.identifier }}</div>
</td>
<td style="padding-right: 30px; text-align: right">
{% for field in fields %}
{% if (field.label != 'Invoice number') %}{% continue %}{% endif %}
<div><b>{{ field.label }}:</b> {{ field.text }}</div>
{% endfor %}
{% for field in fields %}
{% if (field.label == 'Invoice number') %}{% continue %}{% endif %}
<div><b>{{ field.label }}:</b> {{ field.text }}</div>
{% endfor %}
</td>
</tr></table>
<tr><td colspan="99">
<div style="border-top-width: 1px; border-color: #A9A9A9; font-size: 2px; padding:0.5px; background-color: #A9A9A9; color: #ffffff">
</div>
</td></tr>
<tr>
<td colspan="99" style="padding: 20px; padding-top: 0px;text-align:LEFT">
{% for field in custom_fields %}
{% if (field.label =='Notes') %}{% continue %}{% endif %}
{% if field.label =='' %}{% continue %}{% endif %}
<div style="padding-top:5px;text-align:LEFT"><b>{{ field.label }}:</b>{{ field.text | newline_to_br}}</div>
{% endfor %}
{% for field in custom_fields %}
{% if field.label !='' %}{% continue %}{% endif %}
<div style="padding-top:5px;text-align:LEFT"><b>{{ field.text }}</b></div>
{% endfor %}
</td>
</tr>
<tr>
<tr>
<td><div style="font-size: 14px; font-weight: bold; margin-bottom: 20px; padding: 0px 30px">{{ description }}</div></td>
</tr>
<tr>
{% for column in table.columns %}
<td style="font-weight: bold; font-size:15px; color: #ffffff; background-color: #A9A9A9; border-color: #A9A9A9; padding: 10px; text-align: {{ column.align }}{% if forloop.first %}; padding-left: 30px{% endif %}{% if forloop.last %}; padding-right: 30px{% endif %}{% if column.nowrap %}; white-space: nowrap; width: 80px{% endif %}">{{ column.label }}</td>
{% endfor %}
</tr>
</tr></td></tr></thead>
<tbody>
{% for row in table.rows %}
<tr>
{% for cell in row.cells %}
<td style="padding: 3px; font-size:15px; text-align: {{ table.columns[forloop.index0].align }}; border-color: #F3F3F3; border-bottom-width: 1px{% if forloop.first %}; padding-left: 30px{% endif %}{% if forloop.last %}; padding-right: 30px{% endif %}{% if table.columns[forloop.index0].nowrap %}; white-space: nowrap; width:1px;{% 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; text-align: right{% if total.emphasis == true %}; font-weight: bold; font-size: 15px{% endif %}">{{ total.label }}</td>
<td style="border-bottom-width: 1px; border-color: #C2CBCE; white-space: nowrap; padding: 10px; padding-left: 30px; text-align: right; padding-right: 30px{% if total.emphasis == true %}; font-weight: bold; color: #fff; background-color: #A9A9A9; font-size: 15px{% endif %}">{{ total.text }}</td>
</tr>
{% endfor %}
<tr></tr>
<tr></tr>
<tr>
<td colspan="99" style="padding-left: 30px;">
{% for field in custom_fields %}
{% if field.label !='Notes' %}{% continue %}{% endif %}
<div><b>{{ field.label }}:</b>{{ field.text }}</div>
{% endfor %}
</td>
</tr>
<tfoot>
<tr>
<td colspan="99">
<div style="TEXT-ALIGN:RIGHT;font-size: 14px; font-weight: bold;MARGIN-TOP:105PX;padding-left:0px;">_____________________________</div>
<div style="TEXT-ALIGN:RIGHT;font-size: 14px; font-weight: bold; margin-bottom:10px;padding-RIGHT:8px;">AL BURHANI SHIPPING LLC</div>
<div>
<div style="margin-left: 30px; font-weight: bold; text-align: Left">Payment Information:</div>
<div style="margin-left: 30px; text-align: Left">All cheques and drafts to be made payable to AL BURHANI SHIPPING LLC</div>
<div style="margin-left: 30px; text-align: left">Descripancies, if any, should be notified to us in writing within 7 days from the invoice date</div>
<div style="margin-left: 30px; text-align: left">All business transactions subject to the companies terms & conditions<div></div>
<div style="text-align: left">This receipt will be invalid if it contains manual amendments not signed by authorized personnel</div>
<div> </div>
<div style="text-align: left">Prepared by: Kutbuddin</div>
<div style="text-align: left; MARGIN-BOTTOM: 30PX">E & O.E.</div>
</div>
</div></td>
</tr>
<tr><td colspan="99">
<div style="border-top-width: 3px; border-color: #A9A9A9; font-size: 11px; padding: 10px 20px; background-color: #A9A9A9; color: #ffffff">
</div>
</td></tr>
</tfoot></tbody></table>