This has been discussed but i cant find it. How to stick the notes to the bottom. I use A4 paper and it is not at the bottom.
Thanks
Are you speaking about a standard sales invoice on which you want to add notes, or are you really addressing custom fields? Or are you speaking of a custom view template you are developing?
Hi Tut, At the moment about a standard sales invoice on which I want to add notes. I know some coding, not very good at it yet but I want to code my own invoices in the future.
Put your notes in the Notes field at the bottom of the entry screen. If the notes are things like terms and conditions that are standard across all or most invoices, click on the blue link to set default text. That default text will appear on future sales invoices, but not on previously existing ones. Anything in the Notes field can be edited or overwritten if desired.
2 Likes
Thanks Tut
In the html Template i did the following. Now i get large triangles on the html template and invoice. Can any person help me.
<head>
<style type="text/css">
/* layout */
#wrapper {
border-style: double;
border-color: #1F4677;
margin: auto;
margin-top: 20px;
background-color: snow;
/* background-image: url("images/line.png");
background-repeat: repeat;
background-attachment: scroll;*/
width: 960px;
height:1350px;
line-height: normal;
font-family: Ubuntu, Arial, Verdana, Helvetica, sans serif;
font-weight: normal;
text-decoration: none;
padding-left: 5px;
padding-right: 5px;
overflow: hidden;
text-align: center;
box-shadow: 8px 8px 12px #A78C8E;
border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
}
#footer {
height: 50px;
margin-top: 900px;
background: url(images/footer_bg.gif) repeat-y;
}
</style>
</head>
<body>
<div id="wrapper"><!-- #wrapper -->
<table style="width: 100%">
<thead>
<tr>
<td style="font-size: 36px; font-weight: bold; vertical-align: top; line-height: 36px; color:red;">INVOICE</td>
<td style="text-align: right">{% if business.logo != empty %}<img src="{{ business.logo }}" style="max-width: 300px; max-height: 150px">{% endif %}</td>
</tr>
<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">
<td style=" vertical-align: top; font-weight: bold; color:red;">TO</td>
</td>
<td style="vertical-align: top">
<br>
<div style=" margin-left:-500px ;color:red; font-weight: bold; white-space: nowrap;">{{ customer.name }}</div>
<div style=" margin-left:-30px ; text-align: left; white-space: nowrap;">{{ billing_address | newline_to_br }}</div>
<br>
<div style=" text-align: left; margin-left:-70px ;white-space: nowrap;">{{ customer.identifier }}</div>
</td>
<td style="vertical-align: top; width: 100px; padding-right: 20px; vertical-align: top; text-align: right">
<div style="font-weight: bold; color:red;">Issue date</div>
<div>{{ issue_date | date_to_string }}</div>
{% if due_date != null %}
<div style=" color:red;font-weight: bold; margin-top: 10px">Due date</div>
<div>{{ due_date | date_to_string }}</div>
{% endif %}
<div style=" color:red; font-weight: bold; margin-top: 10px; white-space: nowrap">Invoice number</div>
<div>{{ reference }}</div>
{% if sales_quote != empty %}
<div style=" color:red;font-weight: bold; margin-top: 10px; white-space: nowrap">Sales quote</div>
<div>{{ sales_quote }}</div>
{% endif %}
{% if purchase_order != empty %}
<div style=" color:red;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=" color:red; 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=" color:red;font-weight: bold; padding-bottom: 20px; font-size: 14px">{{ summary }}</div>
<table style="width: 100%">
<tr>
<th style=" color:red; border: 1px solid #000; padding: 5px 10px">Item</th>
<th style=" color:red; border: 1px solid #000; padding: 5px 10px">Description</th>
<th style=" color:red; width: 40px; border: 1px solid #000; padding: 5px 10px; text-align: center">Qty</th>
<th style=" color:red; width: 80px; border: 1px solid #000; padding: 5px 10px; text-align: center">Unit price</th>
<th style=" color:red; width: 60px; border: 1px solid #000; padding: 5px 10px; text-align: center">Discount</th>
<th style=" color:red; 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=" color:red; 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; color:red; 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=" color:red;text-align: right; padding: 5px 10px; font-weight: bold">Subtotal</td>
<td style=" color:red; 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=" color:red; 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=" color:red;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=" color:red; 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 id="footer">
<div style=" color:blue;>"{{ notes }}</div>
</td>
</tr>
</tbody>
</table>
</div>
</div><!-- #wrapper -->
<br><br><br>
</body>
</html>
@heldeman, your HTML has multiple markup issues. Also, HTML is “injected” directly into the program which is also coded in HTML so your template shouldn’t contain <head>, <body>, <html> tags at all.
The simplest solution for you would be to not use HTML template and simply add empty lines to your invoices which will “push” notes section to the end of the page.
Thank Lubos for the info. I also inserted height:1350px; . Inserting height you get the big triangles when using invoices. The code have been changed and now work very nice. I can now make complete new invoices. Could you sort off give a idea when for the rest we will be able to change them and let it look like Invoices…