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 HTML.
Step 1 - Create an 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,
![SharePoint]()
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 your SPD and connect to your SharePoint site (SPOnline site in this example).
Put in the SP Online site URL and log in by passing the 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 complete 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 the Design Manager in your SharePoint.
Once it’s open, click on “Edit Master Page” - “Convert an HTML file to a SharePoint master page”.
This link will take you to the below window. If you scroll down, you’ll notice the HTML 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.
![SharePoint]()
Once approved, select the file and then click “Insert”.
The previous step will lead you to the 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 of 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.
Note
The System Master Page, which you see, uses the default master page. Generally, it is not changed, as all the system pages (add a new item, upload file, all modal pop-ups, etc) use 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.
![SharePoint]()
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.