Invoice Layout Changes – after Update

Hi @edvanture –

To make sure we understand, are you saying that the Invoice layout changed for you between Jetpack CRM v6.5.0 and Jetpack CRM v6.5.1?

I tested the invoice in v6.5.1 and from what you described, I don’t believe I am seeing the issue that you report:

Could you provide a screenshot showing the issue? Does this happen with all other plugins other than Jetpack CRM disabled?

Hello @lastsplash ,

thank you for the fast replay. No we stayed on 6.4.4 until now

At your screenshot you can see that the quantity is not middled anymore.

*Also that the total is a full line and not only the this framed total-amount.

The item is not big and the item description is not italic.

Is it possible to set the alignment, table head, item/item description layout in the invoice pdf template?
As there is no change when I do a rollback from 6.5.1 to 6.4.4. (* only this)

Hi @edvanture –

I downgraded to Jetpack CRM v6.4.4 and this is what the invoice looks like:

It doesn’t appear that the quantity was centered in the invoice template that ships with v6.4.4.

I’d suggest creating a custom template for your invoice that has the modifications you need. You should be able to do so following this guide:

https://kb.jetpackcrm.com/knowledge-base/templating-how-to-change-templates-pdfs-portal-emails/

Hello,

the funny thing is, that we already use our own template since a long time.
The layout looked perfectly until the new update to 6.5.1.
The rollback doesn′t change the layout back?
Where there general settings for the invoice pdf.-template made?

As I can not find the line where to change, the font-size, family and alignment the for:
Invoice Table Head
Invoice Item Titel
Invoice Item Description

Could you tell me in which section I can change this?

Is it also possible to change the table look for the subtotal, tax and total section, that its not the fully width?

Big thanks in advance for your support!

Hi @edvanture

We made some (small) changes to the invoice PDF generation functions (adding some class names, and removing the forced double border) in 6.5

There’s a new template in invoice settings from 6.5 called “modern” which is a better starting point in my opinion.

How does the “modern” template look for you if you choose that one? Here’s how it looks on one I just made.

Although, when uploading this – I notice the “QUANTITY” “PRICE” and “AMOUNT” should be right aligned and will get this sorted in the next release.

The part of the code which looks at the headers is here:

https://github.com/Automattic/jetpack/blob/trunk/projects/plugins/crm/includes/ZeroBSCRM.InvoiceBuilder.php#L1620

You’ll see the class names are:-

.jpcrm-invoice-lineitem-description
.jpcrm-invoice-lineitem-quantity
.jpcrm-invoice-lineitem-price
.jpcrm-invoice-lineitem-amount

So you can add them to the top of your template (the core templates are stored here)

/wp-content/plugins/zero-bs-crm/templates/invoices

• This reply was modified 1 month, 2 weeks ago by Mike Stott.

Hi @mikemayhem3030 ,

thank you for the infos. I tried to change the font size over:

.jpcrm-invoice-lineitem-description

this works, but the Invoice Item Titel, not bold written anymore and Invoice Item Description changes the same.

We are also wondering how this changes happened, because we are using a child theme and the own local .html-Template (old Version), with local fonts.

Is it secured, that the new “modern” version stays in future or do you make changes in this file to fix current problems.

For us it wouldn′t be practicable to edit/check our template after every update.

Our input and improvement for the fixed version would be:

• Table Head; description (stays left), quanitity (all middled), price and amount (right oriented)
• The grey background (table) for subtotal and total, should be as long as needed
• if its possible integrate a page transfer / page number if there a two pages or more

Cheers,

edvanture

Hi @edvanture

We are also wondering how this changes happened, because we are using a child theme and the own local .html-Template (old Version), with local fonts

The current invoice generator put some hard-coded HTML into the template meaning creating new templates had styles fixed. If you look at the template, you’ll see parts like this ##INVOICE-TABLE-HEADERS## and further down the totals.

The code that was generated to fill these parts had, for example, the double lined border around the invoice total hard coded (you can see it here).

So new templates would always have the double lines in and made it harder to remove, or restyle them.

It also was missing class names and IDs in parts (see here), so new templates couldn’t target certain elements via CSS.

Is it secured, that the new “modern” version stays in future or do you make changes in this file to fix current problems. For us it wouldn′t be practicable to edit/check our template after every update.

I don’t forsee any more changes like this in the templates in future.

If anything we’ll make them even easier to customise in future and perhaps have them editable via Gutenberg templates (i.e. fewer ##VARIABLE## areas where you can’t change what’s happening unless you modify the plugin code, which would be lost in future updates).

Hi @mikemayhem3030 , @lastsplash ,

we′ve managed it now that the new modern template works again for us.

We are looking forward for the fix with the alignement of the table headers.

Just wondering if you know, how its possible to implement a blocked footer on each page for .pdf?

We already have one implemented but its only shown on the last page. In the head it′s like this:

footer {
    position: fixed;
    bottom: 0.1cm; 
    left: 1.0cm; 
    right: 1.0cm;
    font-size: 7pt;
    }

But for example the table and totals touches this footer, if there is no next page because the content is just to long and slips in the footer, but not generates a new page.

Thanks for this good support !

Hi @edvanture

Just wondering if you know, how its possible to implement a blocked footer on each page for .pdf?

Adding a footer to each page isn’t possible I’m afraid – the PDF is just wrapping the contents of the invoice into one large “page” with a footer. The fact the PDF breaks over pages doesn’t support having a footer at the bottom of each page.

Hi there, @edvanture,

I’m going to mark this thread as solved. If you have any further questions or need more help, you’re welcome to open another thread here. Cheers!