Layout of custom fields on Sales Invoices

Is there an easy way to better arrange custom fields on sales invoices?

I have multiple custom fields I use that are all only small in size.
I have sorted them numerically however I would like them arranged differently on the page.
Currently they are all just one after the other down the left side of the page and when there are several of them, it unnecessarily makes the invoice multiple pages.
I would like multiple fields that are related to each other played out horizontally across the page then below that the next lot of grouped fields, etc.

example:
The fields Payment Method, Date Paid, Payment Ref could be set out as 3 fields across the page.
Below those fields, he fields Date Shipped, Ship By, Shipping Service & Consignment note could be set out as 4 fields across the page.
Etc, Etc.

I don’t understand HTML so am unable to edit forms.

Any help will be greatly appreciated :slight_smile:

well the modification you need requires you to have some html knowledge. you can search the forum for custom themes that may have been posted by users which would suit your requirements.

since you say you don’t understand html i can only suggest a simple change. you can make the custom field title and its corresponding content to appear in a single line by modifying a small code.

you first need to have a theme set. Go to https://www.manager.io/themes/ and select a theme of your choice. copy the whole code that appears below the sample image and paste the same as a new theme under settings in Manager.

then you need to find the following piece of code in the theme.

{% 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 %}

Replace only the above portion of code in the theme with the below code.

{% for field in custom_fields %}
    <tr>
        <td colspan="99">
            <div style="padding: 5px"><b>{{ field.label }}</b> {{ field.text | newline_to_br }}</div>
        </td>
    </tr>
    {% endfor %} 

Remember to click Update at the bottom after making changes.

Select this theme using the Switch Theme button when viewing an invoice.

1 Like

This forum was never intended to be a software forum. There are many of those on the web. Unfortunately, the addition of custom themes to Manager, while a very welcome improvement, has led to a sharp increase in requests for programming help that are beyond the scope and purpose of the forum. A few, very simple change possibilities have been explained in the Guides. And some users have posted code of their own, which for now has been left up. Every now and then, the developer posts a coding tip. But the forum is not going to become a source of free programming support.

So here are a few suggestions and comments:

  • Use any code posted by a forum user with great caution. They are writing code without full knowledge of the underlying structure and function of the program. And their themes may be left in the dust of history by changes to the program, while themes available on https://www.manager.io/themes will work with the program and have been tested by the developer.

  • Themes are not written in HTML. They are in Liquid, a language specifically created for templating. Liquid shares many, but not all, characteristics of HTML. It looks similar, but has differences.

  • If you need help customizing a theme, the types of things you would be doing are not particularly challenging for an experienced coder. Most web designers could figure things out quickly, even if they haven’t programmed in Liquid before. You should be able to find a local freelancer to help.

1 Like

Thank you so much for your help Sharpdrivetek, I will have a look at it and see how I go :slight_smile:

Thanks Tut, I fully understand.

I wasn’t looking for advice on writting HTML, I was just thinking there may have been a way within managers options (or maybe there could be in the future) of doing it.
I can choose the order by entering numbers but it seems that they all need to go underneath each other. Just thought i’d put it out there :slight_smile: