Essentially all public facing SharePoint sites, including those hosted on SharePoint Online or on-prem SharePoint 2013, require a method to hide the suite bar / ribbon for anonymous users. The SharePoint Online oslo master page does an OK job of this while the seattle master page does not even attempt to hide the ribbon. I have been asked quite often how I prefer to hide the ribbon for anonymous users.
The primary method everyone jumps to is the control, <SharePoint:SPSecurityTrimmedControl /> found in the Microsoft.SharePoint.WebControls namespace, typically registered to the tag SharePoint. As an example.
Show only for Anonymous Users:
1 2 | <SharePoint:SPSecurityTrimmedControl runat="server" AuthenticationRestrictions="AnonymousUsersOnly" EmitDiv="true"> </SharePoint:SPSecurityTrimmedControl> |
Show only for Authenticated Users:
1 2 | <SharePoint:SPSecurityTrimmedControl runat="server" AuthenticationRestrictions="AuthenticatedUsersOnly" EmitDiv="true"> </SharePoint:SPSecurityTrimmedControl> |
The often quoted, yet incorrect, solution for hiding the SharePoint ribbon for anonymous users is to encapsulate the entire suite bar / ribbon with the SPSecurityTrimmedControl with AuthenticationRestrictions set to AuthenticationRestrictions. The problem with this solution is that the out-of-the-box SharePoint JavaScript that is used to determine the height of the s4-workspace requires a div with an id, s4-ribbonrow.
My preferred SharePoint Online and SharePoint 2013 solution for hiding the suite bar / ribbon for anonymous users uses the above theory while also addressing the #s4-ribbonRow requirement. I also find is much cleaner than what is found in the oslo master page.
Simply replace the suite bar / ribbon found in your master page with the following:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div id="ms-designer-ribbon"> <SharePoint:SPSecurityTrimmedControl runat="server" AuthenticationRestrictions="AnonymousUsersOnly" EmitDiv="true"> <div id="s4-ribbonrow" style="visibility:hidden;display:none"></div> </SharePoint:SPSecurityTrimmedControl> <SharePoint:SPSecurityTrimmedControl runat="server" AuthenticationRestrictions="AuthenticatedUsersOnly" EmitDiv="true"> <div id="suiteBar" class="ms-dialogHidden noindex"> <!--#suiteBarLeft and #suiteBarRight--> </div> <div id="s4-ribbonrow"> <!--ootb ribbon controls--> </div> </SharePoint:SPSecurityTrimmedControl> </div> |
Highlights
Notice that I wrap the entire suite bar / ribbon in my own wrapper. This ID came from Design Manager, but if you have a wrapper around the suite bar / ribbon it will be easier to target specific elements later.
Side note: Want tricks on how to modify the SharePoint Online ribbon? Check out this educational video from Yaroslav Pentsarskyy. Very cute.
I then include a SPSecurityTrimmedControl for anonymous users that only includes the #s4-ribbonrow div (hidden) while the second SPSecurityTrimmedControl control includes your standard suite bar and ribbon controls.
If you are using design manager, I suggest the following code for your HTML Master Page.
1 2 3 4 5 6 7 8 9 | <div id="ms-designer-ribbon"> <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>--> <!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" AuthenticationRestrictions="AnonymousUsersOnly" EmitDiv="true">--> <div id="s4-ribbonrow" style="visibility:hidden;display:none"></div> <!--ME:</SharePoint:SPSecurityTrimmedControl>--> <!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" AuthenticationRestrictions="AuthenticatedUsersOnly" EmitDiv="true">--> <!--SID:02 {Ribbon Snippet}--> <!--ME:</SharePoint:SPSecurityTrimmedControl>--> </div> |
What about a Sign In Control?
Adding a Sign In control that is only available to anonymous users is just as easy. We can again use the SPSecurityTrimmedControl control along with the Welcome control template. This block of code could be placed anywhere in your Master Page (or HTML Master Page) that your UI design requires.
1 2 3 4 | <%@ Register TagPrefix="wssuc" TagName="Welcome" src="~/_controltemplates/15/Welcome.ascx" %> <SharePoint:SPSecurityTrimmedControl runat="server" AuthenticationRestrictions="AnonymousUsersOnly"> <wssuc:Welcome id="WelcomeLogin" runat="server" EnableViewState="false" /> </SharePoint:SPSecurityTrimmedControl> |
Or for a HTML Master Page in Design Manager,
1 2 3 4 | <!--SPM:<%@ Register TagPrefix="wssuc" TagName="Welcome" src="~/_controltemplates/15/Welcome.ascx" %>--> <!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" AuthenticationRestrictions="AnonymousUsersOnly">--> <!--SPM:<wssuc:Welcome id="WelcomeLogin" runat="server" EnableViewState="false" />--> <!--ME:</SharePoint:SPSecurityTrimmedControl>--> |
This post is part of my series on modifying the SharePoint Online and SharePoint 2013 suite bar and ribbon in a safe and SharePoint friendly manner.
Part one: “Collapse the Suite Bar and Ribbon to One Line”
Part two: “On Demanding Hiding the Suite Bar and Ribbon”
Part three: “Animated Hiding Ribbon”
Part four: “Use SharePoint Online Composed Looks and Theming Engine to Brand spcommon.png”
this way is breaking the experience of adding a webpart page
because the div is lost uder the content
great content here!
Hi Eric,
I want to hide the ribbon from non-admin guys in my Intranet portal. Could you please advise me on how do i do that. Do i have to edit the sattle.html or seattle.master ?
Below is a code snipped from my master page (seattle.html):
In true previews of your site, the SharePoint ribbon will be here.
<!–MS:–>
<!–SPM:–>
<!–ME:–>
Many thanks for your reply.
It sounds as though you are using HTML Master Pages, so you will need to edit the seattle.html HTML Master Page. That being said, I never recommend updating OOTB files such as seattle.html, rather make a copy of this HTML Master Page and update this new file. Publish a major version and finally point your site and system master pages to this new Master Page.
You should then be able to replace the ribbon control found in your HTML Master Page with the HTML/Snippet code found in the article above, right after:
“If you are using design manager, I suggest the following code for your HTML Master Page.”
Eric