Customizing and Branding SharePoint Master Pages using JavaScript Embedding - Applies to On-prem and Office 365

In this article, I will be sharing a few tips on the customization of SharePoint master page using JavaScript injection. As you might be aware, Microsoft discourages customization of the OOTB master page, and neither do they encourage the use of a custom master page especially for office 365, as doing so will prevent functional updates from being applied to the master page, unless they are manually applied. From maintenance point of view, I think applying updates manually will be cumbersome to maintain especially when you are supporting multiple clients. So I decided to do more research on the best way to have a greater level of control on the master page than just using the alternate css approach. A google search pointed me to the starter template Core.EmbedJavaScriptJSOM developed by Wictor Wilén. I downloaded it, and started playing around it. 

The interesting thing is you can do a lot with JavaScript injection. You can move things around, change color, style the navigation or you may even completely embed your html code on the page to override the out-of-the-box controls. The downside to this approach is that, it only works for the "classic" and publishing sites. But the good news is Microsoft is not deprecating the classic experience, both (classic and modern) will coexist. See here for more details.

To start, download the starter template here. 

• Once it's downloaded, unzip it and open the solution file in visual studio. 
• Click the project name: Core.EmbedJavaScriptJSOM, this should display the property window.
• In the property window, copy and paste the url of your SharePoint site in the Site URL. This should connect to your site and pop up a credential dialog box. Supply your credential to connect online to the site.
• Open the Scenario1.js file under Content in the solution explorer
• At this point you can deploy your add-in to the site to see the status bar added to your site. 
• The status bar is set in the SetStatusBar function contained in the Scenerio1.js file

So let's play around a little. Let's style the top navigation

• Copy and paste the code below inside SetStatusBar function:

$('.ms-core-listMenu-horizontalBox').css("background-color", "#47A4D3");
    $('.ms-core-listMenu-horizontalBox li.static').css({
        "border": "1px solid transparent",
        "background": 'url("/_layouts/Images/selbg.png") repeat-x left top'
    })
    $('.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item').css({
        "color": "#21374C",
        "white-space": "nowrap",
        "border": "1px solid transparent",
        "padding": "10px",
        "padding-left": "20px",
        "margin-right": "1px"
    })
    $('.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item:hover').css({
        "background": 'url("/_layouts/Images/selbg.png") repeat-x left top',
        "background-color": "#0A85C4",
        "color": "#fff",
        "text-decoration": "none"
    })
    $('.ms-core-listMenu-horizontalBox .ms-core-listMenu-selected:link, .ms-core-listMenu-horizontalBox .ms-core-listMenu-selected:visited, .ms-core-listMenu-horizontalBox .ms-core-listMenu-selected, .ms-tv-selected:link').css({
        /* Glass Effect Shade Image */
        "background": 'url("/_layouts/Images/selbg.png") repeat-x left top',
        /* Glass Effect Shade Image */
       " background-color": "#0A85C4",
        "color": "#fff",
        "text-decoration": "none",
        "border": "1px #134072 solid",
        "padding": "10px 10px",
        "margin": "1px"
    })
    $('.ms-breadcrumb-top').css({
        "text-align": "right"
    })

• Deploy the solution to your site. Click Trust if prompted 

• Click Embed to apply the changes to your site

• As you can see from the code, you can use css class selector as well as element id to customize the page.

Hint: You can inspect the page in chrome to see the element ids and css selectors that control the page styling.
If everything works well, you top navigation should look like the image below:

Below are the screenshots of the pages I customized using JavaScript embedding. 

1. 

Here I applied background color to the title area, change the font color of the top navigation, styled all web parts  and inserted a function to fetch current user image and display greeting in the right corner of title area. 

2.  A responsive page. 

Here I completely embedded html and css code on the page. This is a responsive page, it resizes as you resize the window.

Note, in reality this has not altered anything in the master page, so any updates from Microsoft will get applied automatically. Therefore, I will recommend using this approach if you want to avoid the maintenance hassle that may come with custom master pages. 

I like to hear your view on this, what do you think?