Hiding the SharePoint 2010 Ribbon for Readers – A Proof of ConceptFebruary 5th, 2011
In SharePoint 2010 publishing sites, the ribbon is the new way of life for authors. However for readers, the ribbon provides very little, if any, functionality. A few days ago, I was asked about hiding this empty space by a client. Their current 2010 master page had the ribbon moved to a custom position on their publishing sites. They had also suppressed the breadcrumb/folder navigation in the ribbon; thus for a typical reader view, there was no ribbon contents that would be displayed. However, the space on the page where the ribbon would live for authors still remained as empty space!
We very well could have developed some server-side logic to determine the permissions of the user and hide that area completely based on that. Given infinite time and resources, I probably would have opted for that solution.
div tag containing the SharePoint out-of-the-box ribbon control. I investigated and discovered that, in the
nightandday.master file, the ribbon is contained in a
div with the ID
s4-ribbonrow. With that ID, I would be able to hide that
div based on its rendered HTML contents. I figured, for this example, that the existence of the text “Browse” would be enough to determine whether or not the ribbon had rendered something or not.
nightandday.master and it worked like a charm. Below is the relevant excerpt of
<div id="s4-ribbonrow" ...>
<!-- SharePoint out-of-the-box Ribbon Controls & Code goes here -->
var ribbonRow = document.getElementById("s4-ribbonrow");
if(ribbonRow.innerHTML.indexOf("Browse") == -1)
ribbonRow.style.display = "none";
I should note that I only was able to spend about 30 minutes on this entire topic. Please treat the above code as a proof-of-concept and make sure to evaluate the impact or effectiveness of this code in your own environment before using it.