Understand SharePoint Step by Step Part 3 using example

A very warm welcome to learn sharepoint step by step in 8 hours series. This is part 3 or hour 3 of sharepoint step by step in 8 hours. As i always tell to my visitor if you have directly landed on this page request to read my previous Part 1 and Part 2 articles.

If you are new to this website let me brief you about our website. This website covers everything about Sharepoint" and its related resources. Here you get sharepoint videos, articles and other learning materials. If you still not satisfied then we do offer personalized training Online / Offline training on sharepoint. Kindly visit here to check our training page.

We do have self-learning material - You can order our complete .NET video DVD pack which covers all topics like AngularJS, MCV, WCF, ASP.NET, C#, SQL Server, MSBI, Design Pattern and many more click here to check it.

Now coming to this topic, In this Part 3 article we will understand how to customize Master Pages in SharePoint.

SharePoint Master Pages

It provides an interface and overall layout of the pages on SharePoint site. SharePoint Master pages provide the consistent look and feel for all of the pages in your site.

Master page has the fixed elements on the site such as Logo, Title, navigation menu, search box, sign-in link etc. It serves as a container for all parts of a content page. For example like a fixed layout wordpress / blogspot web-site template wherein it changes only content part rest everything is persistent. So when we view any sharepoint-site web-page on browser then that particular page combines with the master page to produce a single page.

So you can create multiple pages where only data changes rest navigation, company logo will remain static because of use of master pages.

Nowadays it became common in professional websites, when you navigate any website from one-page to another-page you will see something persistent like (Menu or Logo).

Microsot Sharepoint understands importance of consistency and implements same using concept called "MasterPages". If you closely look at any sharepoint site you can find a left menu, navigation links at top and content in middle.

Now we will customize the master page as follows

  • 1. Move logo to top-left above menu links.
  • 2. Move the left menus to the right-side.
  • 3. Keep the top menus as it is.
  • 4. Dynamic content to be displayed in the middle.

So lets customize Sharepoint master page step by step.

Step 1 : Enable SharePoint publishing infrastructure

In-order to customize Sharepoint first thing we need to enable "SharePoint publishing infrastructure" feature so to enable "SharePoint publishing infrastructure" go to settings and click on Site collection feature link as shown in below image.

Once you click on that Site collection feature link you will get land on sharepoint list of services page where you will get list of sharepoint feature in that you need to find "SharePoint server publishing infrastructure" and click on "Activate" button to activate it for more you can check our below image.

Step 2 : Know your currently used master page

To know which master page is used by our sharepoint site currently. Go back to Site setings and in look n feel section you will get "Design manager" as shown in below image.

Kindly Note: If you could not find this menu then that means "SharePoint publishing infrastructure" has not enabled properly. So you have repeat 1st step properly. If you can see then ok you can continue with th step 2.

Now click on "Publish and apply design" and click on "Assign matter master page to your site based on device channel".

Device Channels : Device channels is nothing but different types of devices "Tablet, SmartPhone, Desktop, SmartPhone-Note, Notebook". Each one of devices have different screen resolution. D evice channels helps us to display any website as per screen resolution i.e. it make website as Responsive Website. Now coming back to our topic.

Here you can see a drop down which specifies which master page template to be used. You can find two options 1. seattle and 2. oslo. By default "seattle" is selected. Both of these master pages have differences in CSS and in layouting.

But the difference is "oslo" was designed thinking anonymous access in mind and meant especially for public facing websites while “seattle” needs authentications.

Now let's see the "seattle" master page template code. So keep kind of code go back to "design manager" main menu and click on "edit master pages" -> then click on “convert html file to SharePoint MasterPage" as shown in below image.

Here you will get list of files, Just filter by "HTML master pages" you will get master pages of "seattle.html" and "oslo.html". Click on "seattle.html" and download it.

Just open "seattle.html" file code in Adobe Dreamweaver or in a "notepad". Once you open that file you will see lot of cryptic html code. So editing and updating this master page would be very complex. It will take days to edit this master page. Instead of doing editing on this we will create our own master page and apply to our site.

Sharepoint - HTML Master Page

Sharepoint HTML Master Page is a simple HTML file which offers overall layout of the pages on a SharePoint site. So let's create our own custom master page. To create any master page need to create a simple HTML file with basic structure and then upload it sharepoint site.

Using Sharepoint Design Manager, you can convert any.html file to .master file. During conversion it injects sharepoint code, so that when you edit and save the HTML file, the changes are synced to the associated master page.

Step 3 : Create Custom HTML Master Page

As we discussed earlier in the article that we will customize master page i.e.

  • Moving Logo to Top - Above Navigation
  • Moving left menu to right-side
  • Dynamic content at middle
  • Top menu at same page.

So as per our requirement let's create a simple HTML page (you can use notepad, visual studio or Adobe Dreamweaver) You can see we have created HTML code where we have simple table with 3 rows and inside 4 section.

  • Logo section for logo image
  • Horizontal menu section to display horizontal menu
  • Page section - Dynamic content section and will change when user clicks on navigation.
  • Vertical menu section - to display vertical menu

Check our HTML page code for master page.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to Our Company Portal</title>
</head>
<body>
<table>
<tr><td><img src="" /></td></tr>
<tr><td>Horizontal Menu</td></tr>
<tr><td>Our Page Data</td><td>Vertical Menu</td></tr>
</table>
</body>
</html>

Step 4 : Convert HTML page to master page

Now then we have our basic and simple HTML page with .html extension now we have make or i will say convert this HTML page to .master page. So in-order to convert a HTML page to Sharepoint master page as discussed earlier also we need to go to design manager section -> click on edit master pages and click on "Convert a HTML file -> Master Page". If you have any difficulty finding designer manager kindly read Step 1.

Finally add new item and upload the HTML file for conversion to master page.

Tip : If you want that your master page should be compatible with various versions of SharePoint then you can the following check boxes.

  • 4 : MasterPage compatibility with SharePoint 2010 and less version.
  • 15: MasterPage compatibility with SharePoint 2013.
  • 16 : Master page compatibility with SharePoint 2016.

Check the below following image

Once the page is updated or inserted it will be seen in draft version. Draft version nothing but a master page is updated but not live and cannot applied to Sharepoint site.

Let's browse our master page. So right click on the page and click open.

When you open and view the master page you will see all placeholder sections of master page. Just to check and ensure that our master page is working perfectly and conversion was successful.

As you see in the above image a yellow section, a section which will load and unload dynamic content of site when we navigates to one page to another. The comment in yellow section means that master page structure should be design around this yellow section.

If you browse all pages you can see HTML master page along with the converted "Master" page from sharepoint.

Code snippets for master page

As we discussed earlier that we will customize this master page so customize it we need to put some Sharepoint snippets in the placeholder section.

We need followings

  • Snippet 1 : To load dynamic content when use navigates
  • Snippet 2. For vertical menu
  • Snippet 3 : For Horizontal menu
  • And need to fix a logo by uploading it.

Step 5: Code snippet 1 For Loading Dynamic content

So in this step lets get the code snippet for the dynamic content section. To get this code snippet for dynamic section go to settings and click on master pages link as shown below image and navigate for master page which was created from HTML page.

Download .master file i.e. “MyCustomMasterPage.master” which is created by Sharepoint when we uploaded our .html file as shown in below figure.

Just open this downloaded .master file with any editor or visual studio editor you will se div tag with name "ContentPlaceHolderMain" just copy that div tag from start to end.

Move this div tag to the dynamc placeholder section of HTML master page as shown in below snippet of code.

<table>
<tr><td>This placeholder for image</td></tr>
<tr><td>This placeholder for Vertical menu</td></tr>
<tr><td><div data-name="ContentPlaceHolderMain">
<SharePoint:AjaxDelta ID="DeltaPlaceHolderMain" IsMainContent="true" runat="server">
<asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server">
</asp:ContentPlaceHolder>
</SharePoint:AjaxDelta>
</div></td>
<td>This placeholder for Horizontal menu</td></tr>
</table>

Step 6 : Code snippet 2 and 3 Vertical & Horizontal menu

For this step we need to do preview of master page. In case you don't no kindly check check Step 4.

Once you preview master page just click on "Snippets" link as shown in below image.

Once you click on that link you will be provided with tool bar and code section. For vertical and horizontal snippet code just click on vertical icon and horizontal icon in the tool bar and copy snippet code and place it to their respective placeholder section.

Step 7: Applying logo to the master page

Now the final step to place logo. So go to master page and click on add image as shown below image.

Once the image is uploaded browse to the image and get the image URL.

Place the image url in the image place holder as shown in the below code snippets.

<table>
<tr><td><img 
src="https://stepbystepschools.sharepoint.com/sites/MyITCompany/_catalogs/
masterpage/Preview%20Images/QuestPond.jpg" /></td></tr>

Step 8: Complete HTML master page

The final code of the HTML master page look something like this as shown below. I have commented the section start and end in the code.


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to Our Company Portal</title>
</head>
<body>
<table>
<tr><td>
<!&mdash;Image section  starts -- >
<imgsrc="https://stepbystepschools.sharepoint.com/sites/MyITCompany/_catalogs/
masterpage/Preview%20Images/QuestPond.jpg" />
<!&mdash;Image section  ends -- >
</td></tr>
<!&mdash;Top navigation section  starts -- >

<tr><td><div data-name="TopNavigationNoFlyoutWithStartNode">
<!--CS: Start Top Navigation Snippet--><!--SPM:<%@Register 
Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" 
Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, 
PublicKeyToken=71e9bce111e9429c"%>--><!--MS:<SharePoint:AjaxDelta 
ID="DeltaTopNavigation" BlockElement="true" CssClass="ms-displayInline ms-
core-navigation ms-dialogHidden" runat="server">--><!--PS: Start of READ-
ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW--><!--
MS:<SharePoint:DelegateControl runat="server"
ControlId="TopNavigationDataSource" Id="topNavigationDelegate">--><!--PS: 
Start of READ-ONLY PREVIEW (do not modify)--><span
style="display:none"><table cellpadding="4" cellspacing="0" 
style="font:messagebox;color:buttontext;background-color:buttonface;border: 
solid 1px;border-top-color:buttonhighlight;border-left-
color:buttonhighlight;border-bottom-color:buttonshadow;border-right-
color:buttonshadow"><tr><td nowrap="nowrap"><span style="font-
weight:bold">PortalSiteMapDataSource</span> -
topSiteMap</td></tr><tr><td></td></tr></table></span><!--PE: End of READ-
ONLY PREVIEW--><!--MS:<Template_Controls>--><!--MS:<asp:SiteMapDataSource
ShowStartingNode="True" SiteMapProvider="SPNavigationProvider"
ID="topSiteMap" runat="server" StartingNodeUrl="sid:1002">--><!--
ME:</asp:SiteMapDataSource>--><!--ME:</Template_Controls>--><!--
ME:</SharePoint:DelegateControl>--><a name="startNavigation"></a><!--
MS:<asp:ContentPlaceHolder ID="PlaceHolderTopNavBar" runat="server">--><!--
MS:<SharePoint:AspMenu ID="TopNavigationMenu" runat="server"
EnableViewState="false" DataSourceID="topSiteMap"
AccessKey="&#60;%$Resources:wss,navigation_accesskey%&#62;"
UseSimpleRendering="true" UseSeparateCss="false" Orientation="Horizontal"
StaticDisplayLevels="2" AdjustForShowStartingNode="false"
MaximumDynamicDisplayLevels="0" SkipLinkText="">--><!--PS: Start of READ-
ONLY PREVIEW (do not modify)--><link rel="stylesheet" type="text/css" 
href="/_layouts/15/1033/styles/menu-21.css" /><div 
id="zz7_TopNavigationMenu" class=" noindex ms-core-listMenu-horizontalBox" 
onclick="return AjaxNavigate$OnClickHook(event, this);"><ul
id="zz9_RootAspMenu" class="root ms-core-listMenu-root static"><li
class="static"><a class="static menu-item ms-core-listMenu-item ms-
displayInline ms-navedit-linkNode"
href="/sites/MyITCompany/SitePages/DevHome.aspx" accesskey="1"><span 
class="additional-background ms-navedit-flyoutArrow"><span class="menu-
item-text">MyITCompany</span></span></a><ul class="static"><li 
class="static"><a class="static menu-item ms-core-listMenu-item ms-
displayInline ms-navedit-linkNode" href="/sites/MyITCompany/HR"><span 
class="additional-background ms-navedit-flyoutArrow"><span class="menu-
item-text">HR</span></span></a></li><li class="static"><a class="static 
menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" 
href="/sites/MyITCompany/Accounts"><span class="additional-background ms-
navedit-flyoutArrow"><span class="menu-item-
text">Accounts</span></span></a></li></ul></li><li class="static ms-
verticalAlignTop ms-listMenu-editLink ms-navedit-editArea"><span class="ms-
navedit-editSpan" id="zz7_TopNavigationMenu_NavMenu_Edit"><a
id="zz7_TopNavigationMenu_NavMenu_EditLinks" class="ms-navedit-
editLinksText" href="#" onclick="g_QuickLaunchMenu = null;
EnsureScriptParams('quicklaunch.js', 'QuickLaunchInitEditMode',
'zz7_TopNavigationMenu', 1, 0, 0, '\\u002fSITES\\u002fMYITCOMPANY');
cancelDefault(event); return false;" title="Edit Links"><span class="ms-
displayInlineBlock"><span class="ms-navedit-editLinksIconWrapper ms-
verticalAlignMiddle"><img class="ms-navedit-editLinksIcon" 
src="/_layouts/15/images/spcommon.png?rev=43" alt="Edit Links" 
/></span><span class="ms-metadata ms-verticalAlignMiddle">Edit
Links</span></span></a><span id="zz7_TopNavigationMenu_NavMenu_Loading
class="ms-navedit-menuLoading ms-hide"><a 
id="zz7_TopNavigationMenu_NavMenu_GearsLink" href="#" onclick="HideGears();
return false;" title="This animation indicates the operation is in
progress. Click to remove this animated image."><img
id="zz7_TopNavigationMenu_NavMenu_GearsImage" 
src="/_layouts/15/images/loadingcirclests16.gif?rev=43" alt="This animation
indicates the operation is in progress. Click to remove this animated 
image." /></a></span><div id="zz7_TopNavigationMenu_NavMenu_ErrorMsg" 
class="ms-navedit-errorMsg"></div></span></li></ul></div><!--PE: End of 
READ-ONLY PREVIEW--><!--ME:</SharePoint:AspMenu>--><!--
ME:</asp:ContentPlaceHolder>--><!--PS: Start of READ-ONLY PREVIEW (do not 
modify)--><!--PE: End of READ-ONLY PREVIEW--><!--
ME:</SharePoint:AjaxDelta>--><!--CE: End Top Navigation Snippet-->
</div>
<!&mdash;Top navigation section  end -- >

</td></tr>

<!&mdash;Dynamic section  starts -- >


<tr><td><div data-name="ContentPlaceHolderMain">

<SharePoint:AjaxDelta ID="DeltaPlaceHolderMain" IsMainContent="true" 
runat="server">
<asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server">
<div class="DefaultContentBlock" style="border:medium black solid;
background:yellow; color:black; margin:20px; padding:10px;">
                 This div, which you should delete, represents the content 
area that your Page Layouts and pages will fill. Design your Master Page 
around this content placeholder.

</div>
</asp:ContentPlaceHolder>
</SharePoint:AjaxDelta>

</div>
<!&mdash;Dynamic section  ends -- >

</td>
<!&mdash;vertical section  starts -- >
<td><div data-name="QuickLaunch">

<!--CS: Start Vertical Navigation Snippet--><!--SPM:<%@Register 
Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls
Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, 
PublicKeyToken=71e9bce111e9429c"%>--><!--SPM:<%@Register 
Tagprefix="PublishingNavigation" 
Namespace="Microsoft.SharePoint.Publishing.Navigation" 
Assembly="Microsoft.SharePoint.Publishing, Version=16.0.0.0, 
Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>--><div id="sideNavBox"
class="ms-dialogHidden ms-forceWrap ms-noList"><!--MS:<SharePoint:AjaxDelta
ID="DeltaPlaceHolderLeftNavBar" BlockElement="true" CssClass="ms-core-
navigation" runat="server">--><!--MS:<asp:ContentPlaceHolder 
ID="PlaceHolderLeftNavBar" runat="server">--><!--MS:<asp:ContentPlaceHolder
ID="PlaceHolderLeftNavBarTop" runat="server">--><!--
ME:</asp:ContentPlaceHolder>--><!--MS:<asp:ContentPlaceHolder
ID="PlaceHolderQuickLaunchTop" runat="server">--><!--
ME:</asp:ContentPlaceHolder>--><!--MS:<asp:ContentPlaceHolder 
ID="PlaceHolderLeftNavBarDataSource" runat="server">--><!--
ME:</asp:ContentPlaceHolder>--><!--MS:<asp:ContentPlaceHolder 
ID="PlaceHolderCalendarNavigator" runat="server">--><!--
ME:</asp:ContentPlaceHolder>--><!--MS:<asp:ContentPlaceHolder 
ID="PlaceHolderLeftActions" runat="server">--><!--
ME:</asp:ContentPlaceHolder>--><!--MS:<SharePoint:SPNavigationManager 
ID="QuickLaunchNavigationManager" runat="server" 
QuickLaunchControlId="v4QuickLaunchMenu" ContainedControl="QuickLaunch" 
EnableViewState="false">--><!--MS:<SharePoint:DelegateControl
runat="server" ControlId="QuickLaunchDataSource">--><!--
MS:<Template_Controls>--><!--
MS:<PublishingNavigation:PortalSiteMapDataSource runat="server" 
ID="SiteMapDS" SiteMapProvider="CurrentNavigation" EnableViewState="false" 
StartFromCurrentNode="true" ShowStartingNode="false" 
TrimNonCurrentTypes="Heading">--><!--
ME:</PublishingNavigation:PortalSiteMapDataSource>--><!--
ME:</Template_Controls>--><!--ME:</SharePoint:DelegateControl>--><!--
MS:<SharePoint:AspMenu ID="V4QuickLaunchMenu" runat="server" 
EnableViewState="false" DataSourceId="QuickLaunchSiteMap" 
UseSimpleRendering="true" Orientation="Vertical" StaticDisplayLevels="3" 
AdjustForShowStartingNode="true" MaximumDynamicDisplayLevels="0" 
SkipLinkText="">--><!--ME:</SharePoint:AspMenu>--><!--
ME:</SharePoint:SPNavigationManager>--><!--
MS:<SharePoint:SPNavigationManager ID="TreeViewNavigationManagerV4" 
runat="server" ContainedControl="TreeView" CssClass="ms-tv-box">--><!--
MS:<SharePoint:SPLinkButton runat="server"
NavigateUrl="~site/{0}/viewlsts.aspx" ID="idNavLinkSiteHierarchyV4"
Text="&lt;%$Resources:wss,treeview_header%&gt;"
accesskey="&lt;%$Resources:wss,quiklnch_allcontent_AK%&gt;" CssClass="ms-
tv-header">--><!--ME:</SharePoint:SPLinkButton>--><!--
MS:<SharePoint:DelegateControl runat="server" 
ControlId="TreeViewAndDataSource">--><!--MS:<Template_Controls>--><!--
MS:<SharePoint:SPHierarchyDataSourceControl runat="server" 
D="TreeViewDataSourceV4" RootContextObject="Web" 
IncludeDiscussionFolders="true">--><!--
ME:</SharePoint:SPHierarchyDataSourceControl>--><!--
MS:<SharePoint:SPRememberScroll runat="server" 
ID="TreeViewRememberScrollV4" 
onscroll="javascript:_spRecordScrollPositions(this);" style="overflow: 
auto;">--><!--MS:<SharePoint:SPTreeView ID="WebTreeViewV4" runat="server" 
ShowLines="false" DataSourceId="TreeViewDataSourceV4" ExpandDepth="0"   
SelectedNodeStyle-CssClass="ms-tv-selected" NodeStyle-CssClass="ms-tv-item" 
SkipLinkText="" NodeIndent="12" ExpandImageUrl="/{0}/images/tvclosed.png" 
ExpandImageUrlRtl="/{0}/images/tvclosedrtl.png" 
CollapseImageUrl="/{0}/images/tvopen.png" 
CollapseImageUrlRtl="/{0}/images/tvopenrtl.png" 
NoExpandImageUrl="/{0}/images/tvblank.gif">--><!--
ME:</SharePoint:SPTreeView>--><!--ME:</SharePoint:SPRememberScroll>--><!--
ME:</Template_Controls>--><!--ME:</SharePoint:DelegateControl>--><!--
ME:</SharePoint:SPNavigationManager>--><!--MS:<asp:ContentPlaceHolder 
ID="PlaceHolderQuickLaunchBottom" runat="server">--><hr /><!--
MS:<SharePoint:ClusteredSPLinkButton ID="idNavLinkViewAllV4" runat="server" 
Permissions="ViewFormPages" NavigateUrl="~site/{0}/viewlsts.aspx" 
Text="&lt;%$Resources:wss,quiklnch_allcontent_short%&gt;"
accesskey="&lt;%$Resources:wss,quiklnch_allcontent_AK%&gt;" CssClass="ms-
core-listMenu-item">--><!--ME:</SharePoint:ClusteredSPLinkButton>--><!--
ME:</asp:ContentPlaceHolder>--><!--ME:</asp:ContentPlaceHolder>--><!--
ME:</SharePoint:AjaxDelta>--></div><!--CE: End Vertical Navigation Snippet-->
</div>
<!&mdash;vertical section  ends -- >
</td></tr>
</table>
</body>
</html>

Step 9: Reuploading the master page

So we did so many upates to our HTML master page. Now its time to upload the changed the HTML master page. So repeat step 4 and create master page again.

To see the effect of our updates just preview your master page you should see the master page with the structure what you wanted. You can see the how the magic of SharePoint code snippets has been sprinkled on our HTML master page.

Step 10: Publish and Apply the master page

So now everything is ready and our HTML master page is completed and saved in draft version let's publish and apply the master page.

In order to publish the master page select MyCustomMasterPage.html -> options -> Advance -> Publish as Major version as shown in the below figure.

You can now see that your master page has changed from draft to approved status.

In order to apply master page we need to go to the Design Manager -> Select Publish and Apply Design -> select Assign master page to your site based on device channel.

You can now see the master page drop down inside that you should find our custom master page i.e. "MyCustomMasterPage". So select that apply it.

Step 11: Enjoy your final output

Now just browse your site to see final output, you should see the changed master page applied.

Hope you have understand this article if you still have any doubts kindly mail us or call us in the given mentioned details.

If you want to learn sharepoint step by step feel free to touch base with us or need more resouces kindly call us.

+91-22-66752917
+91 9967590707
questpond@questpond.com / questpond@yahoo.com