In SharePoint 2010 the new ribbon bar (or Fluent UI as they call it) is great when you need to Author a site, but looks rather ugly and “SharePointish” for internet facing sites.  After all who wants to see this at the top of their pages?

image

As such I often have to remove it from the UI.  I have found that the best way to do this is through the CSS style sheets and a little SPSecurityTrimmedControl magic in the site Master Page.  Here are the steps to quickly and easily remove this bar for people who are not authoring on the site:

  1. Open your SharePoint master page
  2. Locate this line:<div id="s4-ribbonrow" class="s4-pr s4-ribbonrowhidetitle">
  3. Change it to:<div id="s4-ribbonrow" class="s4-pr s4-ribbonrowhidetitle" style="display:none">
  4. Now find the end of the “s4-ribbonrow” tag and add following block right after it:
    <Sharepoint:SPSecurityTrimmedControl ID="SPSecurityTrimmedControl2" runat="server" PermissionsString="AddAndCustomizePages"> 
    
    <script type="text/javascript"> 
    document.getElementById("s4-ribbonrow").style.display = "block";
    </script>
    
    </Sharepoint:SPSecurityTrimmedControl>
  5. Save the new master page and publish

And as simple as that, the ribbon bar is now hidden from all visitors who don’t have the ability to edit pages, including those who are coming in Anonymously.