5

We just started using the O365/Sharepoint Online 2013 (SPO Plan 1) and we would like to have our custom suite bar logo or preferably just text on the left upper corner with a link to our root SP intranet site.

I have searched the internet for the last few days to find instructions on how to replace the default "Office 365" logo that links to the portal site but haven't found anything fresh/recent information about it.

What would be the easiest/simplest way to achieve this? I'm grateful for any help on the problem! :)

3

3 Answers 3

6

You can try this solution:

  1. Open your site in SharePoint Designer, check out and open the default masterpage in advanced mode (assume it is seattle.master).
  2. Scroll down to ending </body> tag.
  3. Add the following block of code above:

    <SharePoint:ScriptBlock runat="server">
    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/YourLogo.PNG' height='25px'></a>");
    $('#O365_MainLink_Logo').attr("style","padding-top: 3px");
    clearInterval(interval);                
    }
    }, 1000);    
    </SharePoint:ScriptBlock>
    
  4. Upload logo image file you want to use (i.e. upload to Site Assets library).

  5. Save the edited masterpage, check it in.

  6. Reload your site.

Credits to this site

5
  • First, thanks for your answer! Secondly, how would i do that without editing the masterpage directly? At the moment my masterpage .master and .html are linked and changes are done in the html file. :)
    – Tenttu
    Jul 16, 2014 at 5:10
  • I tried to put your code in the masterpage html-file just before the closing BODY tag but it wouldn't let me save as it says there is a component that requires different format and asks me to change the extension to .aspx. What am I doing wrong? :)
    – Tenttu
    Aug 1, 2014 at 6:34
  • Can you share a screenshot?
    – Sergey
    Aug 1, 2014 at 19:04
  • Well it's no use because I have finnish SPD but I just reproduced the error and can translate it here. So when I added that code just before the closing BODY tag in my oslo.html. When saving I get an error thay says "There is a component on the page which requires another file format to work properly. Change the file format into .aspx by choosing rename file."
    – Tenttu
    Aug 4, 2014 at 6:47
  • Ok I got it working by clearing out the <SharePoint:ScriptBlock> -tags and replacing them with normal <script> -tags with type and jQuery source (though I have jQuery referenced on its own too). Now I found a new problem, I managed to change the logo and link for the "normal" intranet site collection but it doesn't work for MySites as everyone's own MySite is actually a "Personal Site" or something like that?
    – Tenttu
    Aug 15, 2014 at 10:40
2

At the moment, you would need to use jQuery. However, the Suite Bar in SPO has changed numerous times, so be prepared to make changes in response to those changes.

The ability to customize the Suite Bar has been suggested in UserVoice. I suggest you add your vote there.

1
  • Ok thanks for your answer and I will check it out and give my vote! :)
    – Tenttu
    Jul 16, 2014 at 5:10
1

For Modern Site

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        document.getElementById("O365_AppName").style.display = "none";
    });
    $(window).on('load', function () {
        document.getElementById("O365_AppName").style.display = "none";

        var newElement = document.createElement('div');
        newElement.setAttribute("id", "newElementID");

        var newElement = document.createElement('div');
        newElement.setAttribute("id", "newElementID");    
        newElement.innerHTML="**Your Name**";

        var old=document.getElementById("O365_AppName");
        old.parentNode.insertBefore(newElement, old.nextSibling);
        document.getElementById("newElementID").style.fontSize = "16px";
    });
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.