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"
        "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. 
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?


  1. They are useful. I hope you can share more knowledge and tips with us. Thanks a million. I wait for next posts.
    food games free
    basketball online games
    soccer games 2019

  2. Thanks for posting this info. I just want to let you know that I just check out your site and I find it very interesting and informative. I can't wait to read lots of your posts
    jogo io jogar
    frivgame 2019
    2player games for kids

  3. I like to read your posts very much. They are so awesome. The articles contain plenty of knowledge and information. They are pieces of advice so that I can solve some problems. Would you mind uploading more posts?
    game online 2019
    jogos friv jogar
    jogar jogos online


  4. Dice Wars
    Legends Basketball Stars
    Basketball Heroes
    It has fully emerged to crown Singapore's southern shores and undoubtedly placed her on the global map of residential landmarks. I still scored the more points than I ever have in a season for GS. I think you would be hard pressed to find somebody with the same consistency I have had over the years so I am happy with that.

  5. You’ve got some interesting points in this article. I would have never considered any of these if I didn’t come across this. Thanks!. logo design


Post a Comment

Popular posts from this blog

Generate Word Document From A SharePoint List Item Using Microsoft Flow

Creating SharePoint Framework Client Web Part and solving the challenges with _RequestDigest Token value using React

Creating SharePoint Aspx Pages from Word Documents using PowerShell