Tuesday, December 20, 2011

SharePoint 2010 Centered Fixed Width Design

Now a days most of the web sites comes with the centred width fixed design. Means it has center fixed and some space from left side as well as from the right hand side as shown in the figure below.

But by default SharePoint design covers the full page.
I got a solution that solved my problem as well as it has advantages that the sharepoint site will be fixed design but the ribbon will cover the full page.

So here there are few modification needed in the css file as well as in the master page.
So first go and create a .css file using SharePoint designer and the paste the below content to the css file.
#s4-workspace{
    background-color: slategray;
}
div.s4-title.s4-lp,
body #s4-mainarea,
#s4-topheader2,
#s4-statusbarcontainer {
    width: 960px;
    margin: auto;
    padding: 0px;
    float: none;
    background-image: none;
    background-color: white;
}
.s4-ca
{
    min-height: 600px;
    }

In the next thing we will modify the master page.
First of all open the master page using SharePoint designer and give a reference to the custom css class that you have made. There are different ways you can give reference to the custom css file. Here you can check this link.

To refer the custom css file write below code before the </head> tag on your master page.
<SharePoint:CssRegistration runat="server" Name="<%$SPurl:~SiteCollection/Style Library/mycustomstylesheet.css%>" />
assuming you css file is present inside the Style Library.

Now search for <div id="s4-workspace"> and replace with <div id="s4-workspace" class="s4-nosetwidth">
And then search for <div id="s4-titlerow" class="s4-pr s4-notdlg s4-titlerowhidetitle"> and replace with the below code
<div id="s4-titlerow" class="s4-pr s4-notdlg s4-titlerowhidetitle s4-nosetwidth">

Now publish the master page !!!

I have refered from this URL.