Feature Description
When customizing HTML template that is used to render PDF/HTML invoice in HostBill, you can make use of custom tags to render footer/header on every PDF page.
Headers and footers can be defined anywhere in the source of the document but we recommend adding header at the top and footer at very bottom of document structure.
PDF library used by HostBill allows use of the custom HTML elements <htmlpageheader> and <htmlpagefooter> to define PDF header and footer templates.
Once defined they should be called by setter tags <sethtmlpageheader> and <sethtmlpagefooter>.
The <htmlpageheader> tag allows you to define a PDF header template. Everything inside the <htmlpageheader> tag will be rendered in the header.
The <htmlpagefooter> tag allows you to define a PDF footer template. Everything inside the <htmlpagefooter>tag will be rendered in the footer.
The use of the <sethtmlpageheader /> or <sethtmlpagefooter /> tag will set a header/footer.
Example below will render html footer on all (both odd and even) PDF pages:
<htmlpagefooter name="footer">This will be rendered at the very bottom of every PDF page</htmlpagefooter> <sethtmlpagefooter name="footer" page="ALL"></sethtmlpagefooter>
Using htmlpagehader and htmlpagefooter in HTML version of invoice
Since HostBill uses same template to render invoice, you should add some CSS code to properly display those elements.
Simplest code to achieve that:
<style><!--
#invoice-container sethtmlpagefooter,
#invoice-container sethtmlpageheader {
display:none
}
#invoice-container htmlpagefooter,
#invoice-container htmlpageheader {
display:block;
}
--></style>
Troubleshooting
If sethtmlpagefooter/header method is working for you only on first page of your PDF invoice, try adding following CSS code to your invoice html source (where myheader and myfooter are names of your footer/header set in "htmlpageheader/footer" elements:
<style>
@page {
size: auto;
odd-header-name: html_myheader;
even-header-name: html_myheader;
odd-footer-name: html_myfooter;
even-footer-name: html_myfooter;
}
</style>