Invoice theme/templates

CAN MANAGER.IO JUST LEAVE THE EARLIER FEATURE WHERE USERS CAN CREATE INVOICE FORMAT FROM DIFFERENT TEMPLATE.
No all of use have programmers to porgram for us. Please leave the old versionn where we simply select different style and format.
Please restore those thems we normally ust to slect different types of invoice vues

If you really need, we can still get it.
Install the old Desktop version, get the Theme Code from there and move it to the new version.

1 Like

Thanks a lot…but I am using cloud version. It’s not ideal to start paying a programmer for what used to be available in the customs theme.
Is there any reason it was removed.

The themes function has already been put into obsolete features since Aug 9, 2022 10:22 PM.

Please read:

Then, as @Mabaega already suggested, install an older desktop version available on github and copy the themes you want to the cloud edition.

BTW, using capitals is tantamount to screaming!

Notice that features such as Footers do not work with custom themes.

You can use the tag <tfoot></tfoot> to create a footer in your custom theme.

I use cloud edition and it is not there in the CLoud edition. Its ideal to make thing simple withou complication. They removed all the invoice templates on obselete features/Themes…
We should be able to have options

Sorry about the capital letters.
As a matter of fact, this is an accounting application not an application for programmers nor should it force peopel to go GIthub for anything whatsoever. Sage, tally, GNU and a host of others will not give you any coding tasks to get some features. The concept of customizing your theme or invoice is standard in all apps. I still wonder why it was removed and then ask people to go and do some coding. MAny of us do not know anything about codes.

I gave you the answer to this in previous post Invoice theme/templates - #4 by eko

I’ve also been wondering why such a feature would be removed. I personally got into manager.io recently and the Themes feature was already obsolete so I didn’t get to experience it. But reading through the reasoning behind why it was removed, I feel like it doesn’t really justify it. I understand things like footers are an option to be added separately, but what if we just want to simply add some color to some elements? Little things like this that makes me wonder why would you even think about removing themes… It will only limit the software in terms of customization. But, seems like there’s more coming so i keep my hopes high.

Themes have NOT been removed. They are only considered obsolete, so there is no support for them. But they still work; you can still write them.

You obviously did not read the whole discussions in the threads I linked to in post #4 above. For example Themes moved under "Obsolete Features" - #33 by lubos states in more depth (just part of post replicated here):

So I’m simply observing where the technology is heading, internal PDF generator which was causing me a lot of headaches has been made obsolete and the only reason why custom themes are using liquid markup is therefore no longer justified.

and

Customization of invoices will be through javascript which is easier to understand and debug than liquid markup. I mean anybody who knows how to make websites will be able to customize the look of invoices (or other documents) without knowing anything about Manager. That means there will be more talent available for businesses to choose from to implement customizations.

and

I’m not yet there. This is multi-step process to get there but once I get there, all users will naturally prefer javascript over liquid markup for their customization needs. Liquid markup is unfortunately all or nothing proposition - you have to have the entire invoice rewritten even for the tiniest customizations. Javascript allows progressive enhancement.

and

However, having said all that! The implementation of the alternative is well overdue. The announcement to make themes obsolete was made by @Lubos on Aug 9, 2022 10:22 PM and he stated in that announcement at Themes moved under "Obsolete Features" that:

But if you are not using themes at the moment, you should not start using them from now on.

It is now 16 March 2024 more than 1.5 years after @Lubos advised this and despite many users explaining that they need customization of their themes nothing happened. The post at Themes moved under "Obsolete Features" - #42 by lubos in response to @MarV on Aug 29, 2022 10:47 AM, about 20 days later said [emphasis added]:

But it has not been done, only some work on footers, and then in the knowledge that the obsolete themes would still work until whatever solution would appear left us waiting, while those that followed the advise on 9 August 2022 “…you should not start using them from now on…” are still only able to post a logo and some sort of footer to their invoices because they obeyed!

@eko I really appreciate your post, thanks for taking the time.

I read through it all now and I have a bit more understanding. I have hope that new easy customization will come soon!

But I want to talk about the default theme code we get right now, I personally am not savvy enough to be able to code but I’ve been able to at least work my way through some stuff here and there but in this case, the default code that is given to us is obviously from older versions so it breaks a lot of the functionality. So not only do we have to add the new things we want, but we have to figure out how to make the current implementations work which is too much for me. Is there a code of the current hidden theme somewhere that we can use as a starting point? It would make things much easier.

Not ever was coding of themes supported as explained in the guides FAQ - Manager Forum. You have to do it yourself first:

If your question is related to custom themes or custom reports, always post the code or report definition you have developed and the results it produces. Do not simply post a picture of something you want and ask other users to tell you how to achieve it.

If you want to use it the best way to start is:

  1. To enable custom themes in obsolete features (click on themes see screenshot)

  1. Click on new theme and enter the name of the new theme and edit (customize, see screenshot) the code so that it shows what you want. You can search the forum for many examples of users customising their themes.

It is this Liquid coding and the many discussions, issues, etc that I believe led to the Developer wanting to get rid of it as soon as no longer needed as explained by him. He prefers Javascript, others HTML5+CSS. Whatever is being implemented should/must be easier and more standard than Liquid.

I just wish we could have a look at what the current code is doing with the theme as a starting point. But it’s hidden.

Even when not obsolete the default theme always had some hard-coded entries. However, this did not prevent anyone to customize the theme to their liking (layout, colours, etc). So now not sure what you want because as also explained by @Tut the themes have NOT nee removed, they still work, you can still write them.

The code that displays (as per my screenshot) in raw form is:

<table style="padding: 30px; width: 100%">
    <thead>
        <tr>
            <td colspan="99">
                <table style="margin-bottom: 20px; width: 100%"><tr>
                    <td style="font-weight: bold; font-size: 32px; vertical-align: top">{{ title }}</td>
                    {% if business.logo != null %}<td style="text-align: end"><img src="{{ business.logo }}" style="max-height: 150px; max-width: 300px; display: inline" /></td>{% endif %}
                </tr></table>
                
                <table style="margin-bottom: 20px; width: 100%"><tr>
                    <td style="vertical-align: top">
                        <div style="font-weight: bold">{{ recipient.name }}</div>
                        <div>{{ recipient.address | newline_to_br }}</div>
                        <div>{{ recipient.identifier }}</div>
                    </td>
                    <td style="text-align: end; vertical-align: top">
                        {% for field in fields %}
                        <div style="font-weight: bold">{{ field.label }}</div>
                        <div style="margin-bottom: 10px">{{ field.text }}</div>
                        {% endfor %}
                    </td>
                    {% if business.address != null %}
                    <td style="width: 20px"></td>
                    <td style="width: 1px; border-left-width: 1px; border-left-color: #000; border-left-style: solid"></td>
                    <td style="width: 20px"></td>
                    <td style="width: 1px; white-space: nowrap; vertical-align: top">
                        <div style="font-weight: bold">{{ business.name }}</div>
                        <div>{{ business.address | newline_to_br }}</div>
                        {% for field in business.custom_fields %}
                        <div>{{ field.label }} {{ field.text }}</div>
                        {% endfor %}
                    </td>
                    {% endif %}
                </tr></table>

                <div style="font-size: 14px; font-weight: bold; margin-bottom: 20px">{{ description }}</div>
            </td>
        </tr>
        <tr>
            {% for column in table.columns %}
            <td style="writing-mode: horizontal-tb; border-inline-start-width: 1px; border-inline-start-style: solid; border-inline-start-color: #000; {% if forloop.last == true %} border-inline-end-width: 1px; border-inline-end-style: solid; border-inline-end-color: #000{% endif %}; text-align: {{ column.align }}; font-weight: bold; padding: 5px 10px; border-bottom-width: 1px; border-bottom-color: #000; border-top-width: 1px; border-top-color: #000; border-top-style: solid; border-bottom-style: solid{% 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="writing-mode: horizontal-tb; border-inline-start-width: 1px; border-inline-start-style: solid; border-inline-start-color: #000; {% if forloop.last == true %} border-inline-end-width: 1px; border-inline-end-style: solid; border-inline-end-color: #000{% endif %}; padding: 5px 10px; text-align: {{ table.columns[forloop.index0].align }}; {% if table.columns[forloop.index0].nowrap %}; white-space: nowrap; width: 80px{% endif %}">{{ cell.text | newline_to_br }}</td>
            {% endfor %}
        </tr>
        {% endfor %}
        <tr>
        {% for column in table.columns %}
            <td style="writing-mode: horizontal-tb; border-inline-start-width: 1px; border-inline-start-style: solid; border-inline-start-color: #000; {% if forloop.last == true %} border-inline-end-width: 1px; border-inline-end-style: solid; border-inline-end-color: #000{% endif %}; border-bottom-width: 1px; border-bottom-color: #000000; border-bottom-style: solid">&nbsp;</td>
        {% endfor %}
        </tr>
        {% for total in table.totals %}
        <tr>
            <td colspan="{{ table.columns | size | minus:1 }}" style="text-align: end; padding: 5px 10px{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.label }}</td>
            <td style="border-left-width: 1px; border-left-style: solid; border-left-color: #000; border-right-width: 1px; border-right-style: solid; border-right-color: #000; text-align: right; white-space: nowrap; border-bottom-width: 1px; border-bottom-color: #000000; border-bottom-style: solid; padding: 5px 10px{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.text }}</td>
        </tr>
        {% endfor %}

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

        <tr>
            <td colspan="99">
                {% if emphasis.text != null and emphasis.positive %}
                <div style="text-align: center; margin-top: 40px"><span style="color: #006400; border-width: 5px; border-color: #006400; border-style: solid; padding: 10px; font-size: 20px">{{ emphasis.text | upcase }}</span></div>
                {% endif %}

                {% if emphasis.text != null and emphasis.negative %}
                <div style="text-align: center; margin-top: 40px"><span style="color: #FF0000; border-width: 5px; border-color: #FF0000; border-style: solid; padding: 10px; font-size: 20px">{{ emphasis.text | upcase }}</span></div>
                {% endif %}
            </td>
        </tr>
    </tbody>
</table>

If you test this code as is without any mods, you will come to know that it’s missing some stuff. Which indicates that this code is for an outdated theme. I’m saying if we could get the CURRENT used theme’s code as a starting point, it would help a lot to understand what’s going on and attempt to make changes (for someone like me who doesn’t really understand coding that much)

@Footballmanager the whole custom themes principle is about the ability to alter the code to your liking. Please let us know with code example and screenshots what you try to achieve but fail to.

It is not!

Indeed, if you do not know how to code Liquid themes then you need to hire a programmer. The reason @Lubos intends to change from Liquid to Javascript, be it too much delayed, is that more people are familiar coding in Javascript.