I created a blog post about 2 years ago on how to create a centered fixed width design for SharePoint 2007. Well now with a little help from a few other posts (The SharePoint Muse, Elumenotion, Styled Point) we can create a SharePoint 2010 fixed with centered design.
Now this does come with some drawbacks. By default the ribbon is intended to stay static and always be visible to the contributors on the top of the page. However due to the complexity of fixing a site’s width. The ribbon will need to scroll with the body of the page to avoid a vertical scroll in the middle of your page once it is centered…
The trick to get this to work is to do the following:
- Open up your master Page and remove scroll="no" from the body.
- If you do not do this there will be no scroll bars on long pop up modal windows
- In the Master Page search for “s4-workspace” remove this whole DIV tag and its close Div tag at the bottom of the master page.
- This ID is tied to a JavaScript file that forces a full width on the page.
- Now Open up your CSS file and add the following:
- body{
overflow:auto !important;
}
form
{
width:980px;
margin: auto;
} - Your Site Should look something like this:
If you wanted to add some background color and borders to enhance the centered design replace it with this:
body{
overflow:auto !important;
background-color: #21374c;
}
.s4-widecontentarea{
background-color: #FFF;
}
form
{
width:980px;
margin: auto;
}
The following is how it might look:
The last draw back to fixing the width of a SharePoint 2010 site is that the content is within a floating <DIV> tag and if the content gets very wide by either a fixed with image or a list with many columns displayed it will spill off the page. I have no fix for this at the moment but it is something to consider.
Comments
The easiest is to add a content editor webpart to the page and add the following:
Remove Quotes:
<"Style">
body #s4-leftpanel
{
display: none;
}
.s4-ca
{
width: 100%;
margin-left: 0px;
}
<"/style">
Then simply just hide the webpart and you should be all set.
Thanks in anticipation
That is an interesting idea, however I am not sure how you would tackle such a thing. I am pretty sure the ToolPane is added as a TD next to the content area.
The TD Id is "MSOTlPn_MainTD"
Let me know if you get anywhere with this concept...
The beauty of CSS is that it cascades and the last line of code gets the last word...
am I missing something?
body.v4master{
width:1300px; <=sets the page width
margin-left:auto;<=centers the page
margin-right:auto;<=see above
}
body #s4-workspace{
width:100% !important;<=sets the page below the ribbon}
body #s4-mainarea{
width=100%;<=sets the width of the right content area
}
If you want a fixed width do two things:
Set the width and margins on the s4-bodyContainer div (the first div inside s4-workspace).
This will center the page body but the ribbon will be full width.
Next wrap the s4-ribbonrow div inside another div and set the width and margins to equal that of the body, but also pad the right by 17px (the width of the scrollbar)
This will center the ribbon and navigation row - Boom done. You stil have full out of the box functionality. The scroll bar does not extend all the way to the top to the page, but its where it is supposed to be and logically the height of the scrollable portion of the page.
css:
.ribbon-fixedwidth {
margin:auto;
width:800px;
padding-right:17px;
}
.body-fixedwidth{
width:800px;
margin:auto;
}
My centered fixed works only for the system account and for rest the right side just streches.
How can we make it work for all the users?
thanks.
height:100%; any fix for this. I tryed lot options no sucess.
"The last draw back to fixing the width of a SharePoint 2010 site is that the content is within a floating 'DIV' tag and if the content gets very wide by either a fixed with image or a list with many columns displayed it will spill off the page. I have no fix for this at the moment but it is something to consider."
The new problem which i facing here is, we set the form width as somw pixels (say 1000 pixels). but the same thing applies to the dialog. so the dialog width also seems bigger.
Any idea to get rid off this issue?
.ms-dialog #s4-bodyContainer{
width: 100% !important;
}
I hope that helps!
My centered fixed works only for the system account and for rest the right side just streches.
How can we make it work for all the users?
thanks.
Have tried so many other solutions that only do half the job. Yours is flawless (though perhaps I should wait until the rest of the job is done before making claims of perfection!)