Friday, 6 June 2014

Hide Site Actions for visitors

Don't just hide the Site actions button, hide it's container too

this is a two step process
security trim the ribbon to keep the meat from rendering on the client msdn
hide the container using css

so first of i'm using randy's starter master page, find the following comment
<!-- =====  Begin Ribbon

with that found inthe second div make the following adjustment,

<!-- =====  Begin Ribbon ===================================== -->
<div id="s4-ribbonrow" class="s4-pr s4-ribbonrowhidetitle"><Sharepoint:SPSecurityTrimmedControl ID="spTrimRibbon" PermissionMode="All" PermissionContext="CurrentSite"  runat="server" Permissions="ManageWeb,AddListItems">
<div id="s4-ribboncont">

Remember it's essential that you put the security trimming between the s4-ribbonrow and s4-ribboncon divs, otherwise you'll end up this half screen rendering situation and it wont make any sense.

anwyay since we opened the Sharepoint:SPSecurityTrimmedControl  tag we now need to close it. in the master page scroll down to comment

<!-- =====  End Ribbon and other Top Content

and above the first div close the  Sharepoint:SPSecurityTrimmedControl tag, it should look something like this

<!-- top web part panel -->
<div id="WebPartAdderUpdatePanelContainer">
<asp:UpdatePanel
ID="WebPartAdderUpdatePanel"
UpdateMode="Conditional"
ChildrenAsTriggers="false"
runat="server">
<ContentTemplate>
<WebPartPages:WebPartAdder ID="WebPartAdder" runat="server" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="WebPartAdder" />
</Triggers>
</asp:UpdatePanel>
</div>
</Sharepoint:SPSecurityTrimmedControl></div>

<!-- =====  End Ribbon and other Top Content ====================== -->

now with just that step you should get something like this for our visitors  

almost there, we just need to remove that blue place holder, luckily it's pretty straight forward with css. If we inspect the top rectangle where the site actions resides we'll notice that it's empty, so if we're lucky enough to be supporting Ie9+ then we can use the css :empty selector and set it's display to none. otherwise you can use jquery or javascript, but that'll mean it'll be there on render and then disappear later which isn't too great.

html body form div#s4-ribbonrow:empty {
display:none;
}

one thing to note is that the :empty selector doesn't handle whitespace so you have to make sure that your security trim tags are flush with the opening and closing div tags

<div id="s4-ribbonrow"><Sharepoint:SPSecurityTrimmedControl ...
stuff to trim
</Sharepoint:SPSecurityTrimmedControl></div>