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?



Comments

  1. I have a fancy on your posts. I like to read articles. They are useful. I hope you can share more knowledge and tips with us. Thanks a million. I wait for next posts. They are my cup of tea. thanks for the post.shopify best currency converter , sale discount app on Shopify , Create Discount master , best apps to boost sales on shopify

    ReplyDelete
  2. 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

    ReplyDelete
  3. Really impressed! Everything is very open and very clear explanation of issues. It contains truly information. Your website is very useful.
    miniclip car games, a10 games for kid, Jogo para menina

    ReplyDelete
  4. 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

    ReplyDelete
  5. 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

    ReplyDelete

  6. 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.

    ReplyDelete
  7. This is a post that we all should read at least once, it's great, wish you success in the next blog. I like this post because it contains a lot of useful information to read, maybe everyone will like me.
    free kizi Games, pbs Games for boys, jogos friv gratis

    ReplyDelete
  8. These companies Accept their absolute rules, agreement and elevation and accumulate active central acrimonious rules. If you become in blow together, they will actually accord all you funding abstracts all calm which you accept accuracy on all Call girls apery them. This abstracts as well protect these Call Girls in Bathinda Photos or Contact/Whatsapp number of those Bathinda Call Girls or even Straightforwardness is fundamental and you are able to be abiding a admirable alignment will be broadly honest with you.
    kizi free online Games
    free game 2019
    friv free Games 2019

    ReplyDelete
  9. 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

    ReplyDelete
  10. This is one of the most incredible article I've read in a really long time. I hope you update this blog often because I’m anxious to read more about. cheap cotton sheets , cheap full size comforter sets

    ReplyDelete

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

Calling Microsoft Graph API from an Angular 5 Single Page Application (SPA)