function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
JeffreyStevensJeffreyStevens 

Visualforce Rendera PDF different footers for different pages

I have a VF page rendered as PDF, and I have always had one footer.  Now I want two different footers.

I'm not sure how to code that.

Here is the CSS that I have for one footer...
 
<style type="text/css" media="print">
	@page {  margin: .25in .25in 0in .25in;
			@top-left {content :element(header);}
			@bottom-left {content :element(footer);}
		    }						
	div.header {position: running(header); }
	div.footer {position: running(footer); }				
</style>

And my VF code is 
<div class="footer" >
    Footer text, etc.
</div>

But on my first page - I want NO footer, other pages - I wan the current footer, and on my last page - I need the margin to be 

margin: .25in .25in 1.25in .25in;

I've tried changing my CSS to be...
<style type="text/css" media="print">
	@page {  margin: .25in .25in 0in .25in;
			@top-left {content :element(header);}
			@bottom-left {content :element(footer);}
			}
	
					
	div.header {position: running(header); }
	div.footer {position: running(footer); }
	div.footerLarge {@page {margin: .25in .25in 1.25in .25in}}
</style>

And while I did get my larger footer on my last page - I ALSO got my previous (smaller) footer with it's content also. 

Any suggestions?  Thanks


 
daniel_hdaniel_h
You can use @page:first in your css to apply different css to the first page and @page:last for the last page. Try something like this:
<style type="text/css" media="print">
	@page:first {  margin: .25in .25in 0in .25in;
			@top-left {content :element(header);}
			
		    }						
	
        @page: {  margin: .25in .25in 0in .25in;
			@top-left {content :element(header);}
			@bottom-left {content :element(footer);}
		    }	

        @page:last {  margin: .25in .25in 1.25in .25in;
			@top-left {content :element(header);}
			@bottom-left {content :element(footer);}
		    }						
	div.header {position: running(header); }
	div.footer {position: running(footer); }			
</style>
JeffreyStevensJeffreyStevens
Great - Thanks!

So - how does the VF code know when it's on the last page?  Do I have to code something different for the last footer?

so I added the @page:last{ margin: .25in .25in 1.25in .25in; .... to my CSS and I have  
 
<div class="footer" style="height:30mm;width:100%;border:1px solid black;">
    [Large footer]
</div>

for my VF code - but it looks like the footer size doesn't change.

Here is a condensed set of that that is quick to paste in the a test VF page...
 
<apex:page cache="false" applyHtmlTag="false" applyBodyTag="false" showHeader="False" sidebar="false" renderas="PDF">
	<html>
		
		<head>
			<style type="text/css" media="print">
				@page { margin: .25in .25in .5in .25in;
						@top-left {content :element(header);}
						@bottom-left {content :element(footer);}
					}
				@page:last {margin .25in .25in 1.25in .25in;
								@top-left {content :element(header);}
								@bottom-left {content :element(footer);}
							}
				div.header {position: running(header); }
				div.footer {position: running(footer);}
				div.footerClear {clear:both;}
				div.footerLarge {}
			</style>
		</head>
		
		
		<body >

			<!--	COVER PAGE 	-->
			<div >
				<div style="height:9in;width:7in;border:1px solid black;">
					[Cover Page]
				</div>
			</div>
			
			
			<!-- 	Page 1	-->
			<div style="clear:both;"/>
			<div style="page-break-after:always;"/>
			
			<div id="coverPage" >
				<div style="height:8in;width:7in;border:1px solid black;">
					[Page 1]
				</div>
			</div>			
			
			<div class="footer" style="height:10mm;width:100%;border:1px solid black;">
				[Footer]
			</div>
			<div class="footerClear" />
			
	
			
			<!-- 	CLOSING PAGE  -->
			<div style="clear:both;"/>
			<div style="page-break-before:always;"/>
			<div id="closingPage" >
				<div style="height:7in;width:7in;border:1px solid black;">
					[Closing Page]
				</div>
			</div>			
			
			<!-- Footer -->
			<div class="footer" style="height:30mm;width:100%;border:1px solid black;">
				[Large footer]
			</div>
			
		</body>
	</html>
</apex:page>

What do you think?  Is it possible - it's a PDF rendering engine issue?