# Invoice Templates

**URL:** <https://forum.manager.io/t/invoice-templates/1747>\
**Category:** Uncategorized\
**Created:** [November 1, 2014, 4:35pm UTC](https://forum.manager.io/t/invoice-templates/1747 "2014-11-01T16:35:02Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![andrewjbrooks1988](https://avatars.discourse-cdn.com/v4/letter/a/6de8d8/32.png) [@andrewjbrooks1988](https://forum.manager.io/u/andrewjbrooks1988)\
**Post date:** [November 1, 2014, 4:35pm UTC](https://forum.manager.io/t/invoice-templates/1747/1 "2014-11-01T16:35:02Z")

</div>

Hello,

I have just started using Manager, having an issue customizing my invoices.

I have followed the instructions on how to load the example Templates by copying the HTML and CSS codes to my new them however when i view the invoice the contents are empty and instead all contents of the invoice are in the footer.

I am not very familiar with coding however if this doesnt take much to fix i can learn that!!! any idea’s?

thanks

Andrew

---

<div class="post-metadata">

**Author:** ![Parrot](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.manager.io/parrot/32/58_2.png) [@Parrot](https://forum.manager.io/u/Parrot)\
**Post date:** [November 3, 2014, 4:30pm UTC](https://forum.manager.io/t/invoice-templates/1747/2 "2014-11-03T16:30:22Z")

</div>

Lubos,

Have to say that is one of the issues holding back a lot of new users. A better selection of invoice samples is really needed. The idea you had of creating a template where all items would be included but could then be deleted (customized) is a great idea.

Any news on this?

---

<div class="post-metadata">

**Author:** ![anon75137206](https://avatars.discourse-cdn.com/v4/letter/a/47e85d/32.png) [@anon75137206](https://forum.manager.io/u/anon75137206)\
**Post date:** [November 4, 2014, 1:08am UTC](https://forum.manager.io/t/invoice-templates/1747/3 "2014-11-04T01:08:32Z")

</div>

How about getting the envato ([http://themeforest.net/](http://themeforest.net/)) community involved, there are a lot of talented people there.

---

<div class="post-metadata">

**Author:** ![andrewjbrooks1988](https://avatars.discourse-cdn.com/v4/letter/a/6de8d8/32.png) [@andrewjbrooks1988](https://forum.manager.io/u/andrewjbrooks1988)\
**Post date:** [November 4, 2014, 6:15am UTC](https://forum.manager.io/t/invoice-templates/1747/4 "2014-11-04T06:15:26Z")

</div>

I would be happy to use the above template if i can get it to work!!! a greater selection would be fantastic though.

I don’t expect any one to teach me how to code, i would however like to see an instruction set for the templates in the guides that works!

I have tried using all three templates and all of them give me the above result. has any one over come this before?

---

<div class="post-metadata">

**Author:** ![lubos](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.manager.io/lubos/32/62798_2.png) [@lubos](https://forum.manager.io/u/lubos)\
**Post date:** [November 5, 2014, 10:38am UTC](https://forum.manager.io/t/invoice-templates/1747/5 "2014-11-05T10:38:03Z")

</div>

@andrewjbrooks1988 what version of Manager are you using? I’ve tested those templates and they work for me in the latest version

@Parrot I’m going to work more on templating sometime this month. There will be support for better templating engine and new set of bootstrap templates.

---

<div class="post-metadata">

**Author:** ![andrewjbrooks1988](https://avatars.discourse-cdn.com/v4/letter/a/6de8d8/32.png) [@andrewjbrooks1988](https://forum.manager.io/u/andrewjbrooks1988)\
**Post date:** [November 5, 2014, 2:17pm UTC](https://forum.manager.io/t/invoice-templates/1747/6 "2014-11-05T14:17:55Z")

</div>

@lubos I am currently using version 14.11.7.

for some reason i get the feeling i am doing something wrong 😕

I am copying the contents of the HTML box to the HTML box in Manager and the same with the CSS code

This is what mine looks like:

However i get the invoice as printed above.

Do i need to alter any of the code?

Thanks in advance

---

<div class="post-metadata">

**Author:** ![dragan\_vukosavljevic](https://avatars.discourse-cdn.com/v4/letter/d/9fc29f/32.png) [@dragan\_vukosavljevic](https://forum.manager.io/u/dragan_vukosavljevic)\
**Post date:** [November 6, 2014, 8:47pm UTC](https://forum.manager.io/t/invoice-templates/1747/7 "2014-11-06T20:47:45Z")

</div>

Hi, this is what works for me!

First create a new template and on the left side, in the field HTML copy this:

```
<table style="width: 100%; font-size: 12px">
    <tr>
        <td width="77%" style="width: 100%">
            <img data-bind="attr: { src: SellerLogoUrl }" src="#" style="max-height: 80px;
    max-width: 300px;" />
        </td>
        <td width="23%" style="text-align: right; white-space: nowrap">
            <div data-bind="text: Seller" style="font-weight: bold"></div>
            <div data-bind="foreach: SellerContactDetails">
                <div data-bind="text: $data"></div>
          </div>
        </td>
    </tr>
</table>
<div style="height:100px"></div>
<table style="width: 100%; border: 1px solid #ccc; margin-top: 20px">
    <tr>
      <td colspan="2" bgcolor="#C4161C" style="padding: 15px; font-size: 20px; font-weight: bold; border: 1px solid #ccc; text-align:center;"><span style="color: #ffffff">Invoice</span>

        </td>
    </tr>
    <tr>
      <td width="67%" style="background-color: #eee; padding: 20px; vertical-align: top; border: 1px solid #ccc;"><div style="color: #666; font-weight: bold;"><u>Issued to:</u></div>
        <div data-bind="text: Customer" style="font-weight: bold"></div>
        <div data-bind="foreach: CustomerAddressLines">
          <div data-bind="text: $data"></div>
        </div></td>
        <td width="33%" style="background-color: #eee; padding: 0px 20px; vertical-align:middle"><div><b>Date Issued:</b> </div><div data-bind="text: IssueDate"></div><br>
<div><b>Invoice No:</b></div><div># <span data-bind="text: Number"></span>
</div><br>
<div><b>Due:</b></div><div> <span data-bind="text: DueDate"></span>
</div></td>
    </tr>
</table>
<div style="padding: 20px 0px; font-weight: bold; font-size: 18px; text-align:center"><span style="color: #999"> Summary </span></div>
<table style="width: 100%; border-top: 1px solid #ccc; border-collapse: separate; border-spacing: 0">
    <thead>
        <tr>
            <th width="45%" style="padding: 5px; color: #C4161C; border-bottom: 1px solid #ccc">Service</th>
            <th width="12%" style="padding: 5px; color: #C4161C; border-bottom: 1px solid #ccc">Quantity</th>
            <th width="12%" style="padding: 5px; color: #C4161C; border-bottom: 1px solid #ccc">Unit price</th>
            <th width="11%" style="padding: 5px; color: #C4161C; border-bottom: 1px solid #ccc">Tax</th>
            <th width="20%" style="text-align: center; width: 100px; padding: 10px; color:#C4161C; text-align: right; border-bottom: 1px solid #ccc">Total</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: LineItems">
        <tr>
            <td style="border: 1px solid #ccc; border-top: none; border-right: none; padding: 10px; vertical-align: top">
                <div data-bind="foreach: Description">
                    <div data-bind="text: $data"></div>
                </div>
            </td>
            <td style="border: 1px solid #ccc; border-top: none; border-right: none; padding: 10px; vertical-align: top"><div data-bind="text: Qty"></div></td>
            <td style="border: 1px solid #ccc; border-top: none; border-right: none; padding: 10px; vertical-align: top"><div data-bind="text: UnitPrice"></div></td>
          <td style="border: 1px solid #ccc; border-top: none; border-right: none; padding: 10px; vertical-align: top"><div data-bind="text: Tax"></div></td>
            <td data-bind="text: LineTotal" style="text-align: right; border: 1px solid #ccc; border-top: none; padding: 10px; vertical-align: top; background-color: #f9f9f9"></td>
        </tr>
    </tbody>
    <tbody>
        <tr data-bind="visible: Total != Subtotal">
            <td colspan="4" style="text-align: right; padding: 5px 10px">Subtotal</td>
            <td style="text-align: right; padding: 5px 10px; border: 1px solid #ccc; border-top: none; background-color: #f9f9f9" data-bind="text: Subtotal"></td>
        </tr>
    </tbody>
    <tbody data-bind="visible: TaxComponents.length > 0, foreach: TaxComponents">
        <tr>
            <td colspan="4" style="text-align: right; padding: 5px 10px"><span data-bind="visible: $parent.LineItemsIncludeTax">Φ.Π.Α. </span><span data-bind="text: Name"></span>

            </td>
            <td style="text-align: right; padding: 5px 10px; border: 1px solid #ccc; border-top: none; background-color: #f9f9f9" data-bind="text: Amount"></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td colspan="4" style="text-align: right; padding: 5px 10px; font-weight: bold">Total</td>
            <td style="text-align: right; font-weight: bold; padding: 5px 10px; border: 1px solid #ccc; border-top: none; background-color: #f9f9f9" data-bind="text: Total"> €</td>
        </tr>
    </tbody>
</table><div></div><div style="padding: 0px 10px; font-size: 12px; line-height: 175%" data-bind="foreach: Notes">
  <div data-bind="text: $data" style="font-weight:bold"></div>
</div>

```

There are some strange things shown on the bill as notes, but when you print it, it will be ok. I hope this will work for you as well

---

<div class="post-metadata">

**Author:** ![itmoto](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.manager.io/itmoto/32/12177_2.png) [@itmoto](https://forum.manager.io/u/itmoto)\
**Post date:** [November 7, 2014, 4:53pm UTC](https://forum.manager.io/t/invoice-templates/1747/8 "2014-11-07T16:53:03Z")

</div>

I am also having the same problem.

---

<div class="post-metadata">

**Author:** ![andrewjbrooks1988](https://avatars.discourse-cdn.com/v4/letter/a/6de8d8/32.png) [@andrewjbrooks1988](https://forum.manager.io/u/andrewjbrooks1988)\
**Post date:** [November 8, 2014, 12:53pm UTC](https://forum.manager.io/t/invoice-templates/1747/9 "2014-11-08T12:53:40Z")

</div>

nope, still no luck, copied the above code into a new theme into the HTML code section, saved, applied to invoice and no go ☹

---

<div class="post-metadata">

**Author:** ![Ealfardan](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.manager.io/ealfardan/32/63166_2.png) [@Ealfardan](https://forum.manager.io/u/Ealfardan)\
**Post date:** [January 18, 2023, 3:40pm UTC](https://forum.manager.io/t/invoice-templates/1747/10 "2023-01-18T15:40:16Z")

</div>