Ribbon Customization: Changing Placement, Look and Behavior

* Note: This post was created with SharePoint 2010 Beta and might be a little off. Just keep that in mind!

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:

1 . <SPRibbon PlaceholderElementId=”RibbonContainer”>
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.

79 comments

  1. Max

    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.

  2. Pieto

    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

  3. Pingback: Branding the Ribbon « Sladescross's Blog

  4. Pingback: Customizar Ribbon: Cambia el diseño, la ubicación y la usabilidad » .NET & MOSS

  5. Pingback: SharePoint Branding and Design – Tom Wilson » Blog Archive » Ribbon Customization: Changing Placement, Look and Behavior « Neptune Technology Solutions

  6. Pingback: SharePoint 2010 Ribbon Customization | Virtualize SharePoint and SharePoint Virtualization

  7. Pingback: Nilesh Rathod

  8. Pingback: Show Ribbon Permission based | Sharepoint Sriram

  9. Pingback: SharePoint 2010 Branding | Sharepoint Sriram

  10. Suresh Lakum

    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?

  11. Tom
    Author

    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.

  12. Kim

    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();
    }
    });

  13. Pingback: Ribbon Customization: Changing Placement, Look and Behavior | Sharepoint

  14. 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?

  15. William

    Ok so… I guess I am missing something when I try to do this or dont understand. You say to add this portion anywhere I would like the ribbon to be:

    Do i add just that or what comes in my master file?

    Also, I am calling in the newly created .css and jquery 1.7.2 as well as the jquery functions as so:

    $(window).scroll(function () {

    var jWindow = $(window);

    if(hideRibbon != true)
    {
    if(jWindow.scrollTop() > 145)
    {
    $(“.ribbon-wrapper”).css(“height”, $(“#s4-ribbonrow”).height() + “px”);
    $(“#s4-ribbonrow”).addClass(“fixed-ribbon”);

    }
    else if(jWindow.scrollTop() < 146)
    {
    $("#s4-ribbonrow").removeClass("fixed-ribbon");
    $(".ribbon-wrapper").removeAttr("style");

    }
    }

    });

    hideRibbon = true;

    $("#RibbonContainer").ready(function(){

    $("#s4-ribboncont .ms-cui-tts li").each(function(){
    hideRibbon = false
    });
    if(hideRibbon)
    {
    $("#s4-ribbonrow").hide();
    }
    });

    I also wrapped set 1 and 5 together as demostrated in the tutorial. However I’m doing something wrong. Is there any possible way you could assist?

  16. Tudor

    Hi Tom,

    I am trying to move the Ribbon anshave been following your guide however I am having a bit of an issue. When I place the first chunk of code () into the master page I get an error “The ID ‘RibbonTabRowRight’ is already used by another control.” For this code to work do I need to remove the old ribbon code from the master page?

    Also, any idea if this will work with the MySites?

    Thanks for a very helpful article.
    Tudor

  17. Parth

    Hi,
    I have 2 TABs in my page, Browse and Project, now i hide the project tab using the CSS, and it is working fine but still on page load project tab sectio is visible…

    can you please help me make BROWSE tab my default TAB..!!?

  18. Pingback: Useful links for SharePoint 2010 Branding « Inside Microsoft Technologies – Sunil Thotapalli

  19. bob

    I am a newbie in SharePoint and in the process of branding a new site. Where do I put the JQuery? And where do I put this

  20. Kristopher

    Yo, is this still relevant for 2013? I am trying to modify this process but so far no success!

  21. Kristopher

    I am attempting to use this on a 2013 site, but I am not sure if it works for that, do you know?

  22. Tom
    Author

    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.

  23. Martinez

    when I put your code into my master page to change the ribbon tabs and action it breaks and tells me that “it is not well formed?” what am I missing?

Leave a Reply