Document Generator module apply styling to page numbers

0
Hi,I'm working with the Mendix Document Generator module to generate a PDF document. On the page, you have the ability to enable page numbering (see screenshot below). This adds some kind of footer to each page with a page number. The footer streches over the width of the entire page and adds a white background to it, while it only has content on the far right. All in all the styling of the footer is very plain and I want to improve this so it matches the rest of the PDF document a little more. The issue is that I have no idea what CSS classes are generated for this footer, as it's only added in the document generation and not visible when previewing the page in browser.Does anyone know which classes can be used to style this footer? So far I've tried multiple options like footer, .footer, .page-numbers, .page-number, but so far without any success. Any help would be appreciated!
asked
2 answers
1

As far as I know (otherwise I'm curious too) the page numbers are generated in the margin section of the pages. To gain some influence on the styling of these margins you can use @page at-rules. However CSS declaration properties are very limited so I'm doubting that e.g. background-color is supported.

Here you can find more information: CSS Paged Media Module Level 3

Or here: @page - CSS | MDN


Below an example of how this can be used:

@page {

margin: 25px;


@top-right {

content: counter(page) ' / ' counter(pages);

margin-top: 15px;

}


}


@page :first {


@top-left {

content: 'This is the first page';

}

}

answered
0

In my opinion, this behavior occurs because the default page numbering in the Document Generator is not rendered as part of the HTML template. It appears that the page number is added later by the PDF rendering engine during the PDF generation phase. As a result, it has no representation in the DOM, is not visible in the browser preview, and no CSS class is generated that could be targeted for styling.


High-level solution:

• Disable the default page numbering

• Create your own footer inside the Document Generator template

• Add a page number placeholder

• Style it freely using standard CSS, just like any other HTML element

answered