Template styling (header/footer)

Support
1

Hi,
question is, do we have possibility to create header & footer for printing for example contract, which needs to be printed with company logo, date, etc.
I know what in PDF generator can do this… but need help :slight_smile:

2

Hi.
Yes, we have.
Here is manual https://mpdf.github.io/
Some notes:
1. You can set page properties in styles

<style type="text/css">
	@page {
            sheet-size: A4;
            header: header;
	    footer: footer;
            margin-top: 1cm;
            margin-bottom: 1cm;
            margin-left: 1.5cm;
            margin-right: 1.5cm;
        }
</style>

2. If you wish to have another header at first page you can type additionally in styles

@page :first {
            header: header_first_page;
        }

3. Also, you can enable some html tags

	article,
	aside,
	details,
	figcaption,
	figure,
	header,
	main,
	menu,
	nav,
	section,
	summary {
	    display: block;
	}

4. Then you can add html tags in body

<htmlpageheader name="header">
	-- html code that will be enabled on top of every page --
</htmlpageheader>

If you want another header at first page add next code just after previous:

<htmlpageheader name="header_first_page">
	-- html code that will be only on top of first page --
</htmlpageheader>

Pay attention that name of htmlpageheader must be the same that are declared in styles @page{} for header:

5. Same time, you can set footer by typing

<htmlpagefooter name="footer" class="footer">
	-- html code that will be able at bot of all pages --
</htmlpagefooter>

If you wish to have footer only at last page you must do not declare footer in styles @page{} but to type this

<sethtmlpagefooter name="footer" value="on"/>
<htmlpagefooter name="footer" class="footer">
	-- html code that will be able at bot of all pages --
</htmlpagefooter>

Pay attention that name of htmlpagefooter must be the same that are declared in styles @page{} for footer: or at sethtmlpagefooter

6. For logo you can use base64 image encode, for example, https://www.base64-image.de/ and type something like this

<img src="--base64_code--" />  (<img src="data:image/png;base64ManyManyManyLetters" />)

or you can go to Config / File manager and upload image, after that click on info (the letter “i” ) and use Link for templates.

3 Likes