Fixed Width, Centered aligned SharePoint 2010 site. Updated!
I originally posted about a solution here, but now looking back this is not the best way to achieve this.
So here is a better solution!
*Update: Added a selector in the JS for Day and Night Master Page
Simply add the following in any CSS file / in the header of your master page.
#s4-bodyContainer {
width: 950px !important;
margin-left:auto;
margin-right:auto;
}
This will vertically align your site like so…
This example shows the width set to 950 but of course anything will work.
Bonuses!
Center align your ribbon!
/* Aligns the Top Bars */
.ms-cui-ribbonTopBars {
width: 950px !important;
margin-left:auto;
margin-right:auto;
}
/* Turns off the border on the bottom of the tabs */
.ms-cui-ribbonTopBars > div {
border-bottom:1px solid transparent !important;
}
This code will align the ribbon tabs keeping our 950 width in tact. like so…
Content with a larger width!
This little bit of code will correct pages where the content is actually larger than the width of the site. I use jQuery in this example so you will have to include it’s library!
An example of a page where the width is too much.
The Fix:
$(document).ready(function(){
//Elements with the potential to be too wide.
elements = $(".ms-bodyareacell > div > *, .main-container > div > *");
leftPanelWidth = $("#s4-leftpanel").width();
//For each Elements
$(elements).each(function(){
//if it's wider than the side width
if($(this).width() > ($("#s4-bodyContainer").width() - leftPanelWidth ))
{
//Calculate the new width taking the left nav into account
newWidth = leftPanelWidth + $(this).width();
//Set the width!
$("#s4-bodyContainer").attr("style","width:"+newWidth +"px!important")
}
});
});
With this code it will rescale the page width to the content that is too big for it!
March 25th, 2011 at 11:16 am
Tom – Really, really nice work. Looking forward to following the rest of the series. Regards — Mark
March 29th, 2011 at 5:59 am
Hi Tom!
Really nice solution! I was using your previous solution but there were many side effects so finally I opted for centering the content but not the ribbon. I didn’t think about centering the content of the ribbon
, but clearly I think it’s the best solution without breaking any of the SharePoint behaviors.
For the jQuery solution you propose for the content, would it not rather be possible to add an horizontal scrollbar ONLY to the content? (not to all the page, because it would not be very good-looking!).
Thanks again for this very good idea
.
Bastien
March 29th, 2011 at 10:42 am
@Mark
Thanks Mark =)
@Bastien
Thanks!
As for your question.
Sure you could add a horizontal scroll to the Content Area.
I guess it’s preference or project requirements.
Personally I don’t like it. I feel like it would be too constraining.
Scrolling in a little box. I would prefer to see all my data at once if I can.
March 31st, 2011 at 6:19 am
Hi Tom,
I follow your site with interest. Great stuff. I was just implementing this solution (page overflow script) and I am getting jscript errors back from IE. The error is referencing the following line:
if($this).width() > ($(“#s4-bodyContainer”).width() – leftPanelWidth))
Any ideas on the fix?
Thank you for the post!
Regards,
Tim
March 31st, 2011 at 8:39 am
@ Tim
Hey Tim! Thanks for following. I REALLY appreciate it. Makes the work worth it.
I tried this solution in IE7, 8, 9 and didn’t see the error?
What version of jQuery are you running?
What version of IE are you in?
Are you getting the error on every page?
March 31st, 2011 at 9:09 am
Hi Tom,
Here is the information you requested:
Browser= IE7
Library = 1.5.1-min
Because I pasted the inside the master page, we are getting throughout the site.
Thank you so much for any thoughts you may have.
Sicnerely,
Tim
March 31st, 2011 at 10:29 am
@Tim
I can’t recreate this error.
I have tried different machines and everything.
My gut tells me it’s either something in your master page, maybe missing some html elements.
In my tests I have my jquery include (1.5.1 min too) and script tag in the header.
Can you maybe post the specific error.
Besides that I’m at a loss.
March 31st, 2011 at 11:01 am
Hi Tom,
I figured out the error (I think). In the cut-n-paste from the code window above I somehow was missing one if the semicolons. My apologize for wasting your time. I certainly appreciate your responding.
Unfortunately though, the page still doesn’t expand based on content. I do have a custom master and CSS however I have confirmed that the elements you reference in your code are used in my custom master page as well. Odd, since I am no longer getting any errors.
Thank you again for all your help and your blog!
Sincerely,
Tim
March 31st, 2011 at 11:07 am
@ Tim
Glad you got it figured out.
My guess would be that you might need to add the element that has potential to grow wider to the “elements” array in the query code.
Simply add a “,” and your new selector of the element that can get too wide and it should now be included in the width check.
Hope that helps!
April 5th, 2011 at 10:26 am
Man you the best. Thanks allooooot. Man.
Ill call you Sharepoint Kung Fu zen. Thanks once again man
April 14th, 2011 at 9:26 am
Hi all, i applied your solutions, thanks for this, but when i apply the masterpage in my site, i have the error message below
– An error occurred during the processing of /_catalogs/masterpage/v4_copy(1).master. The server tag is not well formed. —
Thanks in advance
April 14th, 2011 at 11:33 pm
Hi,
I am having trouble with the resize thing.
I have added the .js for jquery at the top of my master page, and added your javascript inside tags in the head, but still no luck.
April 16th, 2011 at 12:05 am
Hi Tom,
I have followed the guide to the letter, but the jQuery part is not working for me. this is what i have inserted inside the head section:
$(document).ready(function(){
//Elements with the potential to be too wide.
elements = $(“.ms-bodyareacell > div > *, .main-container > div > *”);
leftPanelWidth = $(“#s4-leftpanel”).width();
//For each Elements
$(elements).each(function(){
//if it’s wider than the side width
if($(this).width() > ($(“#s4-bodyContainer”).width() – leftPanelWidth ))
{
//Calculate the new width taking the left nav into account
newWidth = leftPanelWidth + $(this).width();
//Set the width!
$(“#s4-bodyContainer”).attr(“style”,”width:”+newWidth +”px!important”)
}
});
});
April 16th, 2011 at 1:11 am
hi my comment keeps diappearing
i am having teouble with the jquery could you please provide a master page file download?
April 27th, 2011 at 12:44 pm
Superstar!!
I thought I was going to have to work this out for myself.
Cheers for posting.
May 25th, 2011 at 1:32 pm
Great website! I having issues with the jQuery code keeping the expanded width in IE8 or 9. When the page loads, the width is expanded to an appropriate size, then quickly shrinks back to the size defined as the #s4-bodyContainer width. This does not happen in Firefox or Chrome. Any ideas?
June 6th, 2011 at 12:34 pm
Tom,
Setting the s4-bodyContainer width seems to affect dialog windows also (clicking ‘Add new item’). Do you know if it is possible to set the width of s4-bodyContainer without affecting the size of dialog windows?
Thanks,
Seth
June 7th, 2011 at 12:41 pm
Great article! I got the list working but when I am on a page with images that are wider than the set width, it doesn’t seem to handle that. Any idea?
June 13th, 2011 at 1:23 pm
Also I noticed that as soon as I did a F5 on IE8, it will loose the fixed width and return to using full width.
June 15th, 2011 at 2:05 pm
Hey Tom,
Thanks for the huge help! I am helping my company creating their sharepoint site and I’ve copied the v4.master page and customize a little bit. Now I want to re-design our site and center all the content in the middle with the fixed width. But I have no idea how to open my CSS file of the master page. It didn’t seem right if I directly copy the codes into the .master page.
Thanks so much!!!!
June 22nd, 2011 at 3:39 pm
I think i figured out your issue Tim. I think this might be caused by the first line. I got an error of “object doesnt support this property or method” right away when i made a .js for the bit about fitting content to width.
my fix:
replace
________________________________
$(document).ready(function(){
________________________________
with the following
________________________________
jQuery.noConflict();
jQuery(document).ready(function ($) {
________________________________
this worked for me. might be a totally different issue. i just know that as soon as i switched that i no longer got any sort of error in ie.
July 12th, 2011 at 12:18 pm
Tom,
Thanks for much for this post. I was looking for this since long time.
I’ve no idea where I can add this code. I mean that code for ” code it will rescale the page width to the content that is too big for it ”
It would be gr8 if you specify which steps need to be follow in order to get Fixed With Master Page.
Thanks,
August 16th, 2011 at 9:59 am
HI
I am working on something similar to what you achieved.
What do you mean by this statement
“*Update: Added a selector in the JS for Day and Night Master Page”
Also where do i put the rescaling code.
Thanks,
Zameer
August 24th, 2011 at 9:17 am
Personnaly I prefer the older way
September 5th, 2011 at 5:37 am
Legend, simple and elegant, works a charm, many thanks.
September 30th, 2011 at 6:04 am
Hi there
I need to customize wss 3.0 sharepoint site like 2010. I only need to make web page at center regardless of screen size. Is that possible? if that so, please guard me or share a link how to do it. Thank you so much.
ngelay44(at)mail(dot)ru
October 25th, 2011 at 3:26 pm
Hi Tom,
I am very new to sharepoint and trying to work with the content being too wide issue. I followed all the instructions but the display doesnot change. I Attached the jquery-1.6.4.min.js to the root site and added the following to master page:
$(document).ready(function(){
//Elements with the potential to be too wide.
elements = $(“.ms-bodyareacell > div > *, .main-container > div > *”);
leftPanelWidth = $(“#s4-leftpanel”).width();
//For each Elements
$(elements).each(function(){
//if it’s wider than the side width
if($(this).width() > ($(“#s4-bodyContainer”).width() – leftPanelWidth ))
{
//Calculate the new width taking the left nav into account
newWidth = leftPanelWidth + $(this).width();
//Set the width!
$(“#s4-bodyContainer”).attr(“style”,”width:”+newWidth +”px!important”)
}
});
});
to the ehad section and nothing happens. Am I missing something here..
Thanks in advance..
November 14th, 2011 at 4:04 am
[...] http://styledpoint.com/blog/fixed-width-centered-aligned-sharepoint-2010-site-updated/ [...]
December 6th, 2011 at 9:37 pm
I want the ribbon to be visible to all users on my site, however, I don’t want to add \domain users to the contributors group. Is there any way to make the ribbon always visible so that it will show the user that is signed in but not add the users to the contributors group?
December 6th, 2011 at 9:39 pm
maybe I’m saying this wrong…If I’m signed into the site with my AD account(I’m a domain admin), then I’m able to see the black toolbar at the top of the screen and it shows me logged in…I want everyone to see this.
December 8th, 2011 at 5:12 am
Working fine – but not on webparts pages – how do I make them follow this ?
Regarding the jquery – got a action.js imbedded in the master page – do I just paste the funtion inside this or do I need to put a tag around it ?
January 3rd, 2012 at 11:01 am
Hi guys im pretty frustrated here!! because I see all this comments about how happy everybody is about the fact that you guys managed to center align your websites. Now im trying the same thing, but still the website remains aligned left, what am I doing wrong:
i’ve tried 2 things:
1: I inserted the code you gave to us in the corev4.css (also tried the core.css) I had put the code at the top of the file, saved it and went to check upon the results. (modified it in the folder C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES and i tried to modify the one shown in SharePoint designer under styles + i tried an self created one)
2: done the same thing as I did in the first option shown above, only this time i modified default.aspx instead of a css file. (modified default.aspx in SharePoint designer)
Maybe you guys can see the mistake I made, because I cant see it ?!?! maybe i choose to modify the wrong file or something or from the wrong location
im using SharePoint server 2010 and SharePoint designer.
thanks in advance.
Kevin
January 3rd, 2012 at 11:25 am
Hey Kevin,
First, Don’t put the css in corev4.css AND don’t ever modify files in the 14 hive!
At the very least you should put a css file in your /Style Library/ and then open the master page in SharePoint designer and include the file.
Just to get it working try putting a STYLE tag right before the closing HEAD tag right on the master page with the code above.
You should see the changes reflected.
Thanks
Tom
January 3rd, 2012 at 11:55 am
Thanks Tom for your quick reply I will have a look at it tomorrow and then I will give you a headsup about my progression with this issue.
but just to be clear: I take a self created css file, put it in designers style libary and then I open (in my case) default.master i connect my css with it (how do i do that?)
and than the STYLE tag right before the closing HEAD tag right on the master page (im sorry, maybe im thinking to difficult, but I just dont understand that part)
Thanks again for your help so far.
Kevin.
January 3rd, 2012 at 1:31 pm
Hey Kevin,
Do either the css include OR the style tag fix to try and get it working.
I just recommended two options for ya to try.
This is how the LINK tag works.
http://www.w3schools.com/tags/tag_link.asp
Good luck!
January 4th, 2012 at 6:17 am
Thanks Tom your my hero
I did manage to center the page and create a background behind that page, but my luck with this things, always is bad.
Now I have a centered page, but it is only shown when i log on to the site with my account (the account that created the page) all other accounts see the old version of that page.
What the hell is going on? I have changed the pages more than ones and never had this issue before.
January 4th, 2012 at 8:23 am
Hey Kevin,
Glad to be of service!
You need to check-in the files you are working on. If you updated the master page make sure it’s approved too!
Thanks
Tom
January 9th, 2012 at 12:34 pm
Hey Tom,
the reason why the changes I made did not become visible were because I did not set the permissions right (atleast, “home visitors” can’t see it for some reason)
But now all is good
so thanks again.
Regards,
Kevin
January 20th, 2012 at 3:45 am
You are using both jquery and css for design purposes. Are you willing to use css as far as it can be done and only use jquery when it is impossible to do what you want with css or do you think that it doesn’t matter, that you can use jquery when it is convenient ?
I believe that jquery can be used but just when you have no other alterative (which you often have) to get the effect you want on the branding/design.
The reason I am asking is that I have seen too much of people using jquery just because it is much easier to override and get an impact but should the design really be defined in a javascript framework and not the css ?
February 6th, 2012 at 11:30 am
Like many of you, I was having issues getting the jQuery to work. I wasn’t getting any errors, it just wasn’t resizing to the content the way it was supposed to.
On a whim I removed the s4-workspace tag and it worked beautifully. Tom, maybe you missed a step in your instructions?
February 23rd, 2012 at 12:05 am
Hi Tom,
Thanks a lot for this post.
If we add any big image inside the content editor webpart then header and menu is not expanding auto.
Any idea?
February 23rd, 2012 at 8:39 am
Great stuff Tom – thanks for posting the article! Quick question, though – I’m using your CSS (but not the JQuery portion), but I’m also giving the body a fixed width so that the bar above the ribbon is the same width as the content. It looks nice but on dialogs or when editing a web part page, this takes away the scrollbar. Did you run into this problem as well, and if so, how did you get around it?
Thanks,
Jacob
March 15th, 2012 at 10:15 am
Hi Tom,
I’m new to sharepoint branding and facing same site sizing issue. I’ve uploaded CCLBranding.JS ( Jquery ) file to stylelibrary folder. I’m trying to refer same file in master page just below the corev4.js
<SharePoint:ScriptLink language="javascript" name="” runat=”server”/>
I’m getting error message like stating that “Cannot make a cache safe URL for “/CCLBranding .css”, file not found. Please verify that the file exists under the layouts directory.
Please let me know how to refer this file in master page.
March 15th, 2012 at 10:47 am
Thank you for posting this, I have it working after reading up on the comments.
I found a couple of things that will help other users:
Using 2010 SP and SP Designer I selected the v4.master file to edit.
I had to use the tag right before the tag to get the page to center and align correctly.
In SP Designer, under the Master Pages column on the left hand side, select the v4.master file, right click and “Set as default master page”.
Once I did this, the pages showed up in the site as expected.
March 15th, 2012 at 12:36 pm
Hey Jacob,
It’s hard to tell exactly what you are saying the problem is without seeing it but I think you might be setting the fixed width on an element too high in the DOM hierarchy. Try setting the fixed width of the ribbon to an element lower within the tree. Try setting the width with the .ms-cui-ribbonTopBars class.
March 15th, 2012 at 12:49 pm
Hi Sam,
Try something like this..
For JS..
Or this for CSS
March 15th, 2012 at 1:02 pm
Hey Magnus,
I agree with you.
Whenever I use jQuery (JavaScript) for anything in SharePoint I always use my dev tools to make sure the impact is minimal (Load time, ect)
And like you said there usually is a way to get what you want done on the server.
The only caveat is time. If the client asked to change or tweak something in SP and you only have 30 minutes. A quick jQuerying might be the best solution based on the situation. It’s easy to say that jQuery is bad and there are better ways, but a lot of the time in the real world isn’t not that simple.
In most cases when I use jQuery in SharePoint and then look at the loading times through firebug / Chrome inspector or IE Dev toolbar my code is hardly registered compared to the crazy amount of JavaScript SharePoint out of the box uses. If my code takes .1 milliseconds SharePoint is taking 3.5 seconds.
Thanks for the comment! I really appreciate it. Love the different perspectives!
Tom
March 21st, 2012 at 11:00 am
Hi Tom,
I’ve copied jquery file to C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033 folder as Test.js and refered the same Test.js in v4_copy.master page just below the core.js
My sharepoint team site is loading this jquery successfully but still Content with a larger width! problem persist.
Any help will be much appreciated.