Hide SharePoint “RibbonRow” and “SuiteBar” From Anonymous Users

Posted on Updated on


For public facing SharePoint sites most of the time peoples don’t want to show SharePoint “Suitebar” and “RibbonRow” for Antonymous Users

1

So here how you can hide SharePoint 2013 “suiteBar” for anonymous users.

  1. Open the master page (default Master and the Home Page Master) using SharePoint Designer. Before edit your master page take a backup copy Smile

image 

2. Select your master page -> right click –>Click on  “check out”

image

image

3. Select the master page again -> right click –> Click on “edit file in advanced mode”

image

4. Find the <div id=”suiteBar” class=”ms-dialogHidden noindex”> code block

image

5. Now change <div id=”suiteBar” class=”ms-dialogHidden noindex”>  to <div id=”suiteBar” class=”ms-dialogHidden noindex” style=”display:none”>

image 

 

This will hide the “suitbar” for all users including login users.but we need to enable suite bar for login users.to do that insert below script block right after the above </div> tag

6.Right click on <div id=”suiteBar” class=”ms-dialogHidden noindex”>  to <div id=”suiteBar” class=”ms-dialogHidden noindex” style=”display:none”> code block and click on “Select Tag”

image 

Suitebar_New

7. insert below script block right after the selected section

<!– My Custom Code –>

<SharePoint:SPSecurityTrimmedControl ID=”HideSuiteBar” runat=”server” PermissionsString=”ManageWeb”>

<script type=”text/jscript”>

document.getElementById(“suiteBar”).style.display = “block”;

</script>

</SharePoint:SPSecurityTrimmedControl>

<!– –>

Hide_SuiteBar_New

 

This will hide SharePoint “SuiteBar” for Anonymous users.

SNAGHTML2c8c40e4

Now we have to hide SharePoint “Ribbon Row”

8.Go to your master page. find  <div id=”s4-ribbonrow” style=”height: 35px; display: inherit !important;”> code block.

image

9. Change <div id=”s4-ribbonrow”> to <div id=”s4-ribbonrow” style=” display:none”>

image

10. Right click on <div id=”s4-ribbonrow” style=” display:none”> code block -> click on “Select Tag”

image 

image

11. Insert below script block right after the above selected </div> tag. (at the end of the Selected Tag)

<!– My Custom Code –>

<SharePoint:SPSecurityTrimmedControl ID=”HideRibbonRow” runat=”server” PermissionsString=”ManageWeb”>

<script type=”text/javascript”>

document.getElementById(“s4-ribbonrow”).style.display = “block”;

</script>

</SharePoint:SPSecurityTrimmedControl>

<!– –>

Hide_S4_Ribbon_New

 

12. After Insert above code block .your page will look like below screenshot.

S4_Ribbon_New

 

13. “Save” your changes and “Check In” the “Master Page”.

14. This is the final output / View for “anonymous” users.

SNAGHTML3e1597c

Note :

You have to “DeactivateMinimal Download Strategy” feature from “Manage Site Features” to take effect all these changes.

Site_Features

Minimal Download Strategy

You can use below url to login to you site.because now you can’t see “Sign in” Link on your pages. 🙂

http://SiteUrl/_windows/default.aspx

Happy Coding  Smile

Advertisements

3 thoughts on “Hide SharePoint “RibbonRow” and “SuiteBar” From Anonymous Users

    Anonymous said:
    October 10, 2014 at 12:43 AM

    thanks

    Anonymous said:
    January 6, 2015 at 10:31 PM

    I have searched so long for this solution. Thank you.

    wred said:
    January 24, 2018 at 11:44 AM

    still very applicable in 2018!! thanks so much – best instructions ever on this.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s