Centered layout with CSS & v4.master on SharePoint 2010

May 6 2010 31 comments

First of all, I must say that I’m not a huge fan on how the new Ribbon UI is implemented. The positioning system aided by ECMAScript messes with the body-tag and it requires quite a few steps to disable the positioning system as Jonathan Kern explains here.

I have a case here where I need the re-brand an OOTB Publishing Site which uses v4.master. The problem is that I cannot edit the master page at this point. The only option is to use an Alternate CSS in the Site Master Page Settings for my site and try to customize the layout with bare CSS.

My new design is a static layout, 990 pixels wide with content centered on browser and elements sitting nearly identically with v4.master. It should be an easy task to just replace the background images, fonts, colors and adjust widths and marginals. However, centering the content blocks isn’t very straightforward.

The following element properties are dynamically adjusted on page load and we’re unable to use those for centering purposes: #s4-ribbonrow, #s4-workspace, #s4-titlerow, #s4-bodyContainer.  Instead, we’ll be using their child elements for positioning.

My layout requires a ribbon background that takes 100% of the available width with the actual ribbon elements centered on fixed 990px width.

Here is the CSS for centering the contents in the ribbon container and letting the container itself behave as designed:

#s4-ribbonrow > #s4-ribboncont > #RibbonContainer > #Ribbon > .ms-cui-ribbonTopBars > div {
    width: 990px;
    margin: 0 auto;
    float: none;
}

OK, that works (I’m surprised since there are 145 !important rules on the corev4.css which is the stylesheet I’m overriding here).

Centering the actual page content

As mentioned earlier, the elements #s4-ribbonrow, #s4-workspace, #s4-titlerow, #s4-bodyContainer are reserved and we cannot do this:

#s4-bodyContainer {
    width: 990px;
    margin: 0 auto;
    float: none;
}

Hit refresh on the page to see whats going on. The s4-bodyContainer is centered at first, and then maximized when the page is ready. This is because the ECMAScript mentioned in Jonathan Kern’s post looks for an element with the ID s4-bodyContainer and stretches it unless a class “s4-nosetwidth” is present. This is a problem in my case as I’m unable to edit the master page in question and add the required class on the workspace element.

As before, the workaround is to center each sibling of the “reserved element” separately. Adding the title area and page content to our previous styles we have:

#s4-ribbonrow > #s4-ribboncont > #RibbonContainer > #Ribbon > .ms-cui-ribbonTopBars > div,
#s4-bodyContainer > div,
body #s4-titlerow > div
{
    width: 990px;
    margin: 0 auto;
    float: none;
}

Notice the inclusion of body-element for the #s4-titlerow rule. This is to override the similarily declared float in the corev4.css. Finally, let’s center the tab contents list that has a class .ms-cui-tabBody on the ribbon.

Putting it all together and removing unnecessary rule-bindings, the final css should look like this:

.ms-cui-ribbonTopBars > div, ul.ms-cui-tabBody, body #s4-titlerow > div, #s4-bodyContainer > div {
    width: 990px;
    margin: 0 auto;
    float: none;
}

Popularity: 7% [?]

31 comments to “Centered layout with CSS & v4.master on SharePoint 2010”

  1. jim says:

    what’s wrong with just putting width and margins on

    body #s4-bodyContainer {
    width: 990px !important;
    margin-right: auto;
    margin-left: auto;
    }

  2. jim says:

    sorry re-read your requirements…. the class i posted will center main area…. and not the ribbon.

  3. I added this to fix some alignment issues in my case..

    .ms-cui-tabContainer, .ms-cui-ribbonTopBars
    {
    margin-left:-16px; /* ribbon alignment for some reason? */
    }

    .s4-title.s4-lp
    {
    padding-left:0px;
    padding-right:0px;
    }

  4. SharePoint 2010 fluid centered masterpages are a pain in the butt.

    I was able to modify my masterpage, but the drawback is that subsites using OOTB site templates such as Meeting Workspaces use their own local masterpages.

  5. Heres a good modification. Has 3% margins around the content and ribbon is 100%, but not the logo.
    Masterpage Change

    [div id="s4-workspace" class="s4-nosetwidth"]

    Add CSS (after corev4.css)
    /shell- under construction/
    body #s4-bodyContainer {
    margin: 0 3%;
    min-width: 935px;
    /no height in ie7, ie8, for firefox set height to 100%/
    }
    body #s4-titlerow {
    border-left: 13px transparent solid;
    }
    /modal shell – after shell/
    .ms-dialog body #s4-bodyContainer {
    margin: 0;/remove red background margin from popup/
    min-width: inherit;
    }
    .ms-dialog #s4-mainarea {
    border: 0px transparent solid; / remove borders around content of popup/
    }
    .ms-dialog .bottomFooter {
    display:none / hide footer/
    }

    Note: the code removes the fixed width in the modal windows for allowing scrolling and the s4-workspace window JavaScript to load.

  6. Be sure to replace the [, ], and / tags.

    I cant post HTML or comment CSS.

  7. Tuukka Uskali says:

    Eric, thanks for the mod.

    We are using a WP plugin called CodeColorer, which handles all the syntax highlighting and escaping of special characters if required. It is also enabled on the comments, so you are able to use the same syntax here. Too bad, there’s no preview button available at the moment but we’re working on that as we’re upgrading to WP3.

    for the CodeColorer syntax check out the Authors Blog

  8. Chetan says:

    Any Body know “On what basis the naming conventions for the classes of corev4.css are given”. Any idea ???

  9. Tuukka Uskali says:

    The version number four means Sharepoint 2010 vs. the old MOSS 2007 which was version 3.

    Here’s some explanation on the on the naming conventions if you read between the lines: Customizing Ribbon Positioning in SharePoint 2010 Master Pages

  10. vinod says:

    Hi,

    I am having fixed and non-fixed layouts when we go to Sitesettings>masterpage and layouts> the table of content goes out of the margins,
    I am doing on flexible layout with left and right margin with 10px when go to masterpage and layout section the table cross out of the screen and s4-bodyContainer width fix to screen resolution. Any help please

    thanks
    vinod

  11. [...] Centered layout with CSS & v4.master on SharePoint 2010 | SharePoint Blues. [...]

  12. Hugh Abbott says:

    Thanks for sharing this – it works very nicely.

  13. Hugh Abbott says:

    Think you guys might find this useful shows a lot of the classes of corev4.css
    http://sp2010notes.wordpress.com/sharepoint-2010-css-chart/

  14. Tuukka Uskali says:

    Thanks Hugh, we usually use DOM-explorers the get the classes we want but that’s an excellent reference. Especially for the Ribbon, because that’s dynamically loaded and it can be a pain to get the DOM on some of those elements.

  15. Rik Locke says:

    This is absolutely golden!

    I’m pretty damned good at this master page and style sheet lark in SharePoint now but this one point has been plaguing me for many days with several clients.

    Many thanks indeed.

  16. Chris says:

    Hi. Cool Post. Thxs! If you want to creat centered layout by using an online SharePoint Designer without coding, try out this:

    http://www.nextflow.at/designer/designer.aspx

  17. “Thanks for sharing this – it works very nicely.”

  18. Mike says:

    Make it easy and don’t waste your time with searching for the right css tags. Just use Plug ‘n Play Branding for SharePoint 2010 Branding:

    http://www.nextflow.at/designer/designer.aspx

    Cheers!

  19. Tony says:

    Everything appears to work great. However, when I maximize in IE9 and then press the “Restore Down” button, things do not re-center.

    I experience the same behavior in Chrome as well.

  20. [...] Centered layout with CSS & v4.master on SharePoint 2010 – SharePoint Blues [...]

  21. James says:

    Great article. Code allows for zooming using internet explorer which is great for accessibility.

  22. [...] Centered layout with CSS & v4.master on SharePoint 2010 – SharePoint Blues [...]

  23. Anita says:

    This work’s almost perfectly for me. I am having problems trying to get the web parts on the right of my site to fit into the bodycontainer.
    Can anyone help me?

  24. Hi my loved one! I want to say that this post is awesome, nice written and include almost all important infos.

    I would like to peer extra posts like this .

  25. [...] Centered layout with CSS & v4.master on SharePoint 2010 [...]

  26. Great post. Tank you admin

  27. Thanks for sharing this. It works very nicely

  28. su kaçağı says:

    Thanks for sharing

Leave a Reply