Template Design For InvoicePlane 1.6.2

Hi, my name is Amirul and I am new to this open-source, self-hosted web app and I want to say that I am really impressed.

For the past day, I have been exploring the theme for my invoice but can’t find one that suits my needs. So, I created one myself.

Note that I am not a developer myself so it may not be as optimized.

If anyone want a theme that suits their need, feel free to ask below. Maybe this way I could contribute back to this awesome project.

2 Likes

How did you add the content in the header and footer? :thinking:
I have added pictures to it, or better say SVG's…wanted to run away from HTML code…:sweat_smile:

1 Like

Im not a dev, so maybe how I edit is wrong, but I edit the Invoiceplane.php file. I think that’s the only way right?

For the header, I use the identifier used in the original file and

to arrange it. Plus the CSS tweak.

As for the footer, It’s all static HTML since it will not change. Also arranged it with <table> since it’s the only tag working for PDF.

Idk about SVG tho.

2 Likes

Ah, interesting! :thinking:

Besides, it looks very nice, I’m even maybe a bit jealous, :wink: it does also sound a bit complicated to create such a design, but this could also be just my lack of skills when it comes to HTML, CSS and PHP.

There is also another approach to modify the custom-pdf.css file which resides in assets/core/css. This just overrides the CSS rules from the InvoicePlane.php file, or at least the related CSS files.

But the possibilities are perhaps more limited than modifying directly, but :point_up: it has the advantage to not touch the InvoicePlane.php and so it should be resistant against updates.

For the SVG thing, I believe you can’t embed SVG’s directly into PDF’s but if you convert it to a base64 string it does work. That’s the way I did it.