In this document,a developer can find the steps needed to create a Master Page using Design Manager in SharePoint 2013. As we know that Microsoft has introduced Design Manager concept in SharePoint 2013 to remove the complexity of content place holders which was previously existing in SharePoint 2010/2007. Now we can use HTML5 to create our attractive branding without the need to understand the typical concepts of SharePoint 2013.

1. Flexmind Solutions www.flexmindsolutions.com +91-080-41115849
1) Create the Master page layout using HTML5 tags like Header,footer, navigation etc. For
reference one can download out of box master page named as Seattle.html and oslo.master
from master page gallery.
[Note: - Don’t make any change to OOB html master page since these are tightly coupled with
actual master page]
2) To upload the master page go to site setting , under look n feel section , click on design manager
[Note to add, which feature require to activate if Design manage missing, brief intro on Design
manager]

2. Flexmind Solutions www.flexmindsolutions.com +91-080-41115849
3) Click on Edit master page
4) Click on convert an HTML file to SharePoint master page , pop up open
Click on add new item, select the HTML file, from the file location, click ok.

3. Flexmind Solutions www.flexmindsolutions.com +91-080-41115849

4. Flexmind Solutions www.flexmindsolutions.com +91-080-41115849
Select the content type as HTML Master Page, provide the name of the style sheet associated to
master page.
Click on save.
5) Again click on add new item, to upload the CSS file. Content type for the CSS file will be Design
File.
Then click save.
6) From the Select an asset, change the View to HTML Master Pages, and select the master page
you uploaded in step 3.
Then click on Insert.
7) Once the Master page uploaded, can preview the master page, open it in new tab

5. Flexmind Solutions www.flexmindsolutions.com +91-080-41115849
If you want to add more OOB snippets to your master page, click on Snippets on the top bar.
Copy paste the required HTML Snippet, and paste it in your HTML master page, this one can do
using SharePoint designer or update it in your master page created in step 1 and then again
upload the master page as mention in the following steps.
8) Once the Master page uploaded , publish the major version

6. Flexmind Solutions www.flexmindsolutions.com +91-080-41115849
9) Publish the major version of the CSS file , From Master page gallery
10) Go to Site setting  under look n feel click on Master Page.

7. Flexmind Solutions www.flexmindsolutions.com +91-080-41115849
Click ok.
Visit the URL
Our Office Address:
Flexmind Solutions Pvt Limited
17 Main 7 Cross, BTM 2nd
Stage
Bangalore,India.
Website: www.flexmindsolutions.com
Email: support@flexmindsolutions.com
Phone: +91-080-41115849