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.

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

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

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.

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

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

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

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.

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.

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

You may like following SharePoint master page tutorials:

• Create a custom master page using Design Manager in SharePoint Online/2013/2016
• SharePoint Online Step by Step Tutorial on how to create a new custom master page by using the existing master page
• SharePoint 2013 Create a custom master page using Visual Studio 2013
• Site Title snippet in SharePoint 2013 custom master page
• Only Content controls are allowed directly in a content page that contains Content controls SharePoint 2013 Page Layout
• Sorry something went wrong the file masterurl custom.master is not a valid master page
• How to hide a master page div when displayed in a SharePoint dialog box?
• Creating a fixed width master page in SharePoint 2013
• Create a responsive mobile master page using SharePoint 2013 designer
• Change Master Page using PowerShell in SharePoint 2013
• Steps to create a master page using design manager in SharePoint 2013/2016/Online
• Convert an HTML page into a SharePoint master page using Design manager

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.