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.
If everything works well, you top navigation should look like the image below:
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.
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?
They are useful. I hope you can share more knowledge and tips with us. Thanks a million. I wait for next posts.
ReplyDeletefood games free
basketball online games
soccer games 2019
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
ReplyDeletejogo io jogar
frivgame 2019
2player games for kids
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?
ReplyDeletegame online 2019
jogos friv jogar
jogar jogos online
ReplyDeleteDice 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.
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