Customize PDF Page Numbers

Hosted • invoicing.co | v5
1

I’m trying to add page numbers to the actual outputted PDF with the following format: Invoice #xxx, Page x

I’ve added the following CSS code to my Includes tab, but it isn’t achieving the desired effect:

@page {
    margin: $global_margin;
    size: $page_size $page_layout;

    @bottom-right-corner {
      content: "Invoice #xx, Page " counter(pageNumber);
    }
}

I should note that the margin and size properties actually are respected and do get reflected in the outputted PDF, but the content I’m trying to add to the bottom right corner is not added. No permutation of this code has worked or managed to output anything in that area of the PDF for me.

The only thing that manages to produce page numbers in the outputted PDF is toggling Page Numbering to Show under Settings > Advanced Settings > Invoice Design > General Settings. But this setting only ever produces an italicized grey text that says Page x of x, and the grey font that is used is somewhat difficult to read. It also doesn’t include the invoice number that I want to place there. I unfortunately see no way that I can target this generated text since, naturally, it only appears in a PDF preview and not in HTML mode.

I’d like to ideally adjust both the content of the actual text here and also the style of this text. How can I do this?

1 Like
2

Hi,

@david can you please advise?

1 Like
3

@david we all counting to your knowledge!

We also need to styling the “Page numbers” when there is second or more pages in our cusom design.
What’s the CSS class for that ?

Screenshot 2024-07-11 173307
Screenshot 2024-07-11 173307818×317 17 KB

4

As I remember – I also wanted to change page-numbers-looks to match with DIN5008, which is a German business-letter-standard – isn’t the code for counting pages part of the design itself.

The counting happens at some other place. One can only use the page-count-settings from the gui. If the values are out of sight – so it was with me – then one has to use custom page-height-values to tell invoice-ninja to shrink the page vertically, so there’s more space at the end of each page for the page-numbering.

If you need a HTML/CSS-example, just tell me. I made a pretty nice design with some little TWIG-enhancements.

5

We do a second pass on the PDF and use a different library to implement the page numbering.

We currently support setting the alignment of the page numbers along the X axis… left / center / right, but that is all.

To support customizing the Y axis, we would need to provide the ability to set that coordinate y. (Other possible options include customizing the font size/type)

Just to note: if you did choose to change the Y axis, you may also need to consider the overall margins of your design as the page number will not be aware of anything else except its X-Y axis location.
@hillel we’d add these into the settings if you think it is worthwhile.

6

@david Just a lil’ detail-question: Will the page-numbering hover over the HTML (exspecially over body and footer, too) or will it cut it off? In the first case this option would be awesome!

7

Yes, it will overlay anything else that may be in that particular “space”

8

Great! Please consider allowing us that option. :slight_smile: (Maybe with a warning advice)