I'm really struggling with this one - here is the page layout:
Page 1 Header 1 and footer 1
Page 2 Header 2 and footer 1
Page 3 Header 2 and footer 1
Page 4 Header 2 and footer 1
Page 5 Hide Header and hide footer 1
This is a PDF generated visualforce page in Salesforce from some choices so the page numbers are not set and I've managed to complete pages 1 to 4 but cannot hide it from 5 onwards, page code is below:
<apex:page Controller="RAMS_Controller" renderAs="pdf" applyBodyTag="false" standardStylesheets="false" applyHtmlTag="false" sidebar="false" showHeader="false">
<head>
<style type="text/css" media="print">
@page :first {
padding-top: 0;
}
@page {
padding-top: 150px;
margin-bottom: 75px;
@top-center {
content: element(header);
}
@bottom-center {
content: element(footer);
}
}
div.header {
display: block;
text-align: center;
position: running(header);
}
div.content {
}
div.footer {
display: block;
padding: 10px;
position: running(footer);
}
div.subfooter {
display: inline-block;
font-family: SansSerif;
font-size: 11pt;
}
div.right {
float: right;
}
.pagenumber:before {
content: counter(page);
}
.pagecount:before {
content: counter(pages);
}
}
</style>
</head>
<div class="footer">
footer content
<div class="subfooter right">Page <span class="pagenumber"/> of <span class="pagecount"/></div>
</div>
<!-- Page 1 -->
<div style="text-align:center;font-family: SansSerif;font-size: 11pt;page-break-after: always;">
page 1 header
Page 1 content
</div>
<!-- Page 2 -->
<div class="header" style="font-family: SansSerif;font-size: 11pt;">
Next pages header
</div>
<!-- Page 3 -->
<div class="content" style="text-align:center;page-break-after: always;font-family: SansSerif;font-size: 11pt;">
Page 3 content (shows header)
</div>
<!-- Page 4 -->
<div class="content" style="text-align:center;page-break-after: always;font-family: SansSerif;font-size: 11pt;">
Page 4 content (shows header)
</div>
<!-- Page 5 -->
<div style="text-align:center;page-break-after: always;font-family: SansSerif;font-size: 11pt;">
Page 5 content - need to hide the header from this page
</div>
</apex:page>
I've tried a number of CSS fixes in the style but can't seem to get the right syntax