Friday, August 6, 2010

SharePoint 2010 Centered Fixed Width Design

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:

  1. 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

image

  1. 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.
  2. Now Open up your CSS file and add the following:
    1. body{
      overflow:auto !important;
      }
      form 
      {
      width:980px;
      margin: auto;
      }
  3. Your Site Should look something like this:

image

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:

image

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.

image

22 comments:

Nightwriter311 said...

WooHoo! I've been looking for this. Thank you so much!

Dan said...

Just wondering if you can enlighten me.. How can I hide the side nav bar on the main homepage layout ?? I want to be able to use the side NAV with in the team site etc etc, but I don't want it on the front page..

Erik Swenson said...

Dan,
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.

Kevin said...

Removing the "s4-workspace" div means that project tasks gantt chart list won't work.

Anonymous said...

How can you make the height 100%>

Anonymous said...

Thanks for the post. I have a site which has FBA with Anonymus access enabled. For logged in users, the fixed width format works just fine. However, as soon as I log out, the width of the page doesn't remain fixed any more. I am using a SPS 2010 publishing site. Can you help me?

Thanks in anticipation

Gi said...

Work great but prevent from using [[ ]] in wikipages.

Robert said...

Will the out-of-the-box page layouts remain liquid inside the fixed width page? For example, a three column layout will wrap text as needed and won't spill off the page, correct?

Trygve said...

I have found a few posts like this one related to center fixed width design. Can anyone discuss the solution for the "edit web part" property table that gets added to the content area? I'd love to turn these into a modal window like "Create Page" etc.

Erik Swenson said...

Trygve,

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...

Sheepwear said...

Has anyone tried just making changes to the css? By adding this to the bottom of the default css doc, I've been able to adjust the page width without interferring with scripting.

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
}

Timothy Frank said...

Dont mess with s4-workspace
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;
}

SamanthaNewBee said...

I have applied the 2007 changes to the css and it worked perfectly. However, i would like to change the background color on the left and right side of the webpage to a shade of grey instead of the default white. What would be the css for 2007? I tried applying the changes listed above, but i guess it will not work since it is 2010??

Anonymous said...

Hi Eric,
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.

vinod said...

fotter at bottom at any size of the content
height:100%; any fix for this. I tryed lot options no sucess.

Brendon said...

Did you ever find a solution for this?

"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."

Lane said...

We have set the fixed width to 1024px. Now we find that in certain instances when the ribbon contains a lot of controls, not all the controls are displayed. For example, editing a wiki page, the entire Markup section is missing. Has anyone found a solution to this problem?

Kumz said...

hi erik,

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?

Erik Swenson said...

Kumz, To fix your dialog box issue, you simply just have to add a new CSS property with the ".ms-dialog" class before the ID or class that you have set a width to. For example if you set the s4-bodyContainer to 1000px you would add in the following.

.ms-dialog #s4-bodyContainer{
width: 100% !important;
}

I hope that helps!

Juan Shinoda Sites said...

Hi Eric,
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.

Kolten said...

Juan, have you tried to check in, and PUBLISH your master page file? I designer here where I work had the same question, and this was the issue.

Tristan said...

Thank you Erik!!!!!!!!!!
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!)