Disabling the SharePoint 2010 ribbon

Oftentimes, web designers need the entire screen to really pull out all the stops on a web design for a customer. This is especially true of public, consumer-facing web portals.

SharePoint 2010 presents a wonderful tool at the top for managing content called the ribbon. However, it is in the way, and public, anonymous users don't generally need the ribbon. That space is more valuable presenting a message to a customer than in providing technical functions to someone that doesn't need them.

So, how do you get rid of it? There's no way to simply disable it out of the box. To do so requires the typical UI customization approach to making SharePoint 2010 sing. However, you can't get rid of it FOREVER or your customer won't be able to manage content. So, it's a little trickier than meets the eye.

So, let's get down to it.

First, you need a way to manage content, so plan accordingly. In the situation below, I'm going to assume that only the public, anonymous URL is going to need to have the ribbon disabled. I'm going to use the default zone of the SharePoint application to manage content. You could also deploy a third zone, an extranet, wherein your content managers could log in via Forms Based authentication and manage content.

So here we go:

1. Set up your application.
2. Deploy it to a public, anonymous zone - the Internet zone. You'll now have one application deployed to two zones - the default and the Internet zones.
   
3. Find the master page that drives the screens on which you need to hide the ribbon. If you have more than one master page in your site collection or solution you'll need to implement this solution for each one.
   
4. Add the following style to a stylesheet that is always included in the master page. (I avoid inline styles like the plague, and don't update the style sheets native to sharepoint or you'll get your fingers broken by the Best Practices Enforcement Bureau.)
   
   

   /* Ribbon row - hide by default - this is turned on in the master page jquery file for content editor access */
   #s4-ribbonrow{display:none;}

   
   *This setting turns OFF the ribbon row. It will ALWAYS be off unless you do #5.
   
5. Add the following code to some javascript that gets executed by your master page.
   
   

   var ribbonRow = document.getElementById("s4-ribbonrow");
   if(window.location.href.indexOf('www.yourawesomewebsite.com') == -1)
   ribbonRow.style.display = "inherit";

   This code will turn the ribbon ON if it does not contain the base url of your public site.

That's it! No "code". No custom assemblies. No screwing with base SharePoint components.

Now, at this point, you can see the fundamentals of how you might go about programatically turning it on and off. It's simple. You can add a UI element such as a button or link - even make it audience-aware, that toggles ribbonRow.style.display between "inherit" (show) and "none" (hide). Very slick. So, if you have a scenario say - on your intranet - where you have a large audience consuming the information only and others that need to update it via the same URL, you have a really slick option.

That's enough nerdy stuff for now. Back to my hole.