Home > Branding, Foundation, JavaScript, Jquery, js, Office 365, Scripting, SharePoint 2013, SharePoint Online > Revised A guide to quick SharePoint 2013 branding – part 2 – with Javascript
  1. Sunitha
    October 31, 2013 at 10:42

    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.

    • October 31, 2013 at 13:11

      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. Sunitha
    October 31, 2013 at 14:54

    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. Sunitha
    October 31, 2013 at 14:55

    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.

    • October 31, 2013 at 15:00

      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

      • Sunitha
        November 1, 2013 at 13:49

        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.

      • November 1, 2013 at 13:54

        Anytime Sunitha, Glad I could help!

        Regards
        // Thomas

  4. Sunitha
    November 4, 2013 at 10:45

    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?

    • Sunitha
      November 4, 2013 at 10:48

      Default blue banner and default ‘SharePoint’ text…

  5. Sunitha
    November 4, 2013 at 10:48

    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?

  6. Sunitha
    November 4, 2013 at 10:51

    In addition to default banner…it is also taking the default ‘SharePoint’ text……

    • November 4, 2013 at 13:53

      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

  7. Atif C
    November 4, 2013 at 19:21

    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

    • November 6, 2013 at 14:47

      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

      • November 15, 2013 at 06:02

        Hi Thomas, I’m working with office 365 and i can’t change blue banner. I have followed all step. Please help, Thanks!

        Agustina

      • November 15, 2013 at 19:09

        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

      • Atif C
        November 18, 2013 at 14:16

        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.

      • November 18, 2013 at 14:35

        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

  8. Atif C
    November 18, 2013 at 14:40

    Thanks Thomas – where exactly on the masterpage should this line go?

    • November 18, 2013 at 14:49

      Like I said, in the custom master(hs.master?), locate:

      (Somewhere around line 110 in the master…)
      and put the code i gave you in the last comment just below that.
      Regards
      // Thomas

      • Atif C
        November 18, 2013 at 15:23

        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!

      • November 18, 2013 at 15:28

        Ahh 🙂
        The code is removed obviously…stupid me!
        Look for the suiteBarRight tag

        Rgds
        // Thomas

  9. Atif C
    November 18, 2013 at 15:47

    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?:

  10. Atif C
    November 18, 2013 at 16:49

    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!

    • November 18, 2013 at 18:18

      No worries.
      Glad I could help.
      Perhaps the post needs Another update…
      Regards
      // Thomas

  11. Jon
    January 8, 2014 at 14:37

    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.

  12. EPW
    January 24, 2014 at 22:35

    Hello Thomas Just checking back in regarding feedback. Any updates yet?

    • January 27, 2014 at 14:06

      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

    • January 27, 2014 at 14:08

      Also, to change the background color:
      #suiteBarLeft{
      background-color: rgb(234, 41, 97);
      }

      // Thomas

  13. EPW
    January 27, 2014 at 16:45

    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%;

  14. EPW
    January 27, 2014 at 16:50

    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.

  15. EPW
    January 29, 2014 at 16:39

    One more thing. My navigation went away could some one help with this as well. Thank You kindly.

  16. Richard
    February 5, 2014 at 07:26

    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.

    • February 5, 2014 at 08:03

      Hi Richard.
      Thanks for the great feedback!
      If anything goes wrong manipulating the masterpage, it can be tricky to get back.
      But, there are a few ways to save the situation.
      1. Use the direct link to the masterpage settingspage – https://yourURL/_layouts/15/ChangeSiteMasterPage.aspx
      Switch back to seattle.master and fix the issues.
      2. Use SharePoint designer…switch back to the default seattle.master

    • February 10, 2014 at 16:51

      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

  17. Richard
    February 5, 2014 at 07:52

    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.

    • February 5, 2014 at 08:04

      I’ve noticed that as well, I’ll get back with an update.
      Regards
      // Thomas

    • February 10, 2014 at 16:52

      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

  18. Alex T
    February 25, 2015 at 18:09

    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!

    • February 25, 2015 at 18:14

      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? 😃

  1. September 5, 2013 at 20:33

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

%d bloggers like this: