Working on a couple of public-facing 2010 sites hiding the ribbon has become an issue in each of them (I’ve noticed several public-facing 2010 sites that don’t hide the ribbon, but that’s not an option if you want a clean brand). Searching for the solutions turned up a couple of solutions, but neither solution in itself turned out to be the best option.
Searching I found this Technet forum post. In that solution it is a complete CSS solution using a control detecting anonymous and logged-in users. This solution works just fine, but I wasn’t happy with simply hiding the ribbon. If I didn’t need the ribbon why waste all that load time and HTTP requests to load it only to hide it?
This led me to look for another solution, and I found another one that used security trimmed controls to not load the ribbon if not logged in. This was great! I was excited until I logged out to test, and I then realized the vertical scrollbar was hidden. The reason for this is because SharePoint 2010 hides the vertical scrollbar and adds in a custom scrollbar to stick the ribbon to the top. When you hide the ribbon the scrollbar doesn’t show because SharePoint uses overflow: hidden; in CSS for the body so it can handle the scrollbar.
The Hybrid Approach
This led to take both of them to construct the best solution. I used the security trimmed control to hide the ribbon, and then I used the control from the forum post and modified the CSS to handle the scrollbar. Here are the steps combining both of the solutions and including my addition.
1. Add the following before the start of the ribbon.
<Sharepoint:SPSecurityTrimmedControl runat="server" Permissions="AddDelPrivateWebParts">
The ribbon starts with the following HTML.
<div id="s4-ribbonrow">
2. Then close the security trimmed control at the end of the ribbon. It should look like the following.
<Triggers> <asp:PostBackTrigger ControlID="WebPartAdder" /> </Triggers> </asp:UpdatePanel> </div> </div> </SharePoint:SPSecurityTrimmedControl>
3. Add the following outside of the security trimmed control (I put it before, but it doesn’t matter). You’ll notice now the body is set to scroll on overflow, and since it’s on the page it will trump the SharePoint style due to the cascade.
<asp:LoginView id="LoginView" runat="server">
<AnonymousTemplate>
<style type="text/css">
body { overflow-y: scroll !important; overflow-x: hidden; }
body #s4-workspace { overflow-x: hidden; overflow-y: auto !important; }
</style>
<!--[if lte IE 7]>
<style type="text/css">
html { overflow: auto !important; overflow-x: hidden; }
body { overflow: auto !important; }
</style>
<![endif]-->
</AnonymousTemplate>
</asp:LoginView>
Note: This supports IE 6 kind of. It will give a vertical scrollbar, but another one is also added. If I’m forced to find another solution I’ll post it, but I’m sick of IE 6.
This also fixes scrolling on iOS devices as well which don’t take kindly to the way SharePoint 2010 does scrolling by default. Hiding the ribbon alleviates the problem and returns one-finger scrolling.
UPDATE: I realized while implementing this for a client that the permissions level to keep the ribbon from loading was too high. I have since changed the permission level from ManageLists to AddDelPrivateWebParts (a role on the OTB contribute group, because why would you have read only users authenticate?). If you use a custom role be sure to match the lowest authenticated user to a role in this list on MSDN.
