Invoice Templates

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

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?

1 Like

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

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?

@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.

1 Like

@lubos I am currently using version 14.11.7.

for some reason i get the feeling i am doing something wrong :confused:

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

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

I am also having the same problem.

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