SharePoint 2013 Top links – Name, ID and How to Hide them

As the post Title says this post is about the components that make the new Top Blue Bar and the Sharing menu. The Id’s of these components are sometimes required to Change the look and feel and very often to hide them. Hiding some of the icons like “FOLLOW”, “SYNC” or “NeesFeed, SkyDrive, Sites etc” gets important in the company when you no longer want the user’s to use them.

This post tells you about Id’s and the Names of the Top left and right bar(suite links) and the individual id’s of buttons like SHARE, FOLLOW, SYNC etc.You can however Override “SuiteLinksDelegate” Delegate Control and Customize\Add\Remove links in the Top suite bar.

For each component I have added a picture and a JavaScript that can be added to the Script Editor to hide it on a page.

Lets look at ID’s of each Component of the blue bar including all the Icons in Share suite of the Ribbon.

ffice 365 Preview icon

ID – suiteBrandingBox

How to Hide it -

<script language=”javascript”>

_spBodyOnLoadFunctionNames.push(“HideBrandingsuite”);

function HideBrandingsuite()
{
document.getElementById(‘suiteBrandingBox‘).style.visibility = ‘hidden’;
}
</script>

NewsFeed, SkyDrive, Sites . – ..

ID – DeltaSuiteLinks

How to Hide it –

<script language=”javascript”>

_spBodyOnLoadFunctionNames.push(“HideBrandingsuite”);

function HideBrandingsuite()
{

document.getElementById(‘suiteLinksBox‘).style.visibility = ‘hidden’;
}

</script>

See Related post SharePoint 2013 – Hide NewsFeed, SkyDrive, Sites (DeltaSuiteLinks) for more options.

User Welcome, Settings, Help ..

ID – suiteBarRight

How to Hide it –

<script language=”javascript”>

_spBodyOnLoadFunctionNames.push(“HideBrandingsuite”);

function HideBrandingsuite()
{

document.getElementById(‘suiteBarRight‘).style.visibility = ‘hidden’;
}

</script>

<script language=”javascript”>

_spBodyOnLoadFunctionNames.push(“HideBrandingsuite”);

function HideBrandingsuite()
{

document.getElementById(‘ctl00_DeltaSuiteBarRight’).style.visibility = ‘hidden’;
}

</script>

SHARE,FOLLOW, SYNC, EDIT -

ID – RibbonContainer-TabRowRight

How to Hide it -

<script language=”javascript”>

_spBodyOnLoadFunctionNames.push(“HideBrandingsuite”);

function HideBrandingsuite()
{

document.getElementById(‘RibbonContainer-TabRowRight‘).style.visibility = ‘hidden’;
}

</script>
Next lets look at the Individual Id’s of SHARE, FOLLOW, SYNC, EDIT\SAVED & CLOSE and FULLScreen Mode

FOLLOW

ID – site_follow_button

How to Hide it -

<script language=”javascript”>

_spBodyOnLoadFunctionNames.push(“HideBrandingsuite”);

function HideBrandingsuite()
{

document.getElementById(‘site_follow_button’).style.visibility = ‘hidden’;
}

</script>

SYNC

ID – ctl00_SyncPromotedAction

How to Hide it -

<script language=”javascript”>

_spBodyOnLoadFunctionNames.push(“HideBrandingsuite”);

function HideBrandingsuite()
{

document.getElementById(‘ctl00_SyncPromotedAction‘).style.visibility = ‘hidden’;
}

</script>

EDIT\Save and Close

ID – ctl00_PageStateActionButton

How to Hide it -

<script language=”javascript”>

_spBodyOnLoadFunctionNames.push(“HideBrandingsuite”);

function HideBrandingsuite()
{

document.getElementById(‘ctl00_PageStateActionButton‘).style.visibility = ‘hidden’;
}

</script>

FULL Screen button

ID – ctl00_fullscreenmodeBtn

How to Hide it -
<script language=”javascript”>

_spBodyOnLoadFunctionNames.push(“HideBrandingsuite”);

function HideBrandingsuite()
{

document.getElementById(‘ctl00_fullscreenmodeBtn‘).style.visibility = ‘hidden’;
}

</script>

Another way to Customize or hide these links is by Creating a Visual Studio Solution for Overriding SuiteLinksDelegate Delegate Control. See a Step-by-Step Tutorial at Add,Remove Links in Top Suite Bar (SKYDRIVE,SITES,NEWSFEED) in SharePoint 2013

Related Posts -

SharePoint 2013 Top links(NewsFeed, SkyDrive, Sites..) – Name, ID and How to Hide them