+ Start a Discussion
prakash chaudharyprakash chaudhary 

make footer in VFpage...

Please tell me that how can i make the below shown footer.


since i have made footer bt its layout is not proper according my expectation so please help me make it proper.

Ankit AroraAnkit Arora

Can you please provide your code here?




Ankit Arora

Blog | Facebook | Blog Page


How have you created the footer and it what way does it not work?


I use the following mechanism:


<style type="text/css" media="print">
            @page {                 
                @bottom-left {
                    content: element(footer);
                margin-top: 100px;
            div.footer {                
                display: block;             
                padding: 5px;               
                position: running(footer);          
            .pagenumber:before {                
               content: counter(page);             
            .pagecount:before {             
                content: counter(pages);            
<div class="footer">        
        <div style="float:right; margin-top:32px;">Page <span class="pagenumber"/> of <span class="pagecount"/></div>   
        <div><apex:image url="<logo_url>" width="200" height="200"/></div>


prakash chaudharyprakash chaudhary
<apex:component >
    <!-- Component Attributes -->
    <apex:attribute type="string" name="type"
        description="Determines if the component renders as a header or footer" />
    <apex:attribute type="string" name="position"
        description="Determines if component should render the text on the left, center, or right" />
    <apex:attribute type="boolean" name="showPageNumbers"
        description="Determines if the header/footer information displays the page number information." />
    <!-- Component Variables -->    
    <apex:variable var="styleClass" value="{!LOWER(type)}_{!LOWER(position)}"/>
    <!-- Component Body -->
    <apex:outputPanel id="panelHeaderFooter" 
        <apex:outputPanel layout="none" rendered="{!showPageNumbers}">
            <div>Page <span class="pageNumber"/> of <span class="pageCount"/> </div>
        <apex:componentBody />
I used this code & the problem is, I am not able to put that horizontal line that is shown in image along with footer image in footer. The image goes down when i put that line so please is there any so that image will see at the left corner & above that horizontal line will appear...
Same as snapshot has shown....