Ribbon Customization: Changing Placement, Look and Behavior
One of the biggest features of SharePoint 2010 is the Office Ribbon. Whether you love it or hate it, it’s here to stay and eventually you will be faced with the choice of including the ribbon within your site branding. What can be edited and changed in the ribbon? Microsoft spent millions, if not billions of dollars to research and develop the ribbon so how much should we change?
Just because we can…does it mean we should?
I was recently at a meeting with one of our clients and a Microsoft rep. The client was having a hard time grasping the concept of the SharePoint Ribbon and its role in editing, administering and browsing a site. The discussion went back forth. Eventually everything was sorted out but it got me thinking…the new ribbon is quite the mental hurdle and this discussion is bound to repeat itself as 2010 adoption grows.
I also realized the impact that the ribbon is going to have on branding. With SharePoint 2007, if you had the skills, you could essentially make SharePoint look any way your heart desired. As long as you included the “site actions” and other essential one click menus you could design and layout SharePoint as you wished.
In SharePoint 2010, the ribbon is static at the top the screen and it never scrolls. It plays a massive part in usability and administration. I am always on the quest to customize SharePoint to a point beyond recognition, but how far can I alter the ribbon?
My Mission: To brand a 2010 site to my hearts content AND alter the look and feel of the ribbon making sure that it retains all previously established functionality and usability.
The Rules: Just using CSS, Javascript and a custom Master Page. No Server Side Code. I’m not adding functionality. I’m just altering the look and feel.
The Design:Whoa! What did I do?! The ribbon isn’t at the top! What’s the reason for this? Well… I wanted to put more emphasis on the sites title and navigation; separating the two. This will allow my creativity to flourish because the ribbon is now it’s own entity. I can now focus on the design of the site as if it were a typical website; not having to worry about about my design functionality and its ability to mesh with the fixed ribbon on the top.
This image illustrates how I have removed the content from the “browse” tab and made it static, above the ribbon. If you were to click the browse button the ribbon will now just collapse.
As far as the design of the ribbon goes, I have just changed the colours, added the ruler background and rounded the corners all in an effort to align it with the look and feel I have chosen for the rest of the site.
Changing the Position of the Ribbon: I know that changing the placement of the ribbon seems like a daunting task, but in reality it’s just the tabs and actions of the ribbon in two controls. There are other items in the default ribbon and they do include the nav and title but once you understand what each control does, it’s not hard to pick it apart and move the pieces around.
Here is a breakdown of the essential controls laid out to better understand how it all works:
2 . <SharePoint:SPRibbonPeripheralContent Location=”TabRowLeft”>
3 . <SharePoint:SiteActions>
4 . <asp:ContentPlaceHolder id=”PlaceHolderGlobalNavigation”>
<SharePoint:PopoutMenu ID=”GlobalBreadCrumbNavPopout”>
<SharePoint:PageStateActionButton>
5 . <SharePoint:SPRibbonPeripheralContent Location=”TabRowRight”>
To move the pieces, we want to the correct zone so we simply move the following areas:
The Following code can be placed anywhere in your master page to change the location of the ribbon tabs and action icons.
<SharePoint:SPRibbon runat="server" PlaceholderElementId="RibbonContainer" CssFile=""> <SharePoint:SPRibbonPeripheralContent runat="server" Location="TabRowRight" ID="RibbonTabRowRight" CssClass="s4-trc-container s4-notdlg"> </SharePoint:SPRibbonPeripheralContent> </SharePoint:SPRibbon>
Changing how the Ribbon looks: Just like any SharePoint branding it takes time and patience. To style the ribbon, I created a set of styles to work with the html that the SPRibbon Controls output. These styles are loaded last and override the initial default styles. In addition to these, I have used 3 background images to attain my design.
/* Removes the original background from the ribbon */
body #s4-ribboncont{
background-image:none;
margin-top:10px;
}
/* Globally set all the background colors to transparent and remove background images / borders */
#s4-ribbonrow,
#s4-ribbonrow *
{
background-color:transparent !important;
background-image:none;
border-width:0px;
}
.s4-ribbonrowhidetitle{
height:inherit !important;
}
/* After globally turning off borders.. turn back on the separators for the large icons*/
.ms-cui-groupSeparator {
border-right:1px solid #E7E7E8 !important;
}
.ms-cui-topBar2{
border-width:0px;
}
/* Set the background for the tabs at the top (Browse / Page) */
.ms-cui-ribbonTopBars{
background:url('../img/ribbon-top.png') no-repeat !important;
padding-top:0px;
padding-bottom:5px;
}
/* Set the background for the bottom part of the ribbon */
.ms-cui-tabContainer{
background:url('../img/ribbon-bottom.png') no-repeat !important;
padding-bottom:5px;
position:relative;
top:-6px;
}
/* Set the background for the additional dynamic tabs (Web parts / Lists ect) */
.ms-cui-cg-i{
background-image:url('../img/ribbon-tab.png') !important;
background-position:bottom left;
background-repeat:no-repeat !important;
height:20px;
margin-bottom:2px;
}
.ms-cui-cg-db .ms-cui-cg-t{
height:17px;
background-image:url('../img/ribbon-tab.png') !important;
background-position:bottom right !important;
background-repeat:no-repeat !important;
margin-left:4px;
}
.ms-cui-cg-t-i{
color:white;
font-weight:bold;
}
.ribbon-wrapper{
position:relative;
}
/* For use with the next step! read on! */
.fixed-ribbon{
position:fixed;
top:0;
width:950px;
z-index:21;
}
Have a look at the background images to give you an idea how I did it.
ribbon-top.png
ribbon-bottom.png
Changing how the Ribbon behaves: Now that I have the ribbon in the correct location and it’s styled to my liking, I have one last step. The ribbon was designed to always be visible. That’s why it’s fixed at the top of the screen. An example of this would be a content editor web part at the bottom of a page. You scroll down to the bottom but the controls to edit, change fonts and add links are in the header and would not be visible. I have now taken the ribbon from the fixed position at the top of the screen and have included it in the master page as a relative HTML box that scrolls.
With some jQuery we can overcome this inherent problem by toggling the ribbon to become fixed when the page scrolls to a position where the ribbon would be out of the viewable area.
*Note: This assumes that the ribbon has been placed in a custom div with the class of “ribbon-wrapper”
// This is written in jQuery.
// This piece of code will toggle the ribbon from a fixed position to a relative position based on the viewable area in the browser
// When the Window Scrolls
$(window).scroll(function () {
// The Current Window in an object
var jWindow = $(window);
// If the Ribbon is turned on...
if(hideRibbon != true)
{
//If the top of the page is over 145 pixels scrolled then...
if(jWindow.scrollTop() > 145)
{
// Set the height of the ribbon box and toggle it to fixed.
$(".ribbon-wrapper").css("height", $("#s4-ribbonrow").height() + "px");
$("#s4-ribbonrow").addClass("fixed-ribbon");
}
//If the top of the page is less than 145 pixels scrolled then...
else if(jWindow.scrollTop() < 146)
{
// Remove the set height and toggle it back to relative
$("#s4-ribbonrow").removeClass("fixed-ribbon");
$(".ribbon-wrapper").removeAttr("style");
}
}
});
Last but not least, since I have now removed the title from being displayed in the ribbon when “browse” is selected, let’s collapse the ribbon to only show the tabs.
// If there aren't any buttons in the ribbon don't display the box.
hideRibbon = true;
// The the Ribbon is loaded in the DOM
$("#RibbonContainer").ready(function(){
// Loop through the children of the ribbon icons. And if you find a child, set the flag to false.
$("#s4-ribboncont .ms-cui-tts li").each(function(){
hideRibbon = false
});
//If the flag was never triggered (no icons were found) then hide the ribbon box.
if(hideRibbon)
{
$("#s4-ribbonrow").hide();
}
});
Conclusion: Branding the ribbon is not for the faint of heart. As you can see it takes a lot of time and effort. I know that the ribbon was never meant to be branded or moved but I really do think that we can’t fully establish a custom look and feel until everything has been branded.
Being able to change the location and design of the ribbon to a safe level of customization will satisfy those of us on the eternal quest to make SharePoint our own…for ourselves and for our customers.
March 5th, 2010 at 5:21 am
Looking good!
March 5th, 2010 at 5:00 pm
Great Post!
A quick question for you and perhaps a good subject for a brief blog; I want to just show the and the near my site logo, then hide the ribbon so it doesn’t take up any space on the page. Have you any idea how I might go about this?
March 23rd, 2010 at 6:19 am
Looks very good indeed! Damn!
March 26th, 2010 at 3:33 am
this looks great. Could u please attach the master page and required files to download??? That would be great
April 14th, 2010 at 2:09 am
Awesome article Tom!
I am precisely working on a couple of things you point out in regards to the Ribbon.
In my case, the SharePoint 2010 site will be public facing, it was decided that the Ribbon will not be shown (Alerts is at least one functionality that will not be shown). In order to accomplish this (not showing the Ribbon for anonymous users), we used the SPSecurityTrimmedControl to wrap all the Ribbon divs inside, specified the permision strings and that did it.
I will be doing a blog post on this soon, and hopefully is not too late for Wes who seems to be interested in doing this.
Keep up the great work!
-Oscar
May 5th, 2010 at 12:14 pm
Wow, that looks great. Are you going to post a sample .master and .css?
May 13th, 2010 at 1:57 am
Fantastic post really interesting. I am trying to replicate something similar using your steps and each time I add the JQuery library to the master page SharePoint bums out .. Site Actions do not work etc… The ScriptResource.axd starts giving errors saying object form not found. Any Ideas?
May 13th, 2010 at 2:05 am
Problem solved .. it seems you can’t load the scripts with a self closing script tag I.E. ; it has to be … phew
May 13th, 2010 at 3:56 am
One last thing the hover states do not seem to work for the “ms-cui-ctl-large” have you noticed this?
May 26th, 2010 at 1:36 am
[...] called ICC here that described a method of dynamic flyout anchors. Another post described here by Tom Wilson described how we could change the look and feel of the ribbon to fit the internal company [...]
May 31st, 2010 at 2:11 pm
[...] sent Marcy and me a note pointing to an article by Tom Wilson: “Guys just read Tom’s post on this . I think you should do something similar too to stand out from the [...]
June 3rd, 2010 at 8:23 am
Excellent Article… Sharepoint 2010 in the real world! Thanks.
June 9th, 2010 at 8:56 am
[...] post from Tom Wilson was also very helpful determining the elements that make up the new ribbon, Ribbon Customization: Changing Placement, Look and Behavior. The following is just a table of the CSS overrides that you may like to use to modify some of the [...]
June 21st, 2010 at 6:30 am
Its really helpful, TOM could you please post the images used for the controls
June 23rd, 2010 at 10:06 am
Are you sure that making the ribbon fixed width that you are not losing options. For instance when i changed the width to fixed width -> when you go to a calendar and click on the events in the tab – > the tabs ribbon loaded….. what wasn’t obvious was that some tab options floated below the ribbon to start a second line. A user may not notice you were missing options if not fully familiar with the ribbon. The ribbon behavior of collapsing options when you resize your browser smaller doesn’t seem to work for me when I put fixed width on the ribbon.
July 2nd, 2010 at 7:26 am
When I use the ribbon within the relative position, ribbon is at the top floating, then the flyout menus do not work. Does everyone else have this problem?
July 7th, 2010 at 9:00 am
great posting. I am trying to just expand the height of the SPRibbon in its default location.
you mention *Note: This assumes that the ribbon has been placed in a custom div with the class of “ribbon-wrapper”.
Do you have any resources you can point me too that shows I can create a custom div? or do you know of an easy way to expand the height? I have tried to drag the zone and do this via styles (body#s4-ribbonrow) but no luck
thanks
July 7th, 2010 at 9:14 am
great article – but where does the jQuery code go?
July 11th, 2010 at 11:04 pm
[...] Pages http://technet.microsoft.com/hi-іn/library/cc263203(en-υѕ,personnel.14).aspx http://styledpoint.com/blog/ribbon-customization-changing-residency-look-аnԁ-behavior/ http://blog.drisgill.com/ http://www.nonlinearcreations.com/whitepaper/index.asp?id=17 [...]
July 21st, 2010 at 6:10 am
Great article on 2010 branding which I’m now tasked with, we’d like to move the ribbon and I’ve tried to follow your sample with the jquery code etc but it just turns to shit when I’ve finished!
I put the “ribbon-wrapper” around the ribbon and this just seems to cause display issues i,.e. it becomes invisible.
Just wondering if you could post a sample master?
Thanks
Dan
August 11th, 2010 at 1:37 pm
Hi, have you had any problems with this and IE 7?
August 20th, 2010 at 5:06 am
Great article, very detailed! Just one thing seems to be missing though: ribbon-tab.png
September 3rd, 2010 at 12:29 pm
Hi! Can you please post the master page and css for this? It’s awesome!!!
September 9th, 2010 at 10:00 am
I just discovered something that might be of interest to someone – the Browse tab is not physically connected to what looks like the tab contents – if you comment out the entire .s4-title div then the ribbon actually collapses when you switch to Browse. I reckon the main nav and search box can also be moved out so they don’t get hidden when you change tab (but so far that causes a JS error for me).
of course some of this will have to be displayed somewhere, but not necessarily within the “Browse” tab of the ribbon. Now to figure out how to rename ‘Browse’ to ‘Close’ or something
September 9th, 2010 at 10:00 am
Great article by the way!
September 12th, 2010 at 5:36 pm
[...] stuck with the ribbon as is. I found a great blog showing how to update it. Check it out… http://styledpoint.com/blog/ribbon-customization-changing-placement-look-and-behavior/ Possibly related posts: (automatically generated)We are very much alive!Travel BlogTwitter is [...]
September 21st, 2010 at 4:23 pm
Great writeup Tom! I’ve learned some good tips from this post. But, I noticed that the background of the Site Actions dropdown menu is also set to transparent by the tweak on s4-ribbonrow. How can I put it back just for the Site Actions menu?
Thanks!
October 4th, 2010 at 2:23 pm
Awesome, been trying to get a master page branded wihout using a custom master page, this gives me some great pointers!
October 4th, 2010 at 7:07 pm
Good work Tom … definitely the best looking sharepoint site i have seen
October 26th, 2010 at 11:12 am
hi Tom
is it posible to get masterpage example of this blog. It’s very very nice
October 27th, 2010 at 12:53 pm
When i try to enter
I get the error
The ID ‘RibbonTabRowRight’ is already used by another control.
Can anyone explain this to me?
October 27th, 2010 at 12:54 pm
When I try to enter the code to change the location of the Ribbon i get the Error
The ID ‘RibbonTabRowRight’ is already used by another control.
anyone else get this?
October 28th, 2010 at 1:09 pm
*Note: This assumes that the ribbon has been placed in a custom div with the class of “ribbon-wrapper”
How do i place my ribbon in a custom div?
sorry if this is super beginner im new to branding
November 13th, 2010 at 9:30 pm
Hi. This is truly amazing. I have spent hours trying to get it to work and run into different problems.
I know you are busy – please if I may ask just two questions:
1. Is there any place, site, book I can get a copy of the master page and css used in your example. EVen if it could be just the master page so I can study it.
2. Did you start off with a publishing site in 2010 or a minimal site using one of drisgall’s minimal start pages?
Thanks for any help,
Charles
November 19th, 2010 at 2:33 am
Greetings I recently finished reading through your blog as well as I’m very impressed. I actually do have a couple queries for you personally however. You think you’re thinking about doing a follow-up publishing about this? Will you be going to keep bringing up-to-date as well?
December 7th, 2010 at 12:19 pm
I’d love a copy of your master page and css if you are willing to send
December 20th, 2010 at 11:03 pm
Tom,
Great Post but….
Firstly as you have not replied to any comments I feel asking something maybe futile. As a blogger you must be prepared to read and follow up on the comments on your blog. It has left many of the questions posted in limbo.
I have a similar design to yours, fixed width, banner at top and fixed ribbon. However I find when editing long pages the fixed ribbon is a pain. I removed s4-workspace from my master, basic rukle of fixed width sites. However this removes the floating behavior of the ribbon. In Edit mode, I want it to float at the top not scroll with my content out of visibility. Is this was your design does? How can I float it in dialog mode (edit) and retain the non scroll bar features of a fixed page?
Thanks
Dave
January 9th, 2011 at 12:49 pm
Can anyone tell us where the class “.ms-cui-cg-db .ms-cui-cg-t” is actually being called from? I don’t see it in any of the Master pages so I am assuming it is from Javascript…
Thanks in advance
January 20th, 2011 at 5:20 pm
it was a great article but i didnt get i to work, there were a few issues witht is solution, can you put the code on a zip to see if i get the same issue. i had javascript issues.
February 1st, 2011 at 1:18 pm
[...] Ribbon Customization: Changing Placement, Look and Behavior – Tom Wilson, Styled Point [...]
February 10th, 2011 at 9:35 am
Thanks for posting. I, like others, would love to see the demo and have a zip of the needed files. Can you explain how you handled the “Edit Webpart” property window that seems to open as a new column in a table within the workspace. I pushes my design beyond the 960px width. Thanks for any advice you can provide!
February 22nd, 2011 at 8:50 pm
Dear Tom,
As I am a SharePoint beginer, I would be pleased to get the source of this great whitepaper too.
Many thanks for that.
February 23rd, 2011 at 4:50 pm
Does anyone have a working example of this modification? I have been trying to work with this on my intranet but I’m having several issues with the drop-down menus. For example, if I expand the Site Actions menu and then scroll the page the Site Actions drop-down menu repositions itself. I’d love to see a complete example if anyone has one. Thanks!
March 29th, 2011 at 4:28 am
Wow, thats one amazing post, for you for all the info!
March 31st, 2011 at 3:27 pm
Hi Tom,
Came across this while reading about hiding ribbon buttons. Great Post. Hope all is well.
Cheers!
April 4th, 2011 at 4:14 pm
I’m a newbie, so I’m sure it’s me.. When I add the code to move the ribbon, I get an error that says it already exists. What am I doing wrong.
April 4th, 2011 at 5:46 pm
This does not work for me. Maybe someone else has gotten lucky. Has anyone gotten this to work? Is the OP even active anymore? I am attempting this with Sharepoint 2010. sadface etc….
April 13th, 2011 at 1:59 pm
great post, do you have source code?
April 28th, 2011 at 1:19 am
Hi,
Please tell me how to add Tab in SharePoint 2010 using Share point designer
June 14th, 2011 at 7:58 am
Hi, Thanks for this article it is awesome. I am trying to create page like your, I need Publish site, team site and Mysite/My Profile in same layout with easy navigation. Could you please guide me how can i have same? As i can see in other comments every one want to haves you master page Please provide us the same. Thanks
June 29th, 2011 at 3:34 am
Seems a very nice thing to do…But i could not get it to run properly. could you post or send the images and the code file for me.
September 20th, 2011 at 2:20 am
Hi, I’ve just started with SharePoint 2010, Is there a eazy step by step way to brand a master page? like example: how to align the horizontal navigation bar centre and changing the color?
regards
October 4th, 2011 at 1:46 pm
[...] http://styledpoint.com/blog/ribbon-customization-changing-placement-look-and-behavior/ [...]
October 12th, 2011 at 4:15 pm
[...] está bastante bien explicado en este enlace, intentaré traducirlo [...]
October 17th, 2011 at 10:22 am
[...] SharePoint Branding and Design – Tom Wilson » Blog Archive » Ribbon Customization: Changing Plac…. [...]
October 31st, 2011 at 8:14 am
[...] Nava 0 Comments SharePoint 2010 Ribbon Customization, Changing Placement, Look and Behaviour http://styledpoint.com/blog/ribbon-customization-changing-placement-look-and-behavior/ Share this:MoreLike this:LikeBe the first to like this post. SharePoint 2010 [...]
November 14th, 2011 at 7:22 am
[...] http://styledpoint.com/blog/ribbon-customization-changing-placement-look-and-behavior/ [...]
December 9th, 2011 at 9:49 pm
[...] http://styledpoint.com/blog/ribbon-customization-changing-placement-look-and-behavior/ Share this:TwitterFacebookLike this:LikeBe the first to like this [...]
December 10th, 2011 at 12:58 am
[...] Ribbon Customization: Changing Placement, Look and Behavior- Tom Wilson, Styled Point [...]
February 17th, 2012 at 2:23 am
enna koduma sir eathu ;-(
March 2nd, 2012 at 4:21 pm
Dear God! Thank you so much for this!
March 7th, 2012 at 6:35 am
How to apply custom format to your sharepoint site?
I mean how to apply custom design to our site in sharepoint 2010 rather than default design?
March 15th, 2012 at 12:37 pm
That’s a big question. I think maybe you need to start with a SharePoint branding 101 book. Just look on amazon for “sharepoint 2010″ and “branding”. Get the book by Randy Digswell.
March 16th, 2012 at 11:29 am
New to SharePoint and in the process of branding a new site. Where do I put the JQuery? And where do I put this // If there aren’t any buttons in the ribbon don’t display the box.
hideRibbon = true;
// The the Ribbon is loaded in the DOM
$(“#RibbonContainer”).ready(function(){
// Loop through the children of the ribbon icons. And if you find a child, set the flag to false.
$(“#s4-ribboncont .ms-cui-tts li”).each(function(){
hideRibbon = false
});
//If the flag was never triggered (no icons were found) then hide the ribbon box.
if(hideRibbon)
{
$(“#s4-ribbonrow”).hide();
}
});
March 28th, 2012 at 3:22 am
I like your Post very much and It is very interesting. I will use this Info to Develop the SharePoint Applications. Thanks for share this valuable Information.
May 9th, 2012 at 4:25 am
[...] anyone want chage the ribbon UI then go through this link link Share this:TwitterFacebookLike this:LikeBe the first to like this post. By vchilukuri [...]
May 11th, 2012 at 11:06 pm
Love the post! Trying to brand the schools Intranet and can’t get it to work because I am a SharePoint Noob. Any chance of the required files?
June 6th, 2012 at 3:21 pm
I have something in the pipe for people like you in the near future.
June 6th, 2012 at 8:16 pm
That would be awesome!
January 2nd, 2013 at 6:35 pm
I am attempting to use this on a 2013 site, but I am not sure if it works for that, do you know?
January 3rd, 2013 at 8:02 am
It actually isn’t written for 2013 and I doubt it will work there.
Sorry!
If I had time I would write a new article for 2013.