Invoice PDF Formatting

Hello @cubsfan3493

That’s strange … the due date label should be in the file invoice-pdf.html by default I think.
In mine it looks like this:

<!tr class="zbs-top-right-box-line">
                            <td>
                                <label for="due">###LANGDUEDATE###</label>
                            </td>
                            <td style="text-align:right;">
                                ###DUEDATE###
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class='clear' style="clear:both"></div>
        </div>
        <!-- =============/Invoice Header =============--> 

Regarding your 2nd question (Formatting the font family and sizes) I’m also having trouble with that.
I’m trying to get rid of the Times New Roman (or similar family font) that our invoices use in some lines forcing the BODY to use these others instead:
/* Globals */
* { box-sizing: border-box; }
body {
font-family: tahoma, arial, helvetica, sans-serif !important;

… but I haven’t succeeded so far.
Anyone knows how to do it?

TIA and merry christmas !!!

Jose

Are you missing a closing bracket after the! Important line?

I have not changed any of the coding on the PDF-template.html document from the default. I just set up Jetpack CRM about 4 days ago, and I am just now getting into trying to find the culprit in the coding due to it not working properly. Anyone willing to share complete code from top to bottom of their working invoice template? Maybe I can backtrack it from there. I will take a look at my code tomorrow. Again it is completely bone stock with no adjustments, but maybe there was a recent update that broke it.

Thanks for the responses so far!

Hello, so here is my code.

<div style="width:50%; float:right; border-radius: 14px; padding-top: 1em;">
                <table style="">
                    <tbody>
                        <tr class="wh-large zbs-top-right-box-line" style="###INVIDSTYLES###">
                            <td>
                                <label for="no">###LANGINVNO###</label>
                            </td>
                            <td class="zbs-invoice-number-line" style="text-align:right;">
                                <div class="zbs-invoice-number">####INVNOSTR###</div>
                            </td>
                        </tr>
                        <tr class="zbs-top-right-box-line" style="###INVREFSTYLES###">
                            <td>
                                <label for="Reference">###LANGINVREF###</label>
                            </td>
                            <td style="text-align:right;">###REF###</td>
                        </tr>
                        <tr class="zbs-top-right-box-line">
                            <td>
                                <label for="date">###LANGINVDATE###</label>
                            </td>
                            <td style="text-align:right;">###INVDATESTR###</td>
                        </tr>
                        <tr class="zbs-top-right-box-line">
                            <td>
                                <label for="due">###LANGDUEDATE###</label>
                            </td>
                            <td style="text-align:right;">
                                ###DUEDATE###
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

I uploaded a screenshot of the invoice header where the problem lies. Any help would be greatly appreciated!

Screenshot of invoice

• This reply was modified 3 years, 2 months ago by cubsfan3493.
• This reply was modified 3 years, 2 months ago by cubsfan3493. Reason: Changed formatting on code for readability

Hi @cubsfan3493,

Thank you for providing details and attaching a screenshot–I can see the issue you are describing.

I have escalated this issue to our team. We’ll keep you posted as soon as we know more!

Thanks,

@farallon5 thanks for taking a look to my code but the closing backet was there… just further below in anbother line that I didn’t paste.
The whole block looks like this:

body {
            font-family: tahoma, arial, helvetica, sans-serif !important;
            font-weight: normal;
        }

@bluejay77 do you have any advice for me regarding how to force those font families all over our invoices?

I’ve uplaoded a screen capture of our invoices. The red boxes show fields using Times New Roman (or a similar serif font) that we want to get rid of.

Screen capture

Hi @jdelgado,

There is no easy way to achieve what you are describing since fonts are quite complicated with PDF generation, especially when using placeholders.

That said, we have an open enhancement request for allowing different font families with our PDF templates. Our developers are aware of this issue, and we’ll deploy it as soon as possible, although we don’t have an ETA. I hope that helps!

Hi @cubsfan3493 and all,

Our developers have taken a look at the issue of the invoice due date label missing, and we have logged this as a bug. We plan to deploy this as soon as possible, though please note that we don’t have a defined ETA for this at the moment.

I’m marking this topic as resolved, but if you have any further questions or need some more help, you’re welcome to reply here or open another thread!

Best,

Jay

The label could be added as a custom field.

But the CSS is covered in the style sheet in the plugin core. If you want to get rid of the styling, you have to define your stylesheet inside the template.

But be warned: I have tried to modify the invoice template without any succes. When saving the HTML all is good and fine but the PDF engine seems to mess it up. (That engine cannot even place 2 divs correctly).

Hi @teowin,

As you said, the label can be added as a custom field and visible within the Client Portal, but when generating PDF, the formatting may be messed up.

The issue with invoice formatting and templating for generated PDF is related to the open enhancement request I mentioned above, which our developers are aware of. We’ll deploy it as soon as possible, although we don’t have an ETA. I hope that helps!

Hi @cubsfan3493 and all,

We’re reaching out to let you know the latest JP CRM release (v. 4.11.0) includes a fix on the missing due date label in the invoice PDF.

This fix also allows invoice custom fields in CRM settings > Invoicing. You can now add invoice custom fields easily here:

https://d.pr/i/24zb1g

I recommend you all to update your JP CRM core to the latest version and try out the new invoicing settings! Let us know if you still see issues.

Thanks!