Steps To Create Custom Master Page In SharePoint 2013 Using Design Manager

Introduction

SharePoint master pages gives the common page layout and interface for SharePoint pages. Master pages provides the same look and feel for all the pages in our site. It lets you create and update the header, navigation links and Site Actions menu elements in one place, rather than changing them on each Web page. Using Design Manager, the branding and customization can be done in SharePoint 2013. Design Manager is available on publishing the site template. In this article I will explain, how to create a custom Master page in SharePoint 2013, using Design Manager.

Pre-Requisites

1. Go to SharePoint 2013 central administration site.
   
   
2. Create new publishing portal site collection.
   
   
   
   
3. Create a static HTML page design with CSS, JavaScript and images for the master page.
   
   
   

Create Master Page

1. Open SharePoint publishing site, which we created.
   
   
2. Go to Site Action -> Design Manager or Site Action -> Site Settings -> Design Manager under “Look and Feel”.
   
   
   
   
3. Design Manager Page opens.
   
   
   
   
4. Click “Upload Design Files” link in the left navigation menu.
   
   
   
5. Click on the link, as show in the page to upload your design files.
   
   
6. Catalog master pages opens. Click on “New Folder” under files menu.
   
   
   
   
7. Name it as CustomMaster.
   
   
   
   
8. Open CustomMaster folder and create map folder for our CSS, Scripts and Images.
   
   
9. Add our static HTML file, CSS, JS and the images in the respective folders.
   
   
   
10. Publish the NewHTMLPage as a major version.
    
    
    
11. Go to Design Manager -> Edit master pages.
    
    
    
12. Click “Convert an HTML file to a SharePoint master page”.
    
    
    
13. Select HTML file, which we uploaded and published for the conversion.
    
    
    
    
14. HTML file successfully converted in to the master page.
    
    
    
15. Click on the master page preview and create it without any error.
    
    
    
    
16. If we want to edit HTML file, click Snippets in the top menu bar of the preview page.
    
    
    
    
17. Add SharePoint components like the top navigation, Web parts and other controls. Click “Update” to generate the new snippet.
    
    
    
    
18. Copy the code snippet to HTML file. After doing HTML changes, upload it again.
    
    
19. After doing all HTML changes, go back and publish the master page as a major version in Design Manager.
    
    
    
20. If we want to edit this master page design, go to SharePoint designer and edit HTML file. Hence, the corresponding master page gets updated automatically and published as a major version.
    
    
21. To set this master page to our portal pages, go to Site Action -> Site Settings.
    
    
    
    
22. Click master page under Look and Feel.
    
    
23. Select the new created master page and click OK.
    
    
    
24. Go to SharePoint portal in the Browser. We applied our custom master page. Site pages will appear with our custom master page changes.
    
    
    

Summary

Thus, you have learned how to create a custom master page in SharePoint 2013, using Design Manager.