Create a custom master page in SharePoint 2013/2016/Online using SharePoint designer

This SharePoint master page tutorial, we will discuss how to create a new custom master page by using existing master pages in SharePoint Online/2013/2016.

Here I am doing the demo in an Office 365 SharePoint Online site. If you have not tried yet about Office 365 SharePoint Online features, then you can sign up for a 30 days trial of Office 365 and start exploring now.

Before doing this demo also make sure you have installed SharePoint 2013 designer in your local system or any other system which you can access to make an edit. SharePoint Designer is a free tool which you can download and install from MSDN site also.

Create a custom master page in SharePoint 2013 using SharePoint designer

Now, I will see how to create a custom master page from an existing master page in SharePoint Online using SharePoint designer 2013. We will use here existing seattle.master page in SharePoint Online/2013/2016.

Open the site in SharePoint Designer 2013 -> Go to Master Page from the left pane in the designer.

create custom master page in sharepoint online

In SharePoint 2013/2016/Online there are two master pages are there:

  • Seattle.master
  • Oslo.master

Every master page has also a .html file attached to the master page like Seattle.html and Osla.html.

Here we will create a custom master page from Seattle.master page file in SharePoint 2013/2016/Online.

Select the Seattle.html file of the respective master page that you are going to edit, and right-click over it then Open With -> SharePoint Designer (Open as HTML) (it might ask to check out the file, but don’t check out).

create custom master page in sharepoint 2013

Copy the complete content of the opened HTML file into Notepad and save it into the local drive as a .html file.

create custom master page in sharepoint 2013 step by step

Now open your SharePoint site collection in a browser and go to site collection settings page. Click on “Master pages and page layouts” link under “Web Designer Galleries“. It will open all the master page and layout.

create custom master page in sharepoint designer 2013

Now upload the saved HTML file to this document library which we have saved in the previous post in SharePoint Online.

create a new custom master page in sharepoint online

Select the Content Type as “Html Master Page” in the “Add a master page” dialog, and save it.

create a new custom master page in sharepoint 2013

Now Open SharePoint Designer 2013, open the master page gallery, you can find your new master page has been created in the previous steps.

steps to create custom master page in sharepoint 2013

Now you can check out the .html file and can start editing.

Customize Custom master page in SharePoint Online/2013/2016

Now we will see how we can customize the custom master page in SharePoint 2013/2016/Online. I wanted to hide the left navigation for all of my pages from my SharePoint Online site. For that, I went to the CustomizedMasterPage.html and checked it out. I made the changes in the HTML file saved and published. Find the below screenshot.

Preview of the master page “Before editing“. You can see the left navigation presented in the SharePoint site.

steps to create custom master page in sharepoint 2013 using sharepoint designer

Here I will modify the master page. I will add a style attribute for the sideNavBox div id. Here I have added style=”display:none” like below:

After editing the HTML file in the SharePoint designer 2013.

how to create master page in sharepoint 2013 step by step

Once you save the master page and refresh the SharePoint Online site, and you can preview of the master page without the left navigation.

create custom master page in sharepoint 2013 using sharepoint designer

You may like following SharePoint master page tutorials:

Hope this article will be helpful to create a custom master page in SharePoint Online using existing Seattle master page in SharePoint 2013/2016/Online.

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope

Rakesh Nayak

>