+ Start a Discussion
Salesforce 283Salesforce 283 

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?
James LoghryJames Loghry
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/
Salesforce 283Salesforce 283
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> ​