Create a custom Master Page for SP Online

Applicable to: SharePoint 2013, SharePoint 2016, SharePoint Online

We often come across the need for using a customized master page, owing to various business needs. SharePoint has advanced much in terms of its master page design and deployment, and gives much emphasis to non-server side components (HTML5/CSS3, Bootstrap, etc.)

This article is a step by step manual on how to create a Master page in SharePoint using basics of HTML.

Step 1: Create a HTML page

In this step, we will create the HTML page that will contain the basic layout and design elements of the master page. Let us create a simple design with a header and a footer. Something like the image below –

The whitespace is where the actual SharePoint contents will be. You can download the HTML and CSS from my GitHub repo.

Step 2: Import the HTML and CSS files using SharePoint Designer (SPD)

Open up your SPD and connect to your SharePoint site (SPOnline site in this example)

Put in the SP Online site URL and login by passing credentials.

Once the site is open, click on “Master Page” on the quick launch. After that, click on “Import files” to select your HTML files.

This step will be completed once the files are uploaded. Next, we move on to Design Manager.

Step 3: Convert the HTML page to Master Page using Design Manager

Now, we will convert the HTML file uploaded in the previous step to a Master Page using Design Manager. Open up the Design Manager in your SharePoint. If that is not visible in your version of SharePoint, follow this blog to activate it.

Once it’s open, click on “Edit Master Page” -> “Convert an HTML file to a SharePoint master page”

This link will take you to below window. If you scroll down, you’ll notice the HTMP page imported via SPD will be available here. Generally, the file will be in “Draft” mode. It must be changed to a published version as shown below.

Once approved, select the file and then click “Insert”

The previous step will lead you to design manager screen, where you’ll see that your HTML file has been changed into a SharePoint Master Page.

Publish the master page from a draft to an approved version. To view the master page in your browser, click on the “Conversion Successful” link. This will give you an idea how the master page will look like. Voila!

Well, we are almost there. Just a few more steps and we are ready!!! Notice the message box in yellow? This is where the actual SharePoint elements will be displayed.

Step 4: Set the Site master page

Now locate the Site Master Page settings using the below navigation guide

Site Settings -> Look and Feel-> Master Page

In the Site Master Page category, select the newly created master page from the drop down and click on OK.

The System Master Page, which you see uses the default master page. Generally, it is not changed, as all the system pages (add new item, upload file, all modal pop ups, etc) uses this master page.

After OK is clicked, the master page is set. Go ahead and create a new page under “Pages” library. Once created, we can edit the page and add various artifacts as needed. Here is how a demo page looks like.

This concludes the creation of a simple master page for SharePoint from scratch. We can extend the master page further in adding some SharePoint snippets, removing default SharePoint banner, etc. We will look into it in our next blog.

Happy reading!

 3,403 total views,  2 views today