44 thoughts on “Revised A guide to quick SharePoint 2013 branding – part 2 – with Javascript

  1. Hi, I have followed all the steps to change the blue banner in my SharePoint site, but then I understand the steps mentioned are for office 365. Hence, my site do not reflect the changes. Could you please help me what necessary changes that I need to make to have my own banner? I am using SharePoint 2013 on-premises.

    1. Hi Sunitha.
      Are you looking to change the text or add an image?
      If ‘just’ the text in Onprem, then you can use this added to your custom css:
      .ms-core-brandingText:after{
      content:”Powered by Sunitha”;
      }
      .ms-core-brandingText{
      margin-left: -95px;
      }
      Let me know how that works.

      Ps. The examples in this post were tested in onprem as well, but in a preview version, things then changed…ds.

      Regards
      // Thomas

  2. Hi Thomas, with the above css i was able to change the text., but I want to add an image (like the one you have showed in your article).

  3. Hi Thomas, Thanks for your reply. With the above CSS i am able to change the text. However, my requirement is to add an image.

    1. Ok, no problem.
      Then you have to use a bit of javascript, I like to add it to my custom masterpage since I customize it anyway. If you want to do that, locate the following in your custom masterpage:

      Exactly above it, add this:

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

      (replace the image url to your own)
      Then try it again.
      Regards
      // Thomas

      1. Thanks Thomas. Changing the banner with text and using different font is more good than the image. So I used the CSS that you mentioned above to change the text. Thank you so much! This is very helpful.

  4. Hi Thomas, Quick question… Using the CSS above, I was able to change the text and the font type. In addtiton to above, I have changed the default blue background color of #SuiteBarLeft id to my own… However, when I am navigating to List/Document library/any other page, it’s taking the default blue banner… Could you please help?

  5. Sunitha :
    Hi Thomas, Quick question… Using the CSS above, I was able to change the text and the font type. In addtiton to above, I have changed the default blue background color of #SuiteBarLeft id to my own… However, when I am navigating to List/Document library/any other page, it’s taking the default blue banner and ‘SharePoint’ text… Could you please help?

    1. Hi Sunitha.
      Yes, I Think I know why that is, you have probably not changed masterpage in both locations, you have to change both the ‘Site master page’ and the ‘System master page’. The ‘System master’ Controls among other things the document libraries design.
      Hope that helps
      // Thomas

  6. Hi Thomas

    I am wondering if you can help. I have followed all of your above instructions in my O365 online site collection and it has not made any change. Please help! 🙂

    Thanks

    Atif

    1. Hi Atif.
      I need a bit more detail in order to help…what did you do and what did not work?
      What was your expected outcome?

      Logo, css, the javapart or what? Perhaps you can check Sunitha’s comment thread to get additional info on how to resolve it?

      Regards
      // Thomas

      1. Hi.
        Try the comments, the thread I had with Sunitha was regarding that, could be that it was onprem…
        Try adding this to your custom css to change the text in the suitebar:
        .ms-core-brandingText:after{
        content:”Augustina Rules”;
        }
        .ms-core-brandingText{
        margin-left: -95px;
        }

        Hope that helps
        Rgds
        // Thomas

      2. Hi again Thomas

        I have tried again and there is still no change to my masterpage.

        I just want to remove the “Office365” logo at the top left – and replace it with my own logo – and then I will go on to find out how to amend the links to the right (Outlook/Calendar/People/ etc etc).

        I am running Office365 and am using Sharepoint Designer 2013 to upload my files. I have followed all of your instructions above and the only modifications I have made are the names of the three files – where you have used “TrueSec” I have used “hs”, as well as my own branded logo (I changed the path to point to my logo in the .js file. So my code looks like this:

        on the masterpage (hs.master):

        In the hs.js file:

        _spBodyOnLoadFunctionNames.push(“myinit”);

        function myinit()
        {
        // This function makes sure that the script is executed after the page has completed loading
        ExecuteOrDelayUntilScriptLoaded(function () {
        if (typeof asyncDeltaManager != “undefined”)
        asyncDeltaManager.add_endRequest(ConfigureBrandingsuite);
        else ConfigureBrandingsuite();
        }, “sp.js”);
        }

        function ConfigureBrandingsuite()
        {
        // Thanks to Anurag Yagnik for the enhanced script
        var v_icon, v_iconbox;
        var v_suiteBarLeftm, v_ribbonbox;
        var v_link;
        // Replace the default logo with my own shiny white with transparant background, oh-yeah!
        var v_newImageSrc=”../_catalogs/masterpage/hs/owlywithhair.png”;

        // get link reference so that we can point to our website, replace with your own
        v_link = document.getElementById(“suiteBrandingLink”);
        v_link.href=”https://blog.blksthl.com”;

        // get icon reference so that we can change properties
        v_icon = document.getElementById(“suiteBrandingIcon”);
        v_iconbox = document.getElementById(“suiteBrandingIconBox”);
        v_suiteBarLeft = document.getElementById(“suiteBarLeft”);
        v_ribbonbox = document.getElementById(“s4-ribbonrow”);

        // customize icon, icon box, background color and title
        // Setting the background of the entire suitebarleft to jet-black for maximum effect
        v_suiteBarLeft .style.background = “#000000″;
        // v_ribbonbox.style.display=”none”;
        // Setting the width to a little more than default, else the image may be cropped
        v_iconbox.style.width=”200px”;
        v_icon.src = v_newImageSrc;
        v_icon.style.width=”150px”;
        v_icon.style.left=”0″;
        v_icon.style.top=”0″;
        v_icon.alt=”Go to My Portal”;
        v_icon.title=”Go to My Portal”;

        // site specific – hide logo since we already have on on top left now
        //document.getElementById(“ctl00_onetidHeadbnnr2″).style.display=”none”;

        return false;
        }

        I know that the javascript is being processed from the masterpage because on one occasion when I had a typo the page failed to load (I have since fixed the typo).

        I really dont know where I am going wrong here.

      3. Ok.
        Lets try again, a bit different:
        For Office 365:
        Locate the following in your custom masterpage:

        Exactly above it, add this:

        var companyLogo=document.getElementById(“suiteBrandingBox”);
        companyLogo.innerHTML = ““;

        Beware the quotes and double quotes, you will need to replace them if you copy paste from here.
        If that fails, use F12 developer toolbar in IE, the Script tab to debug the code, if the JavaScript fails you should see why and how it fails.

        Good luck
        // Thomas

      1. Could you please tell me which line I need to locate? Your reply above has a blank space for the line that I should locate at around 110. Thanks and much appreciated Thomas!

  7. Ive found the following at line 84 and have tried to add it just after the tag but it just displayed the text as HTML on my site page. Pls forgive my coding skills as I am just starting out. Could you please show me how to add the line in?:

  8. I have got it working now, thanks! I have placed the code after the last /div tag for suiteBarLeft and now the logo is gone. Thank you so much for your help!

  9. I like the start of the page “NO DEVELOPMENT IN VISUAL STUDIO OR SHAREPOINT DESIGNER REQUIRED ” as I work front end not back end on sites.

    This looks like a great walk through, I can follow it all unlike many other posts I hit. Branding is great, the standard SharePoint look isn’t flattering. I will give this a go on a test site and see what it brings 🙂 thanks.

    1. Hi EPW.
      Sorry for the late response, things came up.
      If the onprem suitebar left is what you want to modify, then you can do that without any java.
      Use the css:
      .ms-core-brandingText
      {
      Color:Same as background to hide SharePoint;
      }
      .ms-core-brandingText:after
      {
      Content: ‘Text that comes before’;
      Color:white;
      }
      .ms-core-brandingText:before
      {
      Content: ‘Text that comes before’;
      Color:white;
      }
      Play around with it a bit and you will get what you want.

      Regards
      // Thomas

  10. Good Morning Thomas. What do you mean by Content: ‘Text that comes before’;. I dont see thast on my css, do I add that in. This is all I have for your first line. I know how to change the colors etc (suitebars, delta suite). My main objective is to change the color themes, add a image banner across the top, remove the “Sharepoint” wording and publish it to be able to choose it from “Change the Look”.

    .ms-core-brandingText
    {
    font-size:1.2em;
    padding-left:20px;
    width:100%;

  11. I dont want to hide “Sharepoint” I want to change it and make it stay. Using the developers tab I can change it in html, type in my text, but how do I keep it after I close it.

  12. Firstly, that would have to be one of the best written, and easiest to follow, user guides that I have ever come across. Well done.
    Secondly, I seem to have run into an issue. Now that I have uploaded (and published) all of the files, the [ITEMS] and [LIST] tabs now disappear from the Master Page Gallery when I click on them. For example: In the Master Page Gallery, I left-click on [FILES], the Files Ribbon very briefly drops down, then the Files Ribbon, the [FILES] tab, and the [LIBRARY] tab all disappear… therefore, I am unable to access the Files or Items Ribbons, or use their features, such as, Upload Document.
    Has anybody else reported this issue? Do you know if there’s a way to fix this? (I’m guessing it may be a missed ” or ; somewhere).
    Thanks.
    Richard.

    1. Hi Richard.
      I typed in an answer before but then something happened and it got lost.
      If you lose your way with your masterpages, switch back to the default masterpage seattle. Use the direct link YourSiteURL/_layouts/15/ChangeSiteMasterPage.aspx
      or SPD to do it.
      Most likely, you have a quote or double quote wrong. Replace them all.
      Regards
      // Thomas

  13. I’ve also just noticed that the Office 365 logo is still in the top left corner. Not sure where I could’ve gone wrong.
    Richard.

    1. Not sure if O365 is changing and that is why the logo is so hard to get a grip on, once a code wroks, something gets changed and it stops…
      This js worked and others before it…

      Regards
      // Thomas

  14. I have SharePoint Online 2013 – I followed the first part and whenever I ChangeMasterPage to my new folder path it basically crashes and I have to revert the masterpage back to seattle.master. At first I thought this was happening because I opened it in SPD13, so I tried only opening the master file in notepad but i got the same result. ‘Something went wrong’.

    I also made sure I replaced the copied quotes with newly entered quotes so I am not sure what I am doing wrong here…

    I have my cs.master , cs.js, cs.png, cs.css, and favicon.ico all in the masterpage section inside it’s own cs folder.

    I was able to edit the CSS file to fix the Global Navigation text wrap by using an alternate CSS but like I said I always get the ‘Something went wrong’ when trying to point the masterpage to my cs.master file.

    I’d love if you could help me personally as I was thrown to the wolves on this Project and am new to SharePoint as a whole, although I do have experience in Jscript, HTML, and CSS.
    Article has been very helpful but i want to get rid of the Office 365 branding and the SharePoint icon. Help kind sir!

    1. Hi. Sorry to hear that you are having trouble, but…
      The guide is made a while back and SPO is constantly evolving. This is one reason.
      Another worthchecking, could be the ‘new’ Custom Script security feature in O365. This could easily thwart any atempt at customizations.
      The basics in the guide should be good though…if you skip using SPD…I never say use SPD do I? 😃

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s