hi lubos
how can i put the footer notes in html i tried but couldn’t work still the notes hanging in the main body and the invoice is a4
my html values
```
Prepared by :..................................................... Received by :.................................................. Signed by :.....................
FOR DIRECT DEPOSIT OR TRANSFER PLEASE FIND OUR BANKING DETAILS BELOW:
ACCOUNT NAME:KIBO CUISINE LTD.
BANK:DTB BANK LTD
ACCOUNT NUMBER:
TSHS: 0047905001
USD: 0047905002
SWIFT BIC:DTKETZTZ
BRANCH SORT CODE: 011
PLEASE WRITE CHEQUES PAYABLE ONLY TO: KIBO CUISINE LTD.
THANK YOU FOR YOUR BUSINESS
```
---
Bonita, are you asking why the notes aren’t appearing at the bottom of the page? If you’re entering these in the ‘Notes’ field of each invoice, they will appear in this part of your code:
```
{{ notes }}
```
If your payment instructions are the same on every invoice and you don’t mind customising the template, you could also just add them to the HTML, e.g:
```
FOR DIRECT DEPOSIT OR TRANSFER PLEASE FIND OUR BANKING DETAILS BELOW:
ACCOUNT NAME:KIBO CUISINE LTD.
…
```
As to how to get this div to the bottom of the page, that’s done with CSS positioning, and it’s probably a bit much to expect Lubos to teach us all CSS! Plenty of online resources for learning how to do this.
---
@Kal thanks i was able to sort it out
---
> [@Kal](#):
>
> Is it possible to group charges for disbursements separately from other chargeable items on the invoice? This is how I was doing it in other software—two separate tables on the same invoice. It’s not a biggie, but it would be nice if it were possible to split them up.
It’s definitely possible. I might need to introduce some extra variables so you can differentiate between line items of different type based on general ledger account used.
Then it’s a matter of having two tables looping through all line items while skipping those which are not appropriate.
> [@Kal](#):
>
> Are there formatting options for the date? I’d like it to appear as ‘28 July 2015’ rather than 28/7/2015. Again, no biggie but it would be nice.
This is standard feature of LiquidMarkup
Have a look at [Liquid filters](https://docs.shopify.com/themes/liquid-documentation/filters/additional-filters#date)
---
Thank you. I’ve tried using the date filter as described on that page, but I can’t get it to work. I’ve tried:
```
{{ issue_date | date: "%-d %B %Y" }}
```
I’m expecting this to give me ‘1 January 2015’, but instead I’m getting ‘-1 B Y’
Am I doing something wrong?
**Edit:** @lubos, this question got a little buried in the thread and I’m just wondering if you have a moment to look at this. Many thanks.
---
@bonita, your invoice looks great! Any chance you can share the code you used to make the footer stick to the bottom please?
I’ve been trying for about an hour with no success!
thanks
---
@bonita thanks for the response! I don’t really know what you mean though.
I’ve seen your code for your footer:
```
Prepared by :..................................................... Received by :.................................................. Signed by :.....................
FOR DIRECT DEPOSIT OR TRANSFER PLEASE FIND OUR BANKING DETAILS BELOW:
ACCOUNT NAME:KIBO CUISINE LTD.
BANK:DTB BANK LTD
ACCOUNT NUMBER:
TSHS: 0047905001
USD: 0047905002
SWIFT BIC:DTKETZTZ
BRANCH SORT CODE: 011
PLEASE WRITE CHEQUES PAYABLE ONLY TO: KIBO CUISINE LTD.
THANK YOU FOR YOUR BUSINESS
```
but when i put anything like this in my invoice template it floats under the table like your original post.
how did you make it stick to the bottom of the page like in your second image?
Thanks
---
@geek_patrol: I’ve no idea how bonita ended up doing it, but the usual way to position anything is with CSS positioning. This was the first hit when I Googled it: [CSS Layout - The position Property](http://www.w3schools.com/css/css_positioning.asp)
The way I did it on my template…
First, I defined an overall size for my page:
```
#body {
position: relative;
width: 210mm;
height: 297mm;
margin: 0;
padding: 16mm 15mm 10mm 15mm;
background-color: white;
}
```
This gives the footer something to go to the bottom of!
Then, I positioned the footer div 10 mm from the bottom of the page:
```
#invoice_footer {
position: absolute;
left: 0;
right: 0;
bottom: 10mm;
}
```
I really recommend you invest a fair bit of time (i.e. a lot more than ‘about an hour’!) reading up on HTML and CSS though before you tackle your own template modifications. There’s an awful lot to it.
As a side note, that code you copied from bonita… I hadn’t looked closely at it before now, but it’s invalid HTML. Firstly, you should never use the same ID more than once, as has been done here. There should only be one ‘footer’ ID. If you want to use the same selector more than once, you need to use CLASS, not ID. But here it looks like you’d be better served by wrapping the whole footer in the ‘footer’ ID, and separating with paragraphs or line breaks. Secondly, the text is sitting outside the empty divs, which is quite odd.
---
Morning @kal!
Many thanks for your response.
I spent all afternoon trying to get this to work. It was only after an hour of trying various online tutorials, as well as my own ingenuity, that I thought I’d ask on these forums for an answer, especially as in this post someone had solved the exact same issue I was having but hadn’t posted how they had solved it!
I know a little HTML and CSS, but the amount of time I spend using it doesn’t warrant me investing a great deal of time learning more of it, just for me to forget it because I don’t use it!. Once I’ve got my invoice laid out the way I want it, I’ll hopefully never need to change it, except to change the actual content, addresses, images etc.
The problem I’m having is that I can write some basic CSS, but I would usually put that in a CSS file that is referenced by my HTML. If I write CSS directly into my invoice template (as you’ve provided above), it just comes out as plain text on the invoice. If I reference my CSS file (eg ``) within a set of `` tags it doesn’t work. Are the `` tags included in another part of another template somewhere else? The `` tags aren’t present in the invoice template either.
If I put all the CSS in a `style` attribute within a `` tag it applies some formatting (font-family, text-align etc) but not the positioning.
All in all it’s not very intuitive and the turorials on the [Manager.io](http://Manager.io) guides don’t provide a great deal of information. On top of that, a lot of the links to guides that @lubos references don’t work any more, they just redirect to the homepage!
---
After another 2 hours spent learning CSS and experimenting, I’ve managed to position a ‘footer’ element at the bottom of the page using absolute positioning:
`
Footer Content
`
and this works fine for the first page, as long as the invoice items don’t creep into the same area on the page as my footer. If the invoice goes into a 2nd page then the ‘footer’ remains on the first page only.
I can set the ‘footer’ div as relative, but then it appears directly below the table containing my invoice items, so isn’t rely a footer, just a note. Confused!
---
Quick tip for writing your CSS - you don’t need `` tags or a reference to an external CSS file. You can however still block all your styling elements together, keeping them out of the HTML code as is good practice.
At the top of your template, before any HTML, use the `
```
As I say, you can put all your CSS within those `
```
Put that anywhere you like. It doesn’t really matter. I certainly prefer this to inline style all through my HTML.
> [@geek\_patrol](#):
>
> All in all it’s not very intuitive and the turorials on the [Manager.io](http://Manager.io) guides don’t provide a great deal of information. On top of that, a lot of the links to guides that @lubos references don’t work any more, they just redirect to the homepage!
Yes, I’ve noticed that too, and I agree, it makes it hard to find stuff. It looks like they changed the guides recently, and changed the address to: [http://guides.manager.io](http://guides.manager.io). I simply haven’t been able to find some of the pages that lubos referenced in older forum posts anymore. You can still see an older version of the guide here, but it seems to be missing stuff too: [http://www.manager.io/guides/summary](http://www.manager.io/guides/summary)
> [@geek\_patrol](#):
>
> and this works fine for the first page, as long as the invoice items don’t creep into the same area on the page as my footer. If the invoice goes into a 2nd page then the ‘footer’ remains on the first page only.
Ah, well this gets into an area I’m completely unfamiliar with: multiple-page invoices. I don’t think I’ve ever had an invoice go to more than one page, so it’s something I haven’t had to worry about.
> [@geek\_patrol](#):
>
> I can set the ‘footer’ div as relative, but then it appears directly below the table containing my invoice items, so isn’t rely a footer, just a note. Confused!
Yes, with relative positioning, the element continues to be part of the normal flow, i.e. it comes after whatever element came before it. You can move it, relative to that position, but this gets confusing quickly. If you want your footer to be positioned relative to the containing page, then I suggest you give it absolute positioning, and place it within a containing element, which is exactly what you did in your sample code. For the most predictable results, the containing element should have position set to absolute or relative.
---
[quote=“BGPS, post:78, topic:1221, full:true”]
Quick tip for writing your CSS - you don’t need `` tags or a reference to an external CSS file. You can however still block all your styling elements together, keeping them out of the HTML code as is good practice.[/quote]
Ah, you beat me to it while I was writing my comment! 🙂
---
Yep. I discovered the same thing, as you can see from my comment 6 days ago, when I experimented with global styles using the asterisk wildcard. I’m also seeing some issues in the other direction, where Manager styles seem to be conflicting with my own styles. I suggested it would be nice if the templating system was sandboxed, which Lubos said could be done with `IFRAME`, but he isn’t yet ready to deal with the issues that would create. So for now, we have to find workarounds, but thankfully they’re not too hard.
I’m guessing you were applying your font styles to the body tag. As BGPS explained, the solution is easy. You will have seen in my previous examples, I gave my wrapper `DIV` the ID ‘body’. All that’s needed then, is to change your CSS selectors from ‘`body`’ to ‘`#body`’. Done! 🙂
---
Dear sir thanks for great service, we have pre printed invoice only I want item code Discription price total customer name issue date without heading…
---
You will need to create a custom view template from scratch. If you don’t have the HTML/CSS skill to do this, you will need to hire someone to do it for you.
[Previous page](https://forum.manager.io/t/introducing-html-css-templates/1221.md?page=3)
[Next page](https://forum.manager.io/t/introducing-html-css-templates/1221.md?page=5)