Customize SharePoint 2013 and Office 365 suite bar

The new Office 365 and SharePoint 2013 introduced a suite bar at the top of the screen and for most of the users it is just a useless empty space. By default it displays a SharePoint or Office 365 word in the left side and some links for the installed features in the right. In this post I will show you how to customize it with your company logo without using server code.

This post was updated! Due to changes introduced in the Office 365 HTML structure this post was updated on 23rd Sep 2015.

SP2013 Suite Bar

BindTuning master pages

Let’s start with the Bind Tuning masters, to accomplish this tutorial you will need the SharePoint Designer 2013.

  1. Open your site with SharePoint designer
  2. Copy your company logo to the Site Assets folder
  3. Navigate to All Files -> _catalogs -> master page -> YourThemeName
  4. Right click on the masterpage that you are using, check it out and edit it in advanced mode
  5. SharePoint Designer

  6. Search for </body>
  7. Right above it paste the following script
    • If you are using Office 365

      Deprecated!

      <script type="text/javascript">
           var companyLogo=document.getElementById("suiteBrandingBox");
           companyLogo.innerHTML = "<a href='/'><img src='/SiteAssets/BindTuningLogo.PNG' height='30px'></a>";
      </script>
      

      <script type="text/javascript">    
      	if (typeof jQuery == 'undefined') 
      	{
      		document.write('<script type="text/javascript" src="//code.jquery.com/jquery.min.js"><' + '/script>');
      	}
      	
      	var interval = setInterval(function(){
      		if($('#O365_MainLink_Logo').length)
      		{        
      			$('#O365_MainLink_Logo').html("<a href='/'><img src='/SiteAssets/BindTuningLogo.PNG' height='25px'></a>");
      			$('#O365_MainLink_Logo').attr("style","padding-top: 3px");
      			clearInterval(interval);          		
      		}
      	}, 1000);    
      </script>
      
    • If you are using SharePoint 2013
      <script type="text/javascript">
           var suitebar = $("#suiteBar");
           var branding = suitebar.find(".ms-core-brandingText");
           branding.html("<a href='/'><img src='/SiteAssets/BindTuningLogo.PNG' height='30px'></a>");
      </script>
      
  8. Adjust the href in the script if you want to include any particular URL, and the image url to match with your logo.
  9. Save the modified master page, check it in and publish the major version
  10. Refresh your site to see the final result

Suite Bar branded

SharePoint master pages

You can also use this code to customize the default Seattle master.

  1. Open your site with SharePoint designer
  2. Copy your company logo to the site assets folder
  3. Navigate to All Files -> _catalogs -> master page
  4. Edit the Seattle.master in advanced mode and copy all the code
  5. By default it’s not possible edit the original master, to create a new one click on File -> Blank Master Page
  6. New Master

  7. Check out the new master, edit it in advanced mode, delete all the existent code and paste the one form original Seattle
  8. Check Out New Master

  9. Search for </body>
  10. Right above it paste the following script
    • If you are using Office 365

      Deprecated!

      <script type="text/javascript">
           var companyLogo=document.getElementById("suiteBrandingBox");
           companyLogo.innerHTML = "<a href='/'><img src='/SiteAssets/BindTuningLogo.PNG' height='30px'></a>";
      </script>
      

      <script type="text/javascript">>    
      	if (typeof jQuery == 'undefined') 
      	{
      		document.write('<script type="text/javascript" src="//code.jquery.com/jquery.min.js"><' + '/script>');
      	}
      	
      	var interval = setInterval(function(){
      		if($('#O365_MainLink_Logo').length)
      		{        
      			$('#O365_MainLink_Logo').html("<a href='/'><img src='/SiteAssets/BindTuningLogo.PNG' height='25px'></a>");
      			$('#O365_MainLink_Logo').attr("style","padding-top: 3px");
      			clearInterval(interval);          		
      		}
      	}, 1000);    
      </script>
      
    • If you are using SharePoint 2013
      <script type='text/javascript' src='//code.jquery.com/jquery.min.js'></script>
      <script type="text/javascript">
           var suitebar = $("#suiteBar");
           var branding = suitebar.find(".ms-core-brandingText");
           branding.html("<a href='/'><img src='/SiteAssets/BindTuningLogo.PNG' height='30px'></a>");
      </script>
      
  11. Adjust the href in the script if you want to include any particular URL, and the image url to match with your logo
  12. Save the modified master page, check it in and publish the major version
  13. Open your Sharepoint Site, go to Settings -> Site Settings -> MasterPage under Look and Feel and select the new master page for the Site master and System master options
  14. Select New Master

  15. Refresh your site to see the final result
  16. Seattle Branded

    (Note: If you don’t have the Master Page option, you have to activate first the Publishing features.)

88 thoughts on “Customize SharePoint 2013 and Office 365 suite bar

  1. There is a typo in first paragraph. Currently, the sentence reads “By default it displays a SharePoint or Office 365 word in the right side and some links for the installed features in the left.”

    However, Sharepoint/Office365 is on left side (not right). Please correct.
    Thanks

  2. Hi,
    I was able to successfully apply company branding in Office 365 suite bar and Master pages. However when I do the same change to Mysite master page, it gets reflected only in Newsfeed, About me links of My site.
    Blogs, Tasks pages of different user’s Mysite are not reflected with the branding changes.
    Can you please help with a slution for the same.
    Thanks,

    1. Hi Suresh,

      Unfortunately for the my sites you have to perform the changes manually for each user, I’ll check if there is a way to this change automatically for all the users, if I find something I’ll do an article about it.

      1. Hi suresh,
        If you have access to visual studio 2012 and a sp13 dev environment the easiest fix for your question is a custom master page with a feature receiver to use a custom master page whenever you create a new mysite.

        If you dont have a vs2012, then you could create a new masterpage which would be a copy of mySite15.master then adjust as needed and publish, update your master pages so this is the default, then manually tweak each mysite when you make one – which would be tedious, but depends on how many you are making.

        Here is a link to a walkthrough of the feature receiver I’ve found http://sharepointologic.blogspot.co.nz/2013/04/branding-sharepoint-2013-my-sites-with.html

  3. Hi! Thanks for sharing, all is easy to read and very clear, however… I am not able to find “suitebar” in any of my pages. I am a Office 365/SharePoint Online user on the E3 plan. Any tips? Thanks!

  4. Hi,

    This is exactly what I was looking for. However, even I cannot see “suitebar” in any of pages… I am using ‘seattle.master’. Please guide.

  5. This worked fine on my test site but when I try to do the same thing on the company site I get this error message when I add the new master page and click on the home page.

    Sorry, something went wrong
    Literal content (‘ ‘) is not allowed within a ‘System.Web.UI.UpdatePanelTriggerCollection’.

  6. Hi!
    Is this co-branding available only for SharePoint Online environment? Does it work on Exchange Online environment (in Outlook, People, Calendar tabs)?

  7. If you are unable to find the div id’s that are reference in this blog article for Office365. Do a search on your Seattle.html file for div id of ms-designer-ribbon and just under “End of READ-ONLY PREVIEW add the the js code for Office 365 and save.

  8. Hi there,

    Does this have to be done from a site at it’s root level? I tried it from a sub-site of the root and I have not yet figured out how to make it work.

  9. Hi João Ferreira,

    You rock! This is exactly what we need to do for our sites. You have saved us a lot of time. We appreciate you sharing sincerely.

    We are using SharePoint Online on Office 365.

    I copied the code of seattle.master via SharePoint Designer 2013, added the script as per your instruction.

    However, I was stuck at step 10 and 11.

    Step 10: I don’t know how to publish the new master page I created. I saved the master page, the status shows Checked in and the new master page appears in Master Page Library on my SharePoint page.

    Step 11: Under Site Settings -> Site Master Page Settings, the drop down menu of Default only shows Seattle and Oslo. It does not show the new master page I created.

    Is it because I missed out something between step 10 and 11?

    Sincerely, we really appreciate your expert advice and the time you have taken to share this piece of knowledge with us.

    Charlotte

      1. Hi João Ferreira,

        Thank you very much for your instruction. It is working beautifully.

        HAPPY NEW YEAR!

        Charlotte Tang

  10. As Rafay suggested the Office 365 or SharePoint logo is located on the left of the bar suite, I was looking for in the Seattle master page code and I was able to find it.

    1. Please ignore this comment above “As Rafay suggested the Office 365 or SharePoint logo is located on the left of the bar suite, I was looking for in the Seattle master page code and I was able to find it.”

      I was wrong. You are right. We have to insert the code right above

      Thank you very much for your kind guidance.

  11. Hi João Ferreira,

    1. Please could you also show us how to remove SharePoint or Office 365 word completely if we do not want to replace the word with our company logo?

    2. Also, could we learn how to position the company logo say 100px to the left so that the logo is nicely positioned?

    Thank you so much for your help.

    Charlotte

    1. To remove the word completely you can use this code

      To get the logo 100px to the left you can use this one

      1. Hi João Ferreira,

        Thank you for sharing the code.

        For some reason, the code is not posted in your reply. I’m viewing your website on IE and Chrome but see no code.

        Please could you kindly post the code again?

        We are grateful for your kind help.

        Have a wonderful new year!

        Charlotte

  12. Hi João Ferreira,

    1. Please could you also show us how to remove SharePoint or Office 365 word completely if we do not want to replace the word with our company logo?

    2. Also, could we learn how to position the company logo say 100px to the left so that the logo is nicely positioned?

    Thank you so much for your help.

    Please ignore my previous comment. I accidentally entered the wrong email address.

    Charlotte

  13. Hi João Ferreira,

    We are using Project Online with PWA and SharePoint Online. We are just wondering if we could brand:

    1. The pages with the URL -my.sharepoint.com/
    2. PWA pages with the URL .sharepoint.com/sites/pwa

    For example we are looking at branding the Project Center page but there is no Page tab with Edit function.

    We really appreciate your kind help.

    Charlotte Tang

    1. Hi Charlotte,

      If you are using the SharePoint Online 2013, you can brand the my.sharepoint.com, but you need to set the brand individually for each user in the farm.

      My best,

      João Ferreira

      1. Hi João Ferreira,

        Thank you for confirming that can be done.

        I’m just curious:

        1. Where is the farm in our SharePoint online environment? We only logon via https://portal.microsoftonline.com so I have no clue where the farm is. Please could you kindly do a step-by-step instruction on how to accomplish the branding for my.sharepoint.com site collections?

        2. We have also been stuck at branding Project Center/ PWA pages with the URL .sharepoint.com/sites/pwa. Would you mind letting us know how this can be achieved?

        Thank you very much for the time you set aside to share your expert opinions.

        Have a greatly successful 2014 ahead!

        Charlotte

  14. Hi, thanks for posting this tutorial.

    Unfortunately it didn’t do anything for me, literally. I went by your instructions to the letter and nothing happened. I checked a few times to make sure I didn’t make some kind of typo mistake, and couldn’t find anything. I’m using SharePoint Foundation 2013.

    I look forward to reading some of your other articles.

      1. Ola Joao,

        Regarding the SP Foundation platform … did you find out why this solution does not work with SP Foundation? I tried following the procedure you outlined, but like G.P. , nothing happens. Perhaps the suitebar is “hidden” somehow in SP Foundation??

  15. Thanks a lot for posting this – I’m pretty new to SharePoint but even I managed to get it working. It had been working great until the last few days – do you know if anything has recently changed in Office 365 that would stop this working?

    1. Hi James,

      Microsoft changed the structure of the suite bar and unfortunately now it’s not so easy change the logo.
      If you are using the Seattle as base theme remove all the code you added and before the closing tag add this script:

      	
      
  16. Hi Joao!

    I was able to do this and my site was looking great. I went home for the weekend and on Monday morning, the Office 365 logo was back. I have SharePoint Online E3 plan for Office 365. I checked the master page file and the code was still there, however, is not taking effect to the look anymore. Do you know what I can do to make my logo come back?

    Thank you.

    Brittany

    1. Hi Brittany,

      Microsoft changed the structure of the suite bar and unfortunately now it’s not so easy change the logo.
      If you are using the Seattle as base theme remove all the code you added and before the closing tag add this script:

      	
      
  17. I have recently found that a number of the classes and CSS in Office 365 were updated in early February. I have been able to correct almost all of these but am still having trouble with re-instituting the customization to the suite bar. I had copied the Seattle master and used the script to override the suiteBrandingBox but now see this ID has been changed to O365_MainLink_Logo. However the override no longer works targeting this ID.

    1. Hi Christopher,

      Microsoft changed the structure of the suite bar and unfortunately now it’s not so easy change the logo.
      If you are using the Seattle as base theme remove all the code you added and before the closing tag add this script:

      	
      
  18. Dear Joao,

    Honestly the code change you mentioned on my sharepoint master had no change, i still end up with the office 365 logo on top. Any other suggestions you could provide.

    Many thanks in advance!!!!

    Sebastian

    1. Hi Sebastian,

      The post was updated again, the code now must be placed before the closing tag

      
      

      .
      I tested this in our environment an it’s working as you can see in this picture.
      You are using Office 365 right?

  19. Hi Joao

    Good tutorial but I’m stuck on the last step – I’m trying to now see my changes. I’ve created a new seattle.master and inserted the code after . I’m using SharePoint so assume its this block of code :

    var suitebar = $(“#suiteBar”);
    var branding = suitebar.find(“.ms-core-brandingText”);
    branding.html(““);

    I amended the image location as well as the href.

    I then checked in but when I go to Site Settings I get a bit stuck. I can only see Seattle or Oslo in the dropdowns for master pages. Any tips on what I can do?

  20. This works fine for the Home.aspx page when you first save and refresh but as soon as you navigate away to another page it is back to being Office365. And indeed when you go back to the Home.aspx page. That is until you do a refresh. So how do we make it have a new logo permanently?

  21. How can we collapse the suite bar on to a mobile or tablet view – using the bootstrap theme?

    thanks!

  22. Hello great post. Witch masterpage I have to Change, that the suitebar in Exchange Online (Office 365) is changed? I could change the Newsfeed Page, and the Teamsite, but the Suite bar of Exchange Online is always the same.

    Thank you

  23. Hi
    Can we customize the #suiteBarRight(logout, newsfeed…) part, i have requirement that in mobile view they should be appear in modal. Is that possible if yes can give me an idea.

    1. Hi Krishna,

      Yes it is possible using JavaScript or JQuery, you just need to detect the size of the site and then using script replace the existent content by your modal.

  24. Hi João,
    I followed your post and worked pretty nice and was able to change the logo for a button that runs some javascript. My question now is if you know if there asi any other way of doing what you showed but without touching the master template. Thanks in advance!

    1. Hi Pablo,

      Yes you can do it without touching the masterpage, you can add the script in the page it self inside of a content editor webpart, but this way you need to add the script to every single page.

  25. Hi Joao, I implemented the Office365 script in my custom masterpage (a copy of the Seattle.master). My corporate logo loads fine on the homepage (start.aspx) of a site. However, when i’m navigating to Documents or to other content within the site the Office365 logo shows up again. Any recommendations? Greetings, Christian

    1. Hi Christian,

      Make sure you have the new master applied to all the subsites and not just in the root site.
      Go to Settings -> Site Settings -> Master page and reset all subsites to inherit you new master page

  26. I’d like to change the office 365 logo and link on my SharePoint 2013 so users don’t leave the site, is this possible in SharePoint 2013?I have managed to hide the logo and change background colours etc but i would prefer to use my own logo.In a word,i prefer to use a bar code as my logo including my info.

  27. Hi Ferrira,

    I’m trying to replace the office 365 logo with company logo but its not overwrinting the href and img in O365_MainLink_Logo id,

    if (typeof jQuery == ‘undefined’)
    {
    document.write(”);
    }

    var interval = setInterval(function(){
    $(‘#O365_MainLink_Logo’).html(““);
    $(‘#O365_MainLink_Logo’).attr(“style”,”padding-top: 3px”);
    clearInterval(interval);
    }, 1000);

  28. Hi, I installed the theme on my site sharepoint public but top link bar of the office 365 still appearing for the user end, please, how do I hide?

  29. Hi João,

    I have applied this code to my Sharepoint Online site (thank you for this!). It works great when I am logged on as the administrator, however I have found a strange issue. When I am logged on as a test (standard) user that has only Read access to the Sharepoint site, this ceases to function. If I increase their access to “Contribute” then it begins to work again?!

    Any advice for this? I would like this to also work for read only users!

    Rich

  30. Hi João Ferreira

    I have a bind tuning theme though i want the navigation menu be inside the suites bar with all it’s components I have tried searching around the web but all in vain kindly assist.

  31. Hi,
    This worked like a charm a few days ago but is no longer working now on Office 365. Have they made another change there that is breaking this code?

  32. Never mind. Got it working again. I had it in a script editor web part. Added it to the HTML master per instructions above.

  33. Hi..I am trying to add a separate link instead of an image..
    I am not able to make this work..Can you please guide?

    var suitebar = $(“#suiteBar”);
    var branding = suitebar.find(“.ms-core-brandingText”);
    branding.html(““);

Leave a Reply

Your email address will not be published. Required fields are marked *

Captcha * Time limit is exhausted. Please reload CAPTCHA.