Monday, July 11, 2011

SharePoint 2010 Ribbon Toolbar Styling

Fancy Colors: What, Why and a Little How

 

If you are asked to modify the out-of-the-box SharePoint 2010 ribbon bar, especially the toolbars that are dynamically rendered via custom JavaScript libraries, seriously reconsider. The benefits may not outweigh the time required for such an effort. The ribbon bar was developed, like most Office application ribbons, to be a universal user interface for users should they move jobs and need to use SharePoint in a variety of environments. Though it is possible to change an Office application's ribbon via VB script, I have never seen an implementation of custom application specific ribbons succeed.

Of course the SharePoint 2010 ribbon bar was heralded as an amazing feature of the latest and greatest from Microsoft. Believe me, I like the ribbon bar in all cases, except when I am styling it. Most clients are top-down thinkers who want their internet sites to look nothing like out-of-the-box SharePoint. With that top-down thinking, the first thing a client sees that needs changing is that darned ribbon bar. It is sitting top dead center of all SharePoint pages.

Okay, fine, ruin my weekend!

Before I start any ribbon toolbar styling job, I need the answers the following fundamentals:

What is the business case for changing this integral OOTB element? I think the boils down to thinking about who is going to see your ribbon toolbar in the first place. If you have a publishing site, most likely you will only have content publishers and approvers viewing your fancy ribbon toolbar in the first place, so it may not be worth the money to customize.

How far are you going with your ribbon toolbar styling plan? The most basic ribbon toolbar contains roughly 100 icons of various sizes from 32px to 16px in height. And these are sprites. Also the toolbar holds at least 7 dynamically displayed tabs, each with it's own specific icons and controls within. There may be more, I just haven't found them all yet. (Okay, I found number 8, which I will simply call Green!) The answer to this question must be:  not very far. 

Will your ribbon toolbar branding make your intranet more user friendly? As I mentioned in the opening paragraph, this ribbon toolbar is meant to mimic the similar ribbons in standard office suite products. With that said, you had better have great reasoning and superior UX skills, because I'll assume that Microsoft's R&D team did its due diligence on this aspect.

BySidePastes

Figure 1: Side-by-side “Paste” Icons from two distinct Office 2010 applications.  (The one on the left is from the SharePoint Ribbon Toolbar.)

 

The Ribbon Toolbar is declared on your master page, for example (pseudo with placeholders):

 

<div id="s4-ribbonrow" class="s4-pr s4-ribbonrowhidetitle">

  <div id="s4-ribboncont">

    <SharePoint:SPRibbon runat="server" PlaceholderElementId="RibbonContainer">

      <SharePoint:SPRibbonPeripheralContent runat="server" Location="TabRowLeft">

        <!-- site actions menu -->

        <!-- global navigation popout menu -->

        <!-- save button -->

      </SharePoint:SPRibbonPeripheralContent>

      <SharePoint:SPRibbonPeripheralContent runat="server" Location="TabRowRight">

        <!-- Welcome control -->

      </SharePoint:SPRibbonPeripheralContent>

    </SharePoint:SPRibbon>

  </div>

</div>

 

By default, there are two sections of the Toolbar web control container, defined within “SPRibbonPeripheralContext” controls, one for the left area and one for the right area. These contexts are used to define the expanding portion of the toolbar on the left and the “Welcome” dropdown menu on the right.   The Ribbon may looked fixed to the unassuming eye, but it will grow and shrink depending on the number of tabs showing and the size of the viewport.   For all intents and purposes, the left and right tabs in the Ribbon control grow from the left or right respectively.

 

DefaultStyleToolabar

Figure 2: Default OOTB “TabRowLeft”

In Figure 2, we see the Ribbon Toolbar in one of its expanded states.   The following tabs are being displayed based on a dynamic determination.  In this case we have the Editing Tools, Page Tools and Web Part Tools tabs open (which I like to refer to as Orange, Yellow and Purple).  The Editing Tools tab is selected overall and specifically the Insert sub-tab is selected underneath.  Also visible in Figure 2 is the behavior of tabs that are not selected, which have a gradient style fade effect.  The Toolbar will grow dynamically to the right, and all Toolbar Tabs will appear via client-side script in the TabRowLeft div.

 

ToolabarNoBG

Figure 3:  Default OOTB “TabRowLeft” without background color

For Figure 3, I disabled the default background color of the Ribbon Toolbar container.  As you can tell, chaos has ensued:

/* corev4.css line 2456 */

body #s4-ribbonrow {

  min-height: 43px;

  background-color: #21374C;

  overflow-y: hidden;

}

 

ToolabarNoBGCrushed

 

Figure 4:  Default OOTB “TabRowLeft” without background color and in a smaller viewport window.

For Figure 4, I merely shrunk the viewport (aka the “browser” window) to show how Ribbon Toolbar Tabs are dynamically scaled.  Client-side scripting dynamically assigns CSS classes to these tabs depending on viewport size. 

 

With such potential for mass destruction, Ribbon Toolbar styling can and should only be done if needed, and then using KISS methodologies.

 

Let’s suppose, for an example, that the fictitious Consumer Electronics Showplace (CES) wants to do away with the blue background color of their SharePoint 2010 deployment.   We are half-way there by overriding the “background-color” attribute on the “body #s4-ribbonrow” selector.   Okay maybe not half-way yet. 

The artifacts that exist with a simple tag change are mind boggling:

  • Unselected tabs are white on white text (as in Yellow and Purple from Figure 4.) .
  • The Site Actions button is white on white text.
  • Site Actions dropdown caret is white on white text.
  • The Welcome control (in “TabRowRight”) is white on white .
  • Hover over Site Actions and the hover style shows the default OOTB blue like the disabled background color.
  • Hover over on the Global Breadcrumb control shows the default OOTB blue as well.
  • Hover over on the Welcome control shows the default OOTB blue as well.
  • Browse and Page tabs are white on white text.

That’s a lot of CSS to change…