Create Your Own Template In Book Keeper | Customize Template

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 textCopy

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 textCopy

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 textCopy

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 textCopy

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 textCopy

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

<style>
.company-image {text-align:center;}
.company-image img{float:none;position:relative;}
</style>

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