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:

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.

This entry was posted on Tuesday, January 12th, 2010 at 12:48 pm and is filed under CSS, SharePoint 2010, jQuery. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.