Supporters of End User
Web

Centered fixed width design in SharePoint 2010 - The fast way

Item is currently unrated. Press SHIFT+ENTER to rate this item.1 star selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+ESCAPE to leave rating submit mode.2 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.3 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.4 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.5 stars selected. Press SHIFT+ENTER to submit. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.
Categories:CSS; SharePoint Designer; Site Manager/Power User; MOSS; WSS; 2007; 2010

 

Editor's note: Contributor Stefan Bauer is a solution architect at wunderman pxp gmbh. Follow him @Stfbauer

There are a lot of fixed width master page solutions available on the internet and I've read most of them. Some require JavaScript or don’t respect the ribbon, which means that the ribbon will be placed inside the fixed width design. SharePoint is smart enough to handle small screen resolutions by compacting and rearranging the icons in the ribbon, but if a larger screen is used it gets really hard to administer SharePoint and breaks the usability completely.

There is a much quicker and safer way to create a flexible master page where only certain CSS properties need to be changed to get any fixed width design as well as centered design with a border to the left and right.

Reasons for a centered design

There are certain reasons for a centered or fixed width design. By default SharePoint scales the complete page to 100% of the screen. When it comes to web content management the design is more text driven and collaboration concerns are not that relevant. When the content gets wider and wider with the screen resolution the lines of text get longer and longer. The content then will be harder to read.

Fixed width looks pretty but generally only makes sense when public facing web sites should be created. The reason is that you don’t know what the users screen resolution is. Nowadays the most common design requires supporting a minimal resolution 1024px or maybe sometimes 1280px. To be on the safe side most web designer's use grid systems like 960.gs which implements widths of 980px and is optimized for a minimal screen resolution for 1024 by 786.

Fixed design could also be used for blogs and maybe wikis. From a collaboration perspective a 100% width makes more sense. So comment and let me know if you think differently.

Centered Design in SharePoint

As I said before most of the tutorials available on the web don’t respect the ribbon and stuff it into a design that has a fixed width. The fastest way to get a fixed width design I found needs only the following CSS code and is flexible to be changed to any desired width.

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

To get the fixed width design working with the v4.master some classes needs to be added.

<div id="s4-workspace">

Needs to be changed to:

<div id="s4-workspace" class="s4-nosetwidth">

And the second html element needs to be altered:

<div id="s4-titlerow" class="s4-pr s4-notdlg s4-titlerowhidetitle">

This need to be changed to:

<div id="s4-titlerow" class="s4-pr s4-notdlg s4-titlerowhidetitle s4-nosetwidth">

By adding the s4-nosetwidth style class SharePoint won’t assign the inline style property for width and the design will stay centered. The result looks like this:

2012-01-20-CenteredFixedWidthDesign-01a.png
960px fixed width design

2012-01-20-CenteredFixedWidthDesign-02.png
fixed width with ribbon enabled

At the end the design of SharePoint is centered. When any page is edited the Ribbon will remain on the whole width of the browser. It’s much more comfortable to edit SharePoint that way.

The size of the design could be changed to any size just by simply modifying the width property. Remember always respect the size of the ribbon and let it live outside your design for easy editing.

Download Visual Studio Solution

Download WSP File

Comments

neo

Excellent article!

These look great, will definitely take a look at some of those tutorials. Thanks for sharing these!

Posted 02-Feb-2012 by neo
RORO2961

Question about ribbonrow

Thanks for this code, it's really great. Is it possible to center ribbon row too ? Thanks for your help

Posted 24-Apr-2012 by RORO2961
ferif

Excellent

I think this the best way to apply centered fixed width. Thank you

Posted 22-May-2012 by ferif
JOSE ALVAREZ

SPWeb error

When disabling Quick Lunch Menu an error occure:
 
L'objet SPWeb que vous essayez d'utiliser a été fermé ou libéré et n'est plus valide.
 
[SPException: L'objet SPWeb que vous essayez d'utiliser a été fermé ou libéré et n'est plus valide.]
   Microsoft.SharePoint.WebPartPages.SPWebPartManager.get_Web() +27097859
   Microsoft.SharePoint.WebPartPages.WebPart.get_Web() +48
   Microsoft.SharePoint.WebPartPages.DataFormWebPart.ShowRibbon() +18
   Microsoft.SharePoint.WebPartPages.DataFormWebPart.OnPreRender(EventArgs e) +1140
   Microsoft.SharePoint.Publishing.WebControls.SummaryLinkWebPart.OnPreRender(EventArgs e) +111
   System.Web.UI.Control.PreRenderRecursiveInternal() +108
   System.Web.UI.Control.PreRenderRecursiveInternal() +224
   System.Web.UI.Control.PreRenderRecursiveInternal() +224
   System.Web.UI.Control.PreRenderRecursiveInternal() +224
   System.Web.UI.Control.PreRenderRecursiveInternal() +224
   System.Web.UI.Control.PreRenderRecursiveInternal() +224
   System.Web.UI.Control.PreRenderRecursiveInternal() +224
   System.Web.UI.Control.PreRenderRecursiveInternal() +224
   System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +3394

Posted 12-Aug-2012 by JOSE ALVAREZ
Todd Purifoy

Question on the example visual

What defines the BLUE area around your centered page?  In my case it comes up all white, so you don't really get the full effect of the fact that the page is centered.  I can't figure out what controls the color of the OUTER border...in your example, the blue/gray part?

Posted 19-Dec-2012 by Todd Purifoy
Adnan

What defines the blue / grey area

What defines the BLUE area around your centered page? In my case it comes up all white, so you don't really get the full effect of the fact that the page is centered. I can't figure out what controls the color of the OUTER border...in your example, the blue/gray part?

Posted 23-Aug-2013 by Adnan
Adnan

Just specify background color in the tag

just specify background color in the tag of the master page. thats it.

Posted 23-Aug-2013 by Adnan

Notify me of comments to this article

E-mail:
   

Add Comment

Title:

 
Comment:
Email:

   


Name:

 
Url: