Centered layout with CSS & v4.master on SharePoint 2010
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:
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:
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-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:
width: 990px;
margin: 0 auto;
float: none;
}
Popularity: 7% [?]
what’s wrong with just putting width and margins on
body #s4-bodyContainer {
width: 990px !important;
margin-right: auto;
margin-left: auto;
}
sorry re-read your requirements…. the class i posted will center main area…. and not the ribbon.
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;
}
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.
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.
Be sure to replace the [, ], and / tags.
I cant post HTML or comment CSS.
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
Any Body know “On what basis the naming conventions for the classes of corev4.css are given”. Any idea ???
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
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
[...] Centered layout with CSS & v4.master on SharePoint 2010 | SharePoint Blues. [...]
Thanks for sharing this – it works very nicely.
Think you guys might find this useful shows a lot of the classes of corev4.css
http://sp2010notes.wordpress.com/sharepoint-2010-css-chart/
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.
[...] Centered layout with CSS & v4.master on SharePoint 2010 – SharePoint Blues [...]
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.
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
“Thanks for sharing this – it works very nicely.”
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!
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.
[...] Centered layout with CSS & v4.master on SharePoint 2010 – SharePoint Blues [...]
[...] Centered layout with CSS & v4.master on SharePoint 2010 [...]
Great article. Code allows for zooming using internet explorer which is great for accessibility.
[...] Centered layout with CSS & v4.master on SharePoint 2010 – SharePoint Blues [...]
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?
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 .
[...] Centered layout with CSS & v4.master on SharePoint 2010 [...]
Great post. Tank you admin
Thanks for sharing this. It works very nicely
Thanks for sharing
This article is very helpful. Bicafemutfak
Tank you admin. It’s useful work.
Hookup Girls Uses Free of charge Issues? A Great Side to side Gain!
Free hookup ladies free best hookups on the
internet is the best solution if you’re tired of going to night clubs
and organizations only to be prevented, or even worse, laughed
at. I understand what it’s like because I’ve been there.
I found myself solitary and needy in the day time — I needed a fresh lover
– but I continued trying because I had hardly any
other decision. If you’re an individual man who would like
to hookup with attractive ladies without likely to those locations in which the females are
alone, this write-up may just change your existence.
It can clarify why online dating on-line is the best choice if you’re a male that is shy to approach a lovely girl inside a bar or team.
Thanks for sharing post
Great post. Thanks for writing it.
gutter cleaning Kallangur
Thanks for this great information.
tree removal Hobart
Thanks for the detiled article
elinizde olan hurdaları aynı gün değerinde satmak için pendik hurdacı olarak bize ulaşabilirsiniz.
Thanks for this helpful content. I’d love to read this. I hope you do more of this. I’ll be seeking you time to time. Personal Trainer
Asya spot her çeşit kullanılmış eşya alınır. Bugün arayın hemen ümraniye ikinci el eşya alanlar gelip alalım.
profesyonel olarak piyasada bütün hurdaları satın alıyoruz. çatalca hurdacı aynı gün hizmet verir.
ikinci el cafe mutfak malzemeleri alımı
Ağır yük hafif yük ikinci el depo raf sistemleri hizmetleri
bir çok kişi hurda işi aylık kazancı merak etmektedir. Öğrenebilir ve konu hakkında bilgi alabilirsiniz.
Süslü Metal olarak, hurdacılık sektöründe kaliteli ve güvenilir hizmet sunmaktayız. Hurda bakır, demir, alüminyum, sarı, çinko, krom ve kablo çeşitlerinde, müşterilerimize yüksek fiyat ve hızlı nakit ödeme garantisi veriyoruz. Her türlü metal hurdasını adresten alarak hızlı ve pratik çözümler sunuyoruz.