SharePoint - Style the Suite Bar (2016/O365 Classic)

This will help you restyle the SharePoint 2016/O365 suite bar in classic mode

Step 1) Add in Text and an image
Do this using the methods described at https://social.technet.microsoft.com/wiki/contents/articles/34202.sharepoint-2016-how-to-change-suitbars-text-powershell.aspx

Scenario:

In this example, we will use the Central admin web app and change the text from SharePoint to Central Admin (Dev)

To View

To view the current Suitbar’s text, let’s run the basic first and see the what value returns.

$webapp = Get-SPWebApplication “http://ca.krossfarm.com  ”

$webapp.SuiteNavBrandingText

 Output for this will be “SharePoint”

To Change:

Please start SharePoint PowerShell (Run as Administrator) with farm admin account.

• Run the below command to change the text to Central Admin (Dev)

$webapp = Get-SPWebApplication “http://ca.krossfarm.com  ”

$webapp.SuiteNavBrandingText = “Central Admin (Dev)”

$webapp.Update()

• After refreshing the page, you will see this.

To Set the Logo:

If we want to set our company logo (BTW it will display in the middle of the top suit bar). In order to set it, you need to upload the logo into the SharePoint site. You can link it using a URL from other sites, but for best practices upload it in Central Admin Shared Library and link it from there.

Start the PowerShell console and run the below commands:

1.$webapp.SuiteNavBrandingLogoUrl = "http://ca.krossfarm.com1/Shared%20Documents/leaf-and-flames-logo.jpg "

2.$webapp.SuiteNavBrandingLogoTitle ="KrossFarm"

3.$webapp.SuiteNavBrandingLogoNavigationUrl = "http://ca.krossfarm.com "

4.$webapp.Update()

• LogoURL is URL of the Logo
• Logo Title Text
• Navigation URL

After refreshing the page, you will see output something like this:

Step 2) Reposition the logo and Text

This CSS will put the logo at the far left of the suite bar, and the text after.

/*Suite Bar Text */
.o365cs-nav-leftAlign{
     position:absolute;
     left:140px;
}

/*Suite bar logo */
div.o365cs-nav-tenantBranding.ms-fcl-w{
     position:absolute;
     left:0px;
     top:0px;
}

Share on Google Plus

About Tom DeMeulenaere

Highly accomplished information technology professional with extensive knowledge in System Center Configuration Manager, Windows Server, SharePoint, and Office 365.