SharePoint 2013 How to add HTML Master Page & Css with Design Manager

In SharePoint 2013 you can easily Use HTML Master page along with its CSS and Images for the look and feel of your sharepoint site. You do not need to work on SharePoint designer anymore.

The new tool is called Design Manager. Its actually not a tool or anything its a new fetaure added to Look and Feel in Site settings. The Design Manager assists in creating the master page from simple HTML, CSS files. The SharePoint designers or Admins only need to create these designs on an HTML editor or Notepad and Convert that into HTML, CSS and Images. Once these artifacts are ready, the design manager can process these to generate a master page.

Here are the Steps -


1.  Create the package (a simple folder) with a HTML layout, a CSS and Images that you need to use.

2.  Upload all the files to the Master Page gallery (Open your master page gallery in windows explorer and Copy the html, CSS and Images folder to the master page gallery)

3. Once done Go to the Site Settings page and Click on Design Manager (under the “Look & Feel”).

4. Click on Import Master Pages ->  Click on “Convert an HTML file to SharePoint master page” link.

5. This will open up a dialog box for you to select a html file taht you added from the master page gallery.

6.Once you select a file, SharePoint will generate a master page for that design. At this point, the master page has been generated.

7. To customize the master page click on the “Conversion successful” link.

8. This will take you to a preview page.

9. Next add SharePoint Components to the master page using Snippets Manager.

Before we start with Snippets Manager just Open the Mater page gallery in Windows Epxlorer and Open the Master page HTML file taht you uploaded.

10. To Open Snippets Manager. Click on the Snippets link in the top right corner of the preview page.

11.  This will open up the snippets gallery page.

Let’s say you want to add the top navigation to your master page.
a.       Click the Top Navigation button in the ribbon.
b.      This will create the HTML snippet you need.
c.       Copy the snippet to the clipboard.

12.       Switch to the html file that you have opened up in an editor and paste the html snippet wherever you want the top navigation to appear in your design.

13.  Save the html file.

14.  Refresh the Preview page in your browser and you will see that the master page was generated again and your changes are visible.

15. Navigate to the Master Page Gallery and approve and Publish the master page to start using it.

Please Note - While the html and the master files are associated, you cannot publish the master page file directly. You need to Remove the association first. To do this go to the master page gallery and select the html file. Edit Properties of the HML file and Uncheck the “Associated File” check box. Save the file and this will publish the master page.