Home > Branding, Foundation, JavaScript, Jquery, js, Office 365, Scripting, SharePoint 2013, SharePoint Online > A guide to quick SharePoint 2013 branding – part 2 – with Javascript
  1. Ian
    May 25, 2013 at 01:37

    I tried it for onpremise, it is not working any idea why?

  2. July 24, 2013 at 17:06

    Do you have anything like this on modifying the vertical navigation snippet?

    • July 24, 2013 at 17:51

      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

  3. David Lincoln
    August 6, 2013 at 21:33

    Hands down the best tutorial I’ve seen on Sharepoint branding. I hope you publish more.

  4. August 12, 2013 at 20:59

    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.

  5. Anurag Yagnik
    September 3, 2013 at 21:01

    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?

  6. Anurag Yagnik
    September 4, 2013 at 18:50

    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.

    • September 4, 2013 at 19:09

      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

  7. Anurag Yagnik
    September 4, 2013 at 20:50

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

    • September 4, 2013 at 23:09

      Really, huge thanks for sharing! I back on track again 🙂
      I’ll update the post or get a new revised version out soon. You’ll be in it.

      Regards
      // Thomas

    • September 6, 2013 at 17:19

      Anurag.
      Check this: http://wp.me/p1EuNv-Fc
      Let me know if you have a blog you want me to add a reference to.
      Regards // Thomas

  1. March 20, 2013 at 22:09
  2. March 25, 2013 at 09:59
  3. September 5, 2013 at 20:28

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: