You need to sign in to do that
Don't have an account?

Override the header Image and Page number in Visualforce PDF
Hi Guys,
I created 10 PDF pages which has header image, images and page numbers. In those, i want to display some pages override header image and page numbers. Please help me out this problem.
Here i used:
<apex:page>
<style>
@page {
margin-top: 3.0cm;
margin-left: 0cm;
margin-right: 0cm;
@top-center {
background-image: url('{!$Resource.con_header}')
width:100%;
}
}
@page{
@bottom-right {
content: "Page " counter(page) " of " counter(pages);
padding-bottom:20px;
padding-right:40px;
}
}
</style>
<div>
<apex:image url="{!URLFOR($Resource.Brochure, 'Brochure/Page4.tif')}" width="100%" height="875px"/>
<apex:image url="{!URLFOR($Resource.Brochure, 'Brochure/Page5.tif')}" width="100%" height="875px"/>
<apex:image url="{!URLFOR($Resource.Brochure, 'Brochure/Page6.tif')}" width="100%" height="875px"/>
<apex:image url="{!URLFOR($Resource.Brochure, 'Brochure/Page7.tif')}" width="100%" height="875px"/>
<apex:image url="{!URLFOR($Resource.Brochure, 'Brochure/Page8.tif')}" width="100%" height="875px"/>
<apex:image url="{!URLFOR($Resource.Brochure, 'Brochure/Page9.tif')}" width="100%" height="875px"/>
<apex:image url="{!URLFOR($Resource.Brochure, 'Brochure/Page10.tif')}" width="100%" height="875px"/>
</div>
</apex:page>
What i mentioned above, i can display header in all pages and page numbers.
Those above images i have to display without header and page numbers. How can i?
I created 10 PDF pages which has header image, images and page numbers. In those, i want to display some pages override header image and page numbers. Please help me out this problem.
Here i used:
<apex:page>
<style>
@page {
margin-top: 3.0cm;
margin-left: 0cm;
margin-right: 0cm;
@top-center {
background-image: url('{!$Resource.con_header}')
width:100%;
}
}
@page{
@bottom-right {
content: "Page " counter(page) " of " counter(pages);
padding-bottom:20px;
padding-right:40px;
}
}
</style>
<div>
<apex:image url="{!URLFOR($Resource.Brochure, 'Brochure/Page4.tif')}" width="100%" height="875px"/>
<apex:image url="{!URLFOR($Resource.Brochure, 'Brochure/Page5.tif')}" width="100%" height="875px"/>
<apex:image url="{!URLFOR($Resource.Brochure, 'Brochure/Page6.tif')}" width="100%" height="875px"/>
<apex:image url="{!URLFOR($Resource.Brochure, 'Brochure/Page7.tif')}" width="100%" height="875px"/>
<apex:image url="{!URLFOR($Resource.Brochure, 'Brochure/Page8.tif')}" width="100%" height="875px"/>
<apex:image url="{!URLFOR($Resource.Brochure, 'Brochure/Page9.tif')}" width="100%" height="875px"/>
<apex:image url="{!URLFOR($Resource.Brochure, 'Brochure/Page10.tif')}" width="100%" height="875px"/>
</div>
</apex:page>
What i mentioned above, i can display header in all pages and page numbers.
Those above images i have to display without header and page numbers. How can i?
This is more of a question of CSS page selectors I believe. Here's a document I found through a quick google search that may be of some help: http://www.princexml.com/doc/page-selectors/

Hi,
This is the perfect link. But where can i mention the "first" in my page. I have mentioned like below but its not working. Please help me out this problem.
@page {
margin-top: 3.0cm;
margin-left: 0cm;
margin-right: 0cm;
padding-bottom:20px;
@top-center{
background-image: url('{!$Resource.con_header}');
width:100%;
}
@bottom-right{
content: "Page " counter(page) " of " counter(pages);
padding-bottom:20px;
padding-right:30px;
}
@page:fourth{
@top-center{content: normal}
@bottom-right {content: normal}
}
}
<div class="fourth">
<apex:image url="{!URLFOR($Resource.Brochure, 'Brochure/Page4.tif')}" width="100%" height="875px"/>
</div>