I have used html file in footer setting of customer portal and it is working fine. but today sandbox is updated into summer '16 this file not working on summer' 16. Please help me how to use css in footer setting of customer portal.


<span id="hideMyParent">
</span>
<!--[if lte IE 7]>
      <script type="text/javascript" src="/main/resource/1400496182000/Json2JS"></script>
<![endif]-->
<script type="text/javascript">
  $(document).ready(function() {
  $('#sidebarDiv #hideMyParent').parent().parent().hide();
  var startYear=1900;
  var endYear=2020;
  var optionsString='';
  if(startYear<endYear){
  for(i=startYear;i<endYear+1;i++){
  optionsString += "<option value=\""+i+"\">"+i+"</option>";
  }
  $('#calYearPicker').html(optionsString);
  }
  $('#sidebarDiv #hideMyParent').parent().parent().hide(); });
</script>

<script type="text/javascript">
var t;
var currenturl = location.href ;

 window.onload=resetTimer;
 document.onkeypress=resetTimer;
 document.onmousemove=resetTimer;

   

function logout()
{
   if(currenturl.toLowerCase().indexOf("main/sitelogin") == -1){

        alert("Your session has timed out. Please login again.")
        location.href='https://'+window.location.host+'/'+'main/secur/logout.jsp'

    }     
    
}

function resetTimer()
{
    clearTimeout(t);
    t=setTimeout(logout,1800000) //logs out in 30 minutes
}
</script>

<div id="wrapper" class="two-col-left width-940 two-col-left-940">
  <link rel="stylesheet" href="/main/resource/styles" type="text/css" media="screen" charset="utf-8" />
  <div id="header" class="col-full">
    <div id="logo"> <img src="/main/resource/PreEmployMainLogo" alt="Pre-Employ.com" />
      <span class="site-description">INTEGRATED WORKFORCE SOLUTIONS DESIGNED WITH A PASSION FOR EMPLOYEE PRIVACY
        <span class="site-description2">
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Contact us: 1.800.300.1821
          <br>
            rapidresponse@pre-employ.com
          </br>
        </span>
      </span>
    </div><!-- /#logo -->
  </div><!-- /#header -->
<div style="padding:0; margin-bottom:60px; background: none repeat scroll 0 0 #f5f9fa;">
</div> <!-- #content Starts -->
<div id="content" class="col-full">
  <div class="shadow-t">
  </div>
<div class="shadow-r">
</div>
<div class="shadow-l">
</div>
<div id="main-sidebar-container">
  <!-- Beginning of Asynch Tutorialize Snippet -->
  <script type="text/javascript">
  (function() {
    var tu = document.createElement('script'); tu.type = 'text/javascript'; tu.async = true;
    tu.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'dpi1c6z6qg9qf.cloudfront.net/client/v3/tutorialize.js.gz'
    var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(tu, sc);
  })();
  var _t = _t || [];
  _t.push = function(){if(typeof window.tutorialize !== 'undefined'){window.tutorialize.process(arguments[0]);}
  return Array.prototype.push.apply(this, arguments);};
  _t.push({publisher_id: '5293a2624e5fe1bcd800013c'});
  </script>
  <!-- End of Tutorialize Snippet -->
  <!-- Start tutorial named "Quick Invite" -->
  <script>_t.push({start:'Quick Invite'});
  </script>
</div>

We need to develop Message board like http://www.codeproject.com/ [^]
User can add article by selecting Category->sub-forums and then topics and other user can add post on it.

<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>

<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>

<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>

After a lot of persistence I finally was able to get repeating header and footers when rendering a Visualforce page as a PDF. The key to this is the page2PDF support of CSS3. 

 

Here is the css I came up with:

 

<style type="text/css">

@page {

@top-center {

content: element(header);

}

}

div.header {

padding: 10px;

position: running(header);

}

</style>

 

In the visualforce page I have the header setup as a div with the class name "header" the position running command pulls the content in my div and repeats it at the top of every page. The key for some reason is to put your header and footer divs at the top before you put your content on the page.

 

Here is my page

 

<apex:page renderAs="pdf">

<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>My Header Text</div>

</div>

 

<div class="footer">

<div>Page <span class="pagenumber"/> of <span class="pagecount"/></div>

</div>

 

<div class="content">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec nulla turpis. Suspendisse eget risus sit amet lectus ornare varius. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean nec urna purus, adipiscing accumsan massa. Nullam in justo nulla, sed placerat mauris. In ut nunc eget libero posuere luctus. Donec vulputate sollicitudin ultrices. Nulla facilisi. Mauris in sapien arcu. Phasellus sit amet quam non mi ornare tincidunt ac quis lectus.</p>

</div>

</apex:page>

 

I cut the content text short for the purpose of this post. I am sure it will just take some more playing around.

 

Hope this helps someone avoid some late nights like I spent trying to figure this out. :smileyhappy: