Skip to main content

Creating a Center Justified Fixed Width Design

If you have ever had the task of creating a SharePoint Design with a fixed width that is centered on the page here is a post that might help you. (Sorry about the length...)

In your alternate stylesheet add the following classes and properties:

body{
background-color:#EEE;
font-family:verdana,arial,helvetica,sans-serif;
color:#000;
text-align: center;
padding-top: 20px;
}
.ms-main{
width: 980px;
border: 3px #006699 solid;
border-bottom: 0px #0066699 solid;
background-color:#FFF;
}
#mainTable{
width: 100%;
}

Here is an example of what the results of the code above would look like:

image

Simplified HTML from OOTB SharePoint

<HTML>
<HEAD>
</HEAD>
<BODY>
    <form>
        <TABLE class="ms-main">
          </TABLE>
    </form>
</BODY>
</HTML>

Basically if you look at the the simplified SharePoint's html and Classes above you will notice we are simply applying a light background color, Top Padding, and Text-Aligning property to the <Body> tag. This helps center the site, and brand it as a container.

As for the "ms-main" class we are setting the width of the site to be 980px (you can set this to what ever you like but If majority of your users are all 1024x768 or above I would recommend using this size.) I have also added in a border to help contain the site and a background color of white, so when classes that do not have a background color specified do not show the gray <body> background.

The reason why I needed to add the #mainTable class with a width of 100% is that there is a issue with the Web part picker that when you click on Add a Web Part it uses the class of ms-main and since that class now has a fixed width it does not display properly. See screenshot below: Notice you cannot see the "advanced web part gallery and options link or the ADD, and Cancel Buttons... To see them you have to expand the window. (Not a good experience for your users)

image

So by using the #mainTable class properties above to set the width to 100% you get the correct display of the Web Part Picker.

imageI guess the way the webpart picker works is that there is a masterpage that lives in the "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS" directory called "pickerdialog.master" and in this master page there is the following html:

<TABLE class="ms-main" CELLPADDING=0 CELLSPACING=0 BORDER=0 WIDTH="100%" HEIGHT="100%" id="mainTable">

I have simply taken the ID of that table to fix the issue with webpart picker. The reason why this works is that on the default masterpage this ID is not present.

If you dive deeper into the file there is a content place holder called: <asp:ContentPlaceHolder id="PlaceHolderDialogBodySection" runat="server"/>

The file that defines this Content Control  is located in the same directory called "webpartgallerypickerpage.aspx". This page has the classes that define the look and feel of the Webpart selection but not the outside container of the picker. The outside shell is controlled by the Master page listed above.

Sorry about the rant on the Picker but it is very important to know about how classes are shared across many different types of pages. That is why it is always a really good idea to make sure you dedicate enough time for testing!

Comments

Mike said…
Great post. One thing I'm not totally sure of is why you center your text in the body tag..

text-align: center;
Erik Swenson said…
Mike,

The property in the body tag "text-align: center;" is not used to center the text but to center the "ms-main" class AKA the site container. If this was not specified the site would be left justified by default. So this is a key property to have in the body tag if you want your site to be center justified.

Does that help?
Ryan said…
THANK YOU for this post! It was perfect timing to find this - I was just about to start beating my head against a wall trying to get a site design I'm working on to center properly. Your solution worked perfectly.

The only thing I noticed with the example CSS given is that the 20px padding at the top of the page also pads the editing windows 20px at the top (for example, editing a link in the modify navigation page), pushing the OK and Cancel buttons halfway out of view.

Thanks again!
Anonymous said…
good post..:)

i wanna ask something about this sharepoint 2007...

i have been working out transition photo matters, and until now i didn't find transition effect for photo....

any idea for fix transition photo effect in MOSS 2007
Loz said…
Hi great post. A question for you - I have other site owners (non-web developers who are adding content) if they had an image or configure a list to be larger than the area the page expands - how do I lock that so the web parts have to scroll, is that through the page layouts?
Erik Swenson said…
To my Knowledge there is no way of forcing document libraries, images, and long hyperlinks to not expand out the fixed width site.
Anonymous said…
Awesome! Thanks.
Anonymous said…
It deosen't seems to work with other browser [only works in IE], any idea?
Simone said…
Hello... great post and indeed I noticed the webpart gallery issue before... thanks for teh tip!!
Only one issue is that is 2 of my site landing pages, the width is getting overridden (believe due to a couple of announcement lists :( any idea on how to force that!!
Simone said…
Believe after investigating more the issue I am having that I something is going one with teh page width and publishing page layouts! anyone! ideas??
Ali said…
its working like a charm in IE type browsers, but in firefox & chrome centralization is not working.

Please help to fixed this issue

Thanks
karlog said…
i applied reflector theme to my site.. now i wanna do the center justified fixed width deign... in which css should i add those classes and properties...
themes.css (or) mossextension.css (or) core.css?
Anonymous said…
Any update on making this work with other browsers? Perhaps Firefox and Safari?
denisse said…
will this work on sharepoint foundation 2010? :) Thank you!
Linda J. Prieto said…
It's always my pleasure to read this type of stuff.I am very much interested in these types of topics from childhood and it's my habit to read this.
clipping path service company

Popular posts from this blog

SharePoint 2010 Base CSS Classes

This will be the first of many SharePoint 2010 posts. I will be focusing on a few of the main CSS classes used for SharePoint 2010 Public Beta. As the product becomes more final there might be some changes to the class names but I will be sure to create a new post if that happens. This will be quite a lengthy but it should be helpful. The default CSS given below are just highlights of the full CSS attributes for that class.I will be using a basic team site as my base for the screenshots. Here is a basic structure of the main areas that I will cover.Ribbon RowTable Row Left Site Actions Navigate Up Edit Tab List Browse Page Table Row Right Give Feedback Welcome Menu WorkspaceBody Container Title Row Title Title Logo Title Text / BreadcrumbPage DescriptionSocial Data SeparatorI like It Tags/Notes Top Header 2/Top Links li Static-Selected li Static SearchHelpStatus Bar Container Main A…

How To: Hide Left Side Navigation on Home Page

I was recently asked: "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.. " There are a couple of ways to do this in SharePoint 2010. If you are using a non-publishing site you can add a Content Editor Web Part to the page and add the following to the HTML Source.
<Style>
body #s4-leftpanel
{
display: none;
}
.s4-ca
{
margin-left: 0px;
}
</style>
Basically the CSS above hides the left navigation Div, and then sets the content area to not have a left margin. Once you are done, simply modify the web part and hide it on the page. If you are using a publishing site for your homepage simply add the same styles specified above to a custom page layout. That way if you have a need for other pages that do not need the left side navigation you can re-use the page layout.

Small Calendar for SharePoint 2010 & 2013

First off I would like to apologize for the lack of posts. I have been really busy with my new role as the UX Design lead within Slalom Consulting Boston. I will share more about that in another post. In a previous post Create Really Small Calendar I showcased how to do this for SharePoint 2007. However the 2010 and 2013 calendar views have changed and therefore we cannot use the same method or CSS as 2007.SharePoint 2010 Small Calendar:
SharePoint 2013 Small Calendar:
See video below for a video walk through on how to create a small calendar for SharePoint 2010 and & SharePoint 2013 with just CSS.Per the video above here is the code that I referenced:2010 CSS link reference in Master Page:
<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/smallcalendar.css %>" After="corev4.css" runat="server"/>2010 CSS:
/**** Small Calendar ***/
.ms-acal-item{height: 10px !important;}
.ms-acal-sdiv,
.ms-acal-mdiv,
.ms-…