[SalesForce] Css in Vf page not working

Trying to use this css to display page numbers from second page…it should start page number from second page like this 2,3 and so on…this my css class.It is starting from page 1 and coming as 1,2,3 and so on…

 @page { {  counter-increment: page ; }

 @page:first 

 {  counter-reset: page 2 ;

 } @top-center {

 content: element(header);

 }

 @bottom-left {

     content: element(footer);

 }

 }

 div.header {

 padding: 10px;

 position: running(header);

 }

 div.footer {

 display: block;

 padding: 5px;

 position: running(footer);

 }



 .pagenumber:before {

 content: counter(page);

 }

 .pagecount:before {

 content: counter(pages);   }

Best Answer

You can achieve this with a extra pair of header and footer and by putting style=“page-break-before:always” for a <div> element in cover page as below. The key in the Visualforce page is the div with the style=“page-break-before:always” in it which forces a page break. This page break tells the browser to look for a new DIV with the desired CSS class for this page. Hope this helps. I worked upon this solution from here. 

<apex:page renderAs="pdf" applyBodyTag="false" standardController="Account">
    <head>
        <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: 5px;
               position: running(footer);
               }
               .pagenumber:before {
               content: counter(page);
               }
               .pagecount:before {
               content: counter(pages);
               }
        </style>
    </head>
    <div class="header">
        <div>Header For Cover Page</div>
    </div>

    <div class="footer">
        <div>Footer For Cover Page </div>
    </div>

    Here is the text on my cover page!
    <div style="page-break-before:always"> </div> 

    <div class="header">
        <div>Header For All But Cover Page</div>
    </div>
    <div class="footer">
        <div>Footer For All But Cover Page: Page <span class="pagenumber"/> of <span class="pagecount"/></div>
    </div>
    <div class="content">
        <p>Actual page body information.</p>
    </div>
</apex:page>
Related Topic