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>
<script type="text/javascript">
$( document ).ready(function() {
$('#O365_MainLink_Logo').text('Home');
$('#O365_MainLink_Logo').attr('href','/');
});
</script>
- Edit the Seattle.HTML file
- Add the snippet into the <Head>
- 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>"