Master page for sharepoint

Sharepoint allows us to use code on Master page on sharepoint.

Usually, We would create an HTML version of the master page and once we uploaded it, the SharePoint site will create a (.master ) version of the master page there is an option called  ASP NET Master Page.

This is used mostly when you want to control the addition of CSS & javascript and any other files.

<SharePoint:ScriptLink runat=”server” ID=”ScriptLink1″ Language=”javascript” Name=”~sitecollection/Style Library/SharepointSite/js/jquery-3.2.1.min.js” />

<SharePoint:CssRegistration runat=”server” ID=”CssRegistration1″ Name=”<% $SPUrl:~sitecollection/Style Library/SharepointSite/css/main.css %>” After=”corev15.css”/>

This is is how you add the javascript or CSS, Id of each CSS and javascript should be unique, by mentioning this ” After=”corev15.css”  you can control what CSS that the site should take first.

And also you can add the conditions for which any scripts and CSS are to be added at the Site.


Now Let know how to make a simple asp net master page

Add the CSS link just before you were closing the head tag like this

<!– Style CSS–>
<SharePoint:CssRegistration runat=”server” ID=”CssRegistration1″ Name=”<% $SPUrl:~sitecollection/Style Library/Site/css/main.css %>” After=”corev15.css”/>
<!– // style CSS –>


Now just on top of the footer section add the scripts like this

<!– Custom Javascript // –>

<SharePoint:ScriptLink runat=”server” ID=”jQuery” Language=”javascript” Name=”~sitecollection/Style Library/CGP/js/jquery-3.2.1.min.js” />

<SharePoint:ScriptLink runat=”server” ID=”popper” Language=”javascript” Name=”~sitecollection/Style Library/CGP/js/popper.min.js” />

<!– // Custom Javascript –>


Now We could add the content ;

The s4workspace div should be structured like this

<div id=”s4-workspace”>
<div id=”s4-bodyContainer”>
<!– Header Information // –>
<div class=”header-top”>

<!– // Header Information –>

<!– Content Part // –>
<div class=”content-part”>
<SharePoint:AjaxDelta id=”DeltaPlaceHolderMain” IsMainContent=”true” runat=”server”>
<asp:ContentPlaceHolder ID=”PlaceHolderMain” runat=”server”>
<div class=”DefaultContentBlock”>
This area will be filled in by content you create in your page layouts.
<!– // Content Part –>

<!– Footer Information // –>
<footer class=”ms-dialogHidden”>
<div class=”container”>
<p>© 2017 Sharepoint Ltd. All rights reserved.</p>
<!– // Footer Information –>


Now ill add a sample version of the master page file here. Please Check it out

Write a comment