HTML Template: Footer

1

Is there a way to add a footer to an template?
I tried quite a lot of things but couldn’t manage to insert a text at the very bottom of every document, so that the empty space doesn’t collapse.

If there isn’t a designated way: could you please tell me the HTML structure invoices are created within? I guess it is a table or div where the template is injected into?
As soon as I insert a div with height: 100vh into my template, it covers the entire manager.io instead only the preview area.

I truly need this feature, as almost every invoice in my country has a footer with bank details, etc. It is the only professional way to do it here.

2

Can you show HTML code for the footer? You can replace personal details in the footer for some random text.

3

I am using this code to put signature at the bottom of each Invoice. Not sure if it can help.

`

    Thanks and regards,

   Annie Wong    

`
4

Don’t use position: absolute and top: 240mm CSS attributes.

You just want to show your custom HTML at the end of invoice. If you want it to be at the end of printed page, simply add empty invoice items to make the middle section larger to push your footer further down.

This is what I recommend for now until something better is implemented.

5

Well - there is no specific HTML for the footer.
It’s just a DIV:

<div id="footer">Footer Text here</div>

Right now I have a DIV with the ID of “wrapper” around all the content of the template.

Between the total Amount (SUM) / last line and the footer is a DIV called “spacer” with a hight of 0.
I now check for the hight of #wrapper and subtract this number from the available hight of the page.
I then set the height of #spacer to this height. So the footer appears at the very bottom of the page :slight_smile:

Isn’t the nicest way but it works so far. Would be awesome to have an official way to do it.

Height of #spacer is set to: pageHight * amountOfPages - wrapperHeight

6

@Clemens Here’s what I have done. Without disturbing the HTML/CSS of Manager itself.
In your custom sales invoice template put this at the top. This will only show footer on the sales invoice printout (media type print).

<style media="print">
    #invoice-footer {
        width: 100%;
        display: block;
        position: fixed;
        bottom: 0;
    }
</style>

Then put this at the bottom of your custom invoice template.

<div id="invoice-footer">
    {% if balance_due > 0 %}
    <div>Please pay me within 14 days.</div>
    {% endif %}
    <div>All amounts on this invoice are including taxes.</div>
    <div>&nbsp;</div>
    <div>Some other text</div>
</div>

If you also want to show footer on print preview (media type screen), use this for example.
It will show up at the bottom of the preview, It will not enlarge your preview.

<style media="screen">
    #invoice-footer { 
        position: relative;
        margin-top: -5em; /* negative value of footer height */
        height: 5em;
        clear: both;
        margin-left: 30px;
        margin-right: 20px;
    }
</style>
7

Hi Hans,

Thanks a lot for your reply and sorry for my late answer.
I tried it today but it does not work for me.

I think the problem is, that when you position something absolute, it does not use the edges of the paper as a reference, but a container which grows with the content of the invoice.

So, when you position something bottom:0, it will always be at the end of the content of the invoice - but never at the end of the page (paper).

Do you have an idea about that?

8

Hi @Clemens,

First of all, I only use single page sales invoices, so no difficult page-breaks. For me that’s enough.

I have made a test custom sales invoice template with stylesheet. You only need to make sure that the default custom sales invoice template from manager is placed where it says “[PLACE DEFAULT CUSTOM TEMPLATE HERE]” and try it out.

<style media="print">
    #container { 
        margin: 0px 0px 0px 0px;
    }
    #invoice-footer {
        width: 100%;
        display: block;
        position: fixed;
        bottom: 0;
    }
</style>

<style media="screen">
    #container { 
        margin: 30px 20px 0px 30px;
    }
    #invoice-footer { 
        position: relative;
        margin-top: -5em; /* negative value of footer height */
        height: 5em;
        clear: both;
        margin-left: 30px;
        margin-right: 20px;
    }
</style>

<style type="text/css">
    #container {
        height: 100%;
        min-height: 100%;
    }
    #content { 
        overflow: auto;
        padding-bottom: 5em;
    }
</style>

<div id="container">
    <div id="content">

            [PLACE DEFAULT CUSTOM TEMPLATE HERE]

    </div> <!-- Content -->
</div> <!-- Container -->

<div id="invoice-footer">
    <div>Please please please pay me.</div>
    <div>Another line of important information.</div>
    <div>&nbsp;</div>
    <div>Last line of footer</div>
</div>

Good luck !!!

9

Hi Mark,

I tried your code above but it doesn’t seem te work for me. The footer isn’t placed at the bottom of the invoice. And when i edit the template again all of the style tags are gone… I’m using the desktop version of manager. Does that make a difference?

10

You are reading an obsolete topic about templates, which have been replaced by custom themes. Themes are written in Liquid.