Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
moinuddin saifimoinuddin saifi 

Display different header and footer in PDF pages using VF

<style type="text/css" media="print">
  @page {
    @top-center {
      content: element(header);
    }
    @bottom-left {
      content: element(footer);
    }  
  }
  div.header {
    padding: 10px;
    position: running(header);
  }
  div.footer {
    display: block;
    padding: -50px;
    position: running(footer);
  }
  .pagenumber:before {
    content: counter(page);
  }
 .pagecount:before {
    content: counter(pages);
  }
</style>
Best Answer chosen by moinuddin saifi
moinuddin saifimoinuddin saifi
make this,
<div class="footer">
<p>Some content write here</p>
</div>
<div class="footer">
<p>write different content</p>
</div>
and see result, this code make two different footer in pdf

All Answers

Saam AbbasSaam Abbas
Yes it is possible, you can use different footer on VF pages, see the below url:
http://www.sundoginteractive.com/sunblog/posts/different-headers-and-footers-by-page-in-pdf-salesforce
moinuddin saifimoinuddin saifi
make this,
<div class="footer">
<p>Some content write here</p>
</div>
<div class="footer">
<p>write different content</p>
</div>
and see result, this code make two different footer in pdf
This was selected as the best answer
Lewis ReedLewis Reed

In order to make your header or footer larger/smaller

You can use the following code:

@page {

  margin-bottom: 100px;
  margin-top: 80px;

@top-center {
content: element(header);
}
@bottom-center {
 content: element(footer);
}
}

That will also center your header and footer!

Do you know how to do page breaks too - you have the ability to break before or after elements