Tuesday, November 1, 2011

How to center a SharePoint master page

By default, SharePoint 2010 master pages expand to the current browser resolution.
In order to fix the width of the site pages and center them for bigger resolutions, several steps can be taken( below).
For the example below, let's consider 1280px to be the standard resolution. The site should cover the entire browser width when rendered in 1280px. Bigger resolutions such as 1600px should center the site in the middle of the browser and leave a gray margin left and right.


  • Find the div called s4-workspace. This is the entire page area and it gets expanded by SharePoint according to the current resolution. Add class="s4-nosetwidth". This will prevent the area from expanding to the browser's resolution.
  • Set the body to allow overflow. This will add the scrollbar on the browser window, not the workspace.    The workspace will take up only the center part of the page for bigger resolutions than 1280px, this means we don't want the scrollbar to appear on the centered part, but on the actual browser window.

          body.v4master{ overflow:visible !important; min-height:1200px; height:auto;}
          body #s4-workspace{   min-height:1200px; height:auto; overflow-y:hidden;}

  • Apply any generic text styles to s4-workspace and set the width of the workspace. The width is 1258 instead of 1280 to allow for a right vertical scrollbar and border on left and right.

          #s4-workspace
          {/* generic text styles for the entire site */
         font-family:Tahoma;
         font-size:12px;
        color:#434345;
        width:1258px;
           }

  • Under the body tag, create two new div-s <div id="main"><div id="centered">

          #main{overflow:visible !important;}
          #area{ background-color:#F6F6F6;}
          #centered{
             margin:0 auto;
           width:1260px;
           border-left:1px solid #B8BABD;
   border-right:1px solid #B8BABD;}

No comments:

Post a Comment