Monday, August 1, 2016

How to Create a Custom Master Page Using Design Manager in SharePoint 2016 - Step by Step

What is Design Manager in SharePoint 2013?
Design manager is a nifty tool introduced in SharePoint 2013 that uses HTML based approach to convert static HTML templates into SharePoint master pages and page layouts. Use Design manager, if you want to implement Branding and customization to your SharePoint sites. The overall idea of SharePoint design manager is: Have your web site template prototype designed by someone who is good at web design and then you use that HTML file to convert to SharePoint Master page. Lets have a SharePoint design manager walk-through.

Enable design manager in SharePoint 2013:
Design manager is enabled by default in SharePoint server publishing sites. You may have to activate publishing feature for other site templates to enable design manager in SharePoint 2013. Design manager is available only in SharePoint Server 2013/2016 and Office 365.

SharePoint 2013 design manager permissions
Make sure you have at least "Designer" permissions in order to start using the Design Manager.

How to open design manager SharePoint 2013?
You can access design manager either from Site actions menu or from site settings page as in the below screen! Design manager URL: /_layouts/15/DesignWelcomePage.aspx

design manager sharepoint 2013 missing
You'll get Design manager wizard with below steps:
  1.     Welcome
  2.     Manage Device Channels
  3.     Upload Design Files
  4.     Edit Master Pages
  5.     Edit Display Templates
  6.     Edit Page Layouts
  7.     Publish and Apply Design
  8.     Create Design Package
Among the above steps listed, we need only three steps to create/customize master pages in SharePoint 2013. Lets see how to use design manager SharePoint 2013 to create a custom master page.

Step 1: Upload Design files


Working with design manager in SharePoint 2013 is quite simple. Go to Upload Design Files: On this page it will ask you to map out your drive so that you will be able to use any HTML editor to access your design files in the future for editing. Here is how to map network drive setup for Master pages library:
  • In Design Manager, Click on "Upload Design Files" tab. You'll get the URL to map to network drive. Copy it to your clipboard.
    design manager in sharepoint 2013 step by step
  • SharePoint 2013: Design manager - map network drive: Go to Start >> Right Click on "Computer" and then choose "Map to network drive". Enter the URL you copied from SharePoint Design Manager and then click on "Finish" button.
    design manager tutorial sharepoint 2013
This opens your Master Pages library in Windows Explorer view: http://intranet.crescent.com/_catalogs/masterpage/
Its a good idea to create your own folder in Master Pages library to keep all your files in one single location. I've created my folder "Crescent" there!
In Windows Server 2008 or 2012, You have to install desktop experience feature in order to enable map network drive. Map Network Drive in Windows Server 2008 or 2012
Once you map you map a network drive to the Master Page Gallery folder, it gives you easier way to save files in the correct location.

Upload Design Files
Now upload the HTML version of your Master Page and all CSS, JS, image and any other design assets to the mapped location. The overall idea of Design manager is: You create a visual design for your website by using any web design tool or HTML editor, and then use Design Manager to import the design into SharePoint. To do this, you have to make sure that the design tool stores its files in your site’s Master Page Gallery,
sharepoint 2013 design manager step by step

Step 2: Edit Master Pages - Convert HTML template to SharePoint Master page

 A master page defines common elements across all the pages of your site. You can use the network drive you mapped earlier to edit your master pages using any HTML editor. To preview your master page, click on its file name or status. While previewing your HTML master page, use the Snippet Gallery to get code snippets for SharePoint functionality that you can copy and paste into your HTML file.
  • Go to "Edit Master Pages" tab, Click on "Convert HTML file to a SharePoint Master Page" link, 
  • Browse and locate the HTML template you uploaded in the previous step.
 design manager sharepoint 2013 tutorial
Do not edit the .master file, always edit .html file! SharePoint takes care of updating the .master page automatically.

Make sure your HTML template is XML compliant! You can use W3C Validator: https://validator.w3.org/

Wait for a while, and your HTML master page should be converted with an extension .master page. Once converted you will see the converted Master Page in the List with the status Conversion Successful. If you encounter any warnings or errors, use this link to troubleshoot: https://msdn.microsoft.com/en-us/library/office/jj822362.aspx

Modify the master page to wrap inside content place holder:
Now, Click on the "Index" file to see the preview of the HTML master page generated. If you scroll down, You'll find this below:
This div, which you should delete, represents the content area that your Page Layouts and pages will fill. Design your Master Page around this content placeholder.
Which simply tells you that this content place holder in the HTML file should be wrapped inside the appropriate content place holder of your HTML template file.
  • Open the HTML Master page file (Index.html) in SharePoint designer 2013 and find the DIV <div data-name="ContentPlaceHolderMain">
  • Move the above DIV completely inside to the content area of your HTML template file. Once moved, your HTML master page will look like:
    sharepoint design manager example
SharePoint 2013 design manager snippets 
Once the master page is generated, the next step is to add SharePoint functionality to the master page using snippets. Snippets allow you to take SharePoint widgets and plug it into your master page. E.g. Search box, Top Navigation Menu, etc.  To Access snippets, Click on your HTML master page generated, Click on "Snippets" link at the top, Pick the required component and then copy the code to your Master page using SharePoint designer or some other editing tools.

SharePoint Design Manager vs SharePoint Designer: Don't confuse SharePoint Designer with Design Manager! The Design Manager is a feature of Publishing sites and can be used to Design SharePoint Branding artifacts like Master Pages, Page Layouts, etc. 
sharepoint 2013 design manager snippets
Go to the Master Pages Library from SharePoint site, Locate and Publish the HTML Master page once.

Step 3: Apply the New Master page:

Now navigate to Site Settings >> Look and Feel >> Master Page, Select the master Page You created and click on OK to use it for the site collection.
using design manager sharepoint 2013
You can also create a package for your design to make it deployable to other site collections.



You might also like:
SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.
Document SharePoint Farm
Automatically generate SharePoint documentation.
*Sponsored


Check out these SharePoint products:

No comments :

Post a Comment

Please Login and comment to get your questions answered!

You might also like:

Related Posts Plugin for WordPress, Blogger...