This page Creating Professional PDF Documents with CSS and Visualforce describes how @page and @bottom-right CSS can be used to include headers and footers in paginated PDF output. But the default styling for the footer text is a largish serifed font. So this:
@page {
@bottom-right {
content: "{!documentName} {!claimantInsuredNumbers}/{!claim.Name} - Page " counter(page) " of " counter(pages);
}
}
results in this in the output bottom right of each PDF page:
which if CSS is being used to style the page content can leave the footer presented in a mis-matching style.
Googling for @bottom-right results in a hit on this page Prince Page Headers and Footers that includes examples of setting styles. Borrowing from that on the assumption that the technique is generic, this change:
@page {
@bottom-right {
content: "{!documentName} {!claimantInsuredNumbers}/{!claim.Name} - Page " counter(page) " of " counter(pages);
font-family: sans-serif;
font-size: 80%;
}
}
results in the desired styling:
Nice post, one question: Are you putting your @ page css in the visual force page or a static resource? It does not seem to work either way for me.
Matt,
I have it in the page as follows:
<apex:page renderAs="PDF" showHeader="false" sidebar="false" standardStylesheets="false" standardController="Journal__c" extensions="CaseManagementController"> <head> <style type="text/css"> /* Other CSS */ /* Used in pagination - puts page number in corner */ @page { @bottom-right { content: "Page " counter(page) " of " counter(pages); font-family: sans-serif; font-size: 80%; } } </style> </head> <!-- Rest of page -->and I just checked and it is still working. I note that the http://wiki.developerforce.com/page/Creating_Professional_PDF_Documents_with_CSS_and_Visualforce article talks about putting the @page and @bottom-right in an external style sheet so while I would guess that would also work for other CSS attributes perhaps there is some critical aspect in exactly how I’m doing it.
Best of luck,
Keith