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

    1. Hi Mike.
      The vertical/current nav can for the most part be styldd using the css style sheet. Use F12 to find your classes, the. Style them, most can be done this way. As long as you don’t need to use images more or less…
      Good luck
      // Thomas

  1. I am a huge fan of your branding series for SP. I just got into using sharepoint and find your guides useful for people like myself. Please publish more!

    John.

  2. Hello, I was able to complete the first part just fine but in the 2nd part – my Javascript code doesn’t work because the document.getElementById(“suiteBrandingIcon”) returns null and it seems to make sense because the office 365 logo isn’t even visible until the ConfigureBrandingsuite function is exited. So, it seems like my function gets executed *before* the function that sets the office logo. Any advice on how to proceed?

    1. Hi Anurag
      .
      No, I never got that problem myself while building the guide, not sure why. Today when I try to do the same thing again, I get the same issue as you see.
      If you would try the answer no 1 in this link, see if any of the second or third options help?
      http://stackoverflow.com/questions/16936250/sharepoint-2013-add-javascript-after-whole-page-load

      I would highly appreciate getting back to me with the results, I will then update the post and give you credit 🙂

      Regards
      // Thomas

  3. Hello Thomas,

    Yes, MDS was the issue. Using the ExecuteOrDelayUntilScriptLoaded method solved the problem. However, I had to use ‘sp.js’ instead of ‘start.js’ as that file didn’t seem to exist for me.

    Thanks for this post and your instant support!

    Also wondering if there is a way to configure the top banner specifically for all apps in the office 365 suite – like outlook, sites, calendar and so on. Probably not as those are not sharepoint sites.

    1. Great! Would you mind leaving me the lines you used? I’m trying to save time and if you have a working solution already?
      I will then repro the new solution and update the post with the new code. Or maybe even add a new post…
      Thanks for your feedback, I would not have considered that angle if you had not asked from the beginning.

      Best regards
      // Thomas

  4. Here are the lines. Still working on finalizing but it gets one pointed in the right direction.

    _spBodyOnLoadFunctionNames.push(“myinit”);

    function myinit()
    {
    ExecuteOrDelayUntilScriptLoaded(function () {
    if (typeof asyncDeltaManager != “undefined”)
    asyncDeltaManager.add_endRequest(ConfigureBrandingsuite);
    else ConfigureBrandingsuite();
    }, “sp.js”);
    }

    function ConfigureBrandingsuite()
    {
    var v_icon, v_iconbox;
    var v_suiteBarLeftm, v_ribbonbox;
    var v_link;
    var v_newImageSrc=”/_catalogs/masterpage/mysite/mylogo.png”;

    // get link reference so that we can point to our website
    v_link = document.getElementById(“suiteBrandingLink”);
    v_link.href=”https://my.sharepoint.com/Portal2/SitePages/Home.aspx”;

    // 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
    v_suiteBarLeft .style.background = “#005288″;
    v_ribbonbox.style.display=”none”;
    v_iconbox.style.width=”150px”;
    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”;
    v_icon.src = v_newImageSrc;

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

    return false;
    }

Leave a Reply to Anurag Yagnik Cancel 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