Different Headers and Footers By Page in PDF - Salesforce

A couple weeks ago I wrote about ‘Controlling the Margins and Footers of a Visualforce PDF - Salesforce’.  In that article we could see how to get headers and footers to display in the left/center/right sections of a rendered PDF.  It ended up being some really simple Cascading Style Sheets (CSS) interacting with the Visuaforce page to get that accomplished.

But what if a requirement was added where we needed to have different headers and footers on each page?  A common example is a cover letter that should not have a header or footer, but the rest of the document should have the header or footer.  The sections below show how this can be done.

But first a shout-out…..  I learned most of what I am going to show here from a blog post by John De Santiago entitled ‘Visualforce Repeating Headers and Footers’.  I have simplified it down by not using Visualforce components and I am also using page breaks to force the different headers/footers to be used.  This page on the Salesforce Developer Forum was also key in understanding how this would all fit together.

So let’s get it done…

1) Create the CSS file.
Here is what the CSS would look like.

	margin-left: 2.54cm; 
	margin-right: 2.54cm;
	margin-top: 2.54cm; 
	margin-bottom: 2.54cm;
	@top-center {
		content: element(header);
	@bottom-left {
		content: element(footer);

div.header {
	padding: 10px;
	position: running(header);
	text-align: center;

div.footer {
	padding: 5px;
	position: running(footer);

.pagenumber:before {
	content: counter(page);

.pagecount:after {
	content: counter(pages);

Notice that there is a ‘text-align’ needed in the div.header class.  The @top-center does not seem to do the centering on its own so that ‘text-align’ is important.  As stated here on the w3.org web site the ‘element’ and ‘running’ keywords play an important role in this solution….

Many headers and footers cannot be represented only by unformatted text. A book title serving as a running head may contain an italic word, for example. A mechanism is needed to move or copy elements into margin boxes. To do this, we add the running() value to the position property, and the element() value to the content property.

position: running(custom-ident) removes the element (and associated ::before and ::after pseudo-elements) from the normal flow, and makes it available to place in a page margin box using element(). The element inherits from its original position in the document, but does not display there.

2) Build out the Visualforce Page

<apex:stylesheet value="{!$Resource[resourceFileName]}"/>

Here is the text on my cover page! Sweet!
Here is the text on my 2nd page! Nice!
Header For All But Cover Page

The key in the Visualforce page above is the div with the style=“page-break-before:always”>  in it which forces a page break.  This page break tells the browser to look for a new DIV with the desired CSS class for this page.  If there is not a new DIV with that class name, then the DIV found previously will be used.

A next step that I have not figured out yet is how to reset the page and pageCount properties at different point in the document.  In Microsoft Word this used to be done by using section breaks and then new page numbering could begin.  I am not sure if that type of page numbering functionality will be possible by using CSS and PDF rendered Visualforce Pages so if you have a solution please let me know.

Please let us know if you need help with your Marketing + Technology projects.  We at Sundog Interactive are looking forward to speaking with you about your most challenging Marketing/Technology goals.


Returning visitor? Please login or register.

Leave A Comment