Layout change

1

Hello,

I want to change my invoice layout.

Now is the logo and my data right and the customers data left.

Here in Belgium it is customers right a,d my data left
Can somebody help my whit the changes?
I don’t now what i need to do for this

2

The process is not trivial. You will need to completely recode the sales invoice template in HTML. See the Guide at https://forum.manager.io/t/customizing-sales-invoice-using-html/5515. If you don’t know HTML, you’ll have to hire someone to do it for you.

3

Hi @bejurgen,

First: Create new custom template via Settings → View template → New template

Second: Find following code in your custom template:

    <thead>
        <tr>
            <td style="font-size: 36px; font-weight: bold; vertical-align: top; line-height: 36px">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>

Exchange the two lines starting with <td style=...> until </td>.
Then replace the "text-align: right" with "text-align: left".
This should put your logo on the left side. You can check with the preview button.

Third: A bit further you’ll find this piece

<table style="width: 100%">
    <tr>
       <td style="vertical-align: top; font-weight: bold; width: 1px; white-space: nowrap; padding-right: 10px">
         To
       </td>
       <td style="vertical-align: top">
          <div>{{ customer.name }}</div>
          <div>{{ billing_address | newline_to_br }}</div>
          <div>{{ customer.identifier }}</div>
       </td>
       <td style=...>
       </td>
       <td style=...>
       </td>
    </tr>

There are 4 TD tags here, which are comprised of opening tag and closing tag <td>...</td>.
Exchange the first 2 TD tags with the last 2. You’ve now actually changed 2 columns in a table row.

Now delete width: 100px; in the second TD tag and add it to the fourth TD tag, like this:

<td style="vertical-align: top; width: 100px;">

Do a preview and see what you’ve done. You should now be able to experiment a bit more.

4

@bejurgen, you should be aware that the HTML code that appears as an example when you create a new view template is not the same code that generates standard sales invoices. While you may successfully go through the changes @Hans suggested, that will not give you a fully functional sales invoice. For example, Overdue and Paid in Full stamps will not function, among other things.