Can we create our own template in Book Keeper? | Customize Template | New Template | Invoice Template

Created by Book Keeper Team, Modified on Tue, 22 Jul at 11:00 AM by Book Keeper Team

If you know a little of HTML and CSS, you can customize almost everything in invoice template.

Book Keeper Windows provides 10 templates. You can choose the one you like.

and then click on Customize tab

Start writing your own CSS, you need to write that between <style> and </style>.

It will be added after Book Keeper CSS, that means you can overwrite everything.

Example-1:

Here's an example, we have selected Template1-Box and we want to make company heading even bigger.

So, in header part, we'll write

<style>
.company-heading { font-size: 22px;text-align: center;}
</style>

Plain text

Copy

Let's now check invoice, how does it look. Company detail is too big. That's what we have changed.

Example-2

Let's see another example. Let's try changing table heading color.

You need to write following code in item table part:

<style>
#itemTable th {font-size:16px;border: 1px solid #FF0000; border-radius:1px 0 0; text-align: center;font-weight:bold;background-color: green; color: white;}
</style>

Plain text

Copy

Let's save it and check our invoice.

Example-3

You want to modify the Invoice footer and display bank details in boxes and want to have 3 different signature: Prepared by, Checked by, Authorized Signatory.

You need to modify customize option and footer option.

In customization option, type the following,:

<style>
.cellborder{ border: 1px solid #000}
.footerTable {border-collapse:collapse;}
</style>

Plain text

Copy

and in Template Settings > Footer option, type the following:

<br><br>
<table border=1 cellspacing=2 width=100% class=footerTable>
<tr>
<td rowspan=4 class=cellborder>NOTE</td>
<td class=cellborder>1. All Payment should be made by NEFT/RTGS/ECS/Crossed Cheque drawn in favour pf Creative Private Limited only.
<tr><td class=cellborder>2. The Customer/Client should pay the grand total amount within the reserved time. Failure of which can levied interest @05% P.M. The interest once levied will not be waived under any circumstances.
<tr><td class=cellborder>3. The company will not be responsible/liable for payment made to any other payee.
<tr><td class=cellborder>4. All disputes are subjected to Bangalore Juridiction only.
</table>


<table border=1 cellspacing=2 width=100% class=footerTable>
<tr><td rowspan=3 class=cellborder>
BANK DETAIL<br>
(For RTGS/NEFT/ECS)
<td align=center colspan=4 >Creative Private Limited</td>
<tr><td class=cellborder>Account No<td class=cellborder>123456789<td class=cellborder>IFSC Code<td class=cellborder>PYTM0123456
<tr><td class=cellborder>Bank Name<td class=cellborder>SBI Bank<td class=cellborder>Branch<td class=cellborder>Bangalore
</table>

<br>
<br>
<table width=100%>
<tr><td width=30% align=center>Prepared By<td width=30% align=center>Checked By<td width=40% align=center>Authorized signatory</tr></table>

Plain text

Copy

That's it.

Now view the invoice.

Example-4

If you wish to add lines after each and every item,

in customization, item table part, add below code:

<style>#itemTable td { border-left: 1px solid #000; border-right: 1px solid #000; border-top: 1px solid #000; border-bottom: 1px solid #000;}</style>

Plain text

Copy

Save it and then view your invoice.

Example-4

If you want to see company logo in the centre of the invoice.

Please mention the below code in Settings > Template Settings > Customize > code for header part

Note: Above code will work only in template 1-3

Now it's up to you and your creativity, you can go on with experiments and design your own favorite templates.

If you would like to know more about CSS, here's detailed tutorial link for your reference.

https://www.w3schools.com/css/css_intro.asp