Introducing HTML/CSS templates

Thanks Lubos. I’ve tried a PDF and it’s printing exactly the way it’s been seen in the preview.

Looking forward to your updates.

Thank you for this software… in the recent version 14.7.15 , the feature of custom invoice template is not seen, which was available in the earlier versions.

Could you pls look into that.

HTML themes are now available under Settings tab. You might need to enable it by clicking Customize button when in Settings. Also have a look at Guides | Manager

I checked your code and I wouldn’t use float at all. Here is why. Your HTML will be directly embedded in the layout of the program which means it’s really important to close all the HTML tags properly otherwise the layout can get easily messed up.

When creating new invoice theme, wrap everything in table tags. I know table shouldn’t be used for presentation but who cares. I’ve created two new templates, you can see how layout is done using table cells rather than CSS floating boxes:

See Custom sales invoice - JSFiddle - Code Playground and Custom sales invoice - JSFiddle - Code Playground

1 Like

I’ve been looking through your jsfiddles and I understand what you are saying.
I will try to recreate the layout from scratch using tables and divs inside the table.

Thanks for you jsfiddle.

I’ve seen that the background properties still doesn’t display, even after printing the .pdf file. I’ve tried your jsfiddle template and these doesn’t work either. Any idea why?

I’ve updated to the last version 14.7.18 and the Number variable doesn’t contain the prefix in this version.

Backgrounds print for me. When you use Email function, how does PDF output look like?

As for invoice number prefix, embed your prefix into the custom template.

Thanks Lubos…

In the email version everything looks fine.

But I have no idea why my background doesn’t print. I’ve tried anything
I’m using a MAC with OSX 10.7.5- latest version.
Has this anything to do with it, or with the MAC version ?

Lubos,

Here is the final review of my invoice template.
As mentioned before, everything looks fine when sending email, but it still doesn’t print ok when trying to print and export to .pdf on my MAC

Can you try to add following statement to CSS field on your template?

@media print
{
  body { -webkit-print-color-adjust: exact; }
}

Then try print again.

1 Like

Still doesn’t work. I don’t understand where did I go wrong.

Can you try the latest version (14.7.23)? I’ve added something which does appear to fix the problem on my Mac.

I’ve updated to 14.7.23, and same as before.
It’s keeping the layout, but only the background doesn’t want to appear.
I’ve even used one of your later templates, and still no background.
The email works fine, just the print version is lacking this

I’m sure I did something wrong…:slight_smile:

I will try to create classes for my tables and create a new css for @media print

Where is the source for editing the invoice for the desktop edition? Cause the don’t have an option on the settings.

When in Settings click Customize button to enable HTML Themes

1 Like

I don’t want to create a new template, can I now use HTML within the existing template, e.g. using Bold?

Well, the Notes field on sales invoice form supports Markdown so you can type:

This is **bold text**
2 Likes

Same for me using Custom sales invoice - JSFiddle - Code Playground
When export to pdf no backgrounf color in divs but when emailing pdf through manager all looks good.

Is there any solution about this?

@tiligadis, the main issue is that I wasn’t able to reproduce this issue myself yet. Are you also using Mac?