Change Office 365 in SharePoint Online

March 15, 2014 — 1 Comment

Everyone is used to seeing this logo right ?

When you’re working with SharePoint 2013 on premises the web application has a property called SuiteBarBrandingElementHTML that you can update with custom HTML to update what is shown in the upper left corner of the page. In office 365, we do not have access to the web application so we have to use a different method. Below is a snippet you can place in your master page to update that area with new text and modify the link. In my demo case I updated it to be a HOME link that brings to the root site collection.

  • You can use SharePoint Designer or any one of your favorite tools to update the master page by mapping a drive to the site.
  • The snippet below must go within the <head> of the master page
  • If you are using the out-of-the-box master page (Seattle.master) you must first make your edits to the Seattle.HTML. This is because the files are linked. (See below)

<script type=”text/javascript” src=”https://code.jquery.com/jquery-2.1.0.min.js”></script&gt;
<script type=”text/javascript”>
     $( document ).ready(function() {
          $(‘#O365_MainLink_Logo’).text(‘Home’);
          $(‘#O365_MainLink_Logo’).attr(‘href’,’/’);
     });
</script>

  1. Edit the Seattle.HTML file
  2. Add the snippet into the <Head>
  3. Next, publish the HTML file. This will automatically update the seattle.master page.

If you attempt to update the seattle.master directly you will receive this error:


If you look at the master page after you publish you will se your new code snippet in the <head> tag.

Now we get something like this 🙂

Note: To do this on premises you need to use PowerShell:

$webApp = Get-SPWebapplication <url>
$webApp.SuiteBarBrandingElementHTML = ” <new html> ”
$webApp.Update()

Keep in mind that HTML quotes (“) need to be escaped using ` otherwise POSH thinks they are intended as strings.

Example: $webApp.SuiteBarBrandingElementHTML = “<div class=`”MainLink`”><a href=`”/`”>Home</a></div>”

Advertisements

One response to Change Office 365 in SharePoint Online

  1. 

    Update: If you do not have or do not want to load jQuery in your master page, you can use the Web API to do the same thing but using: document.getElementsByClassName('o365cs-nav-branding o365cs-topnavLink')[1].innerHTML = 'Intranet Home'

    Keep in mind that CSS classes and DOM IDs have been known to change in SPO so be aware of this when troubleshooting.

    Like

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s