Would like some info on how to target certain regions on template

Self-Hosted | v5
1

I’m customising an invoice template.

There’s a few things I’ve been unable to figure out.

  1. One is an “issue” of sorts. Namely, the #table-totals region overlaps the #product-table above it. See here: (I’ve applied a background-color to illustrate what’s going on)

image
image750×359 70.5 KB

  1. I’d like to know if there’s a way to target the Field labels in the #table-totals, e.g., “Subtotal”, “Total”, etc. I’d like to make these a heavier font-weight.

  2. I’d like to know if there’s a way to target that column (with the actual data in it … total, discount, subtotal, etc.) in the #table-totals grid, so I can give it a back-ground colour, and a boarder.

  3. Is there somewhere I can choose the page size format? It seems to be in Letter format (only used in North America). I’d like to have it in A4.

image

Thanks very much,

Jonathan

2

Hey there!

  • #1 First of all, can I ask, are you using a custom design or one of our officials?

  • #2/3. I’ll add support for this in upcoming updates, just added this to my task list. You’ll be able to target each element just fine :+1:

  • #4. @david isn’t default format A4?

3

Hi there,

#1 I’m customising a built in template. I’m pretty sure the template I was customising is “Clean”, although I can’t check right now. Reason: Currently (I have no idea why, as it was more-or-less working with Phantom a few hours ago, and I’ve done nothing to the system since then) I can’t generate PDF files or previews at all without a 500 error. I’ll likely have to move to a paid invoice platform over the weekend, as this is absorbing too many hours of my time. But happy to help with the current bugs / issues I’ve reported thus far.

#2 and #3 … thanks.

#4 My PDFs a for sure in letter format, as per the dimensions I posted on the screenshot.

Thanks … Jonathan

4

Okay, so I’ve confirmed it is the Clean template I was modifying.

And I figured out all PDF access died due to this bug. Not realising that would kill PDFs entirely, I hadn’t removed the custom Product Field was was causing that issue.

5

Well, if it’s a custom template just add more spacing between #totals-table and rest and you should fix the issue with overlapping?

We’re happy you solved the 500 error issue, we should have a fix for custom fields merged into develop pretty soon :+1:

6

Hey there!

I am happy to let you know that we got the first prototype of this up and running. You can see the quick implementation on the GitHub page (we will document this later in our official documentation, of course).

However, at the moment, easy way to find all selectors & get better inside of templates, we provide a setting that will let you output the HTML of the PDF into the storage/logs/laravel.log file so you can easily see all selectors.

To enable that add the following into your .env file:

LOG_PDF_HTML=true

… and don’t forget to php artisan optimize to make sure the app pickups your changes.

To learn more about awesome CSS selectors, you can check out this page:

Cheers!

7

Thanks for these updates Ben. (I’ve been away from work, so just checking in on all this now).

1 Like
8

I wonder if it’s possible to know how i can to do this on current v5.

Regards.

9

Hey there, definitely possible. Here’s a quick demo for you :+1:

1 Like
10

The video is brilliant! If it isn’t too much trouble it would be great if you could include it in the docs.

Hard to comprehend how much better this is than v4…

1 Like