Page border on cover page visualforce as word document

Hello folks,

In this blog I am going to give example to how to apply border on cover page of visualforce page word document.

To load visualforce page as word document you need to add attribute ContentType="application/msword#name_of_Document.doc". you can replace name_of_document with file name you want to add.

lets jump on code snippet to add page border.Below style sheet will add page border on cover page.

          @page Section1 {

                size: 8.5in 11in;

                margin: 0in 1in 0.5in 1in;

                mso-header-margin: 0.5in;

                mso-header: h1;

                mso-footer: f1;

                mso-footer-margin: 0.5in;

                mso-paper-source: 0;

                mso-page-border-display: first-page;

                font-family: Calibri; 

                mso-border-alt: solid black 2pt;

                mso-page-border-offset-from: edge;

                padding: 20px 20px;

         }

      mso-border-alt: solid black 2pt;

      mso-page-border-offset-from: edge;

Above line will add border to page and adding padding to section will add padding to page border.

Hope this will help, Please comment your question or suggestions.

Simple Loader image for Visualforce Page.

Hello guys,

I am gonna show you simple way to pop up loader image i.e status image for loading purpose using CSS and javascript function.

Using simple html div and Javascript you can create your status loader.

Below i am gonna show you simple html tag for it. you can call javascript function on onclick method to show loader and hide it on oncomplete.

ADD BELOW STYLE TO YOUR VF PAGE

#filter{ 
      display:none;
      background-image: url({!URLFOR($Resource.Static_Resource_Main,'Static_Resource_Main/loading32.gif')});
      z-index:10000;
      position:fixed;
      top:0%;left:0%;
      width:100%;
      height:100%;
      background-repeat:no-repeat;
      background-position:center;
      background-color: #ffffff;
      opacity:0.6;
      filter:alpha(opacity=50);
} 

Call startProces method when you call action( Controller function or any function after which you want to show loading image).

 

function startProcess()
{
      $('#filter').show();
}

function endProcess ()
{
      $('#filter').hide();
}   

Add below Div tag at the start of body tag or form.

<center>
    <div id="filter"></div>
</center>                        

startProcess will add display: block css to div.
endProcess  will hide the div.

Its just awsomeness of css.

Hope you will like it.
Enjoy coding....

Set div at center of the screen CSS.

If you know the dimensions of div.

.centered {
  position: fixed;  /*IE6 position:absolute */
  top: 50%;
  left: 50%;
  margin-top: -50px; /* Half of the Height of div*/
  margin-left: -100px; /* Half of the Width of div*/
}

If you Don't know the dimensions of div.

.centered {
  position: fixed; /*IE6 position:absolute */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}