How to create a custom master page in SharePoint using design manager

These days most of the user want to use their own master page in SharePoint 2013 Or Office 365. Here we will discuss how to create a custom master page using design manager in SharePoint Online/2013/2016.

Step by step we will see how to create custom master page in SharePoint 2013 using design manager.

SharePoint Design Manager

Design Manager is SharePoint 2013 is a new feature which can be very useful for SharePoint designers. With SharePoint Design Manger you can now create a custom SharePoint Master Page out of simple Html Page Template in SharePoint 2013/2016 or SharePoint Online.

Here is Master Page that I will use.

The Design Manager is not activated by default in SharePoint 2013/2016 Or in Office 365.

1. Activate the feature “SharePoint Server Publishing Infrastructure” present in the site collection level in SharePoint Online site. This can be navigated as Settings -> Site settings -> Site collection features (under Site Collection Administration) -> SharePoint Server Publishing Infrastructure -> Click on Activate.

2. Once the site collection feature has been activated in the above step, then navigate to the subsite, and activate the Site Feature –> “SharePoint Server Publishing“. This can be navigated as – Settings -> Site settings -> Manage site features (under Site Actions) -> SharePoint Server Publishing -> Click on Activate

3. Now we can see that the Design Manager is activated and is available in the Site Settings page. Go to Site Setting -> Look and Feel ->Design Manager

Create a custom master page in SharePoint using Design Manager

Now, let us see how to create a custom master page in SharePoint using design manager.

1. Upload HTML Master Page in Master Page Gallery in SharePoint Online or SharePoint 2013/2016.

2. Add the Required Scripts, CSS, Images and other files.

3. Navigate to Design Manager (Settings- >Look and Feel – > Design Manager)

4. In Design Manager select 4 option Edit Master Pages.

5. Next Select Convert an Html file to a SharePoint master page like below:

6. After following above set you can see that a Html while get convert to master page. Refer below the screen.

7. After master page got generated need to go to Site settings- > Master Page Gallery and need to Publish HTML with major version. Refer below the screen.

8. Finally, we need to apply the new master page (Settings- >Look and Feel – > Design Manager- >Publish and Apply Design – > Assign master page to your site based on device channel.) Refer below screens.

In the Site Master Page Settings page, you can change the System Master page as our new custom master page in SharePoint Online/2013/2016.

Your Final Office 365 (O365) SharePoint Online site screen will look like below:

Site Title snippet in SharePoint custom master page

This SharePoint tutorial explains, how to add site title in SharePoint 2013/2016/Online custom master page. The Site title snippet can be generated from design manager in SharePoint 2013/2016/Online.

Recently we created a SharePoint 2013 custom master page and somehow we miss the site title snippet. So when we apply the custom master page in a SharePoint site collection, the SharePoint site title did not appear in the pages.

Below is the code you can add in the mycustommasterpage.html and the SharePoint site title will automatically reflect in the .master page.

<h1 id="pageTitle" class="ms-core-pageTitle">
<!–SPM:<SharePoint:AjaxDelta id="DeltaPlaceHolderPageSiteName" class="ms-core-navigation" runat="server">–>
<!–SPM:<asp:ContentPlaceHolder id="PlaceHolderSiteName" runat="server" >–>
<!–SPM:<SharePoint:SPLinkButton runat="server" NavigateUrl="~site/" id="onetidProjectPropertyTitle1″ >–>
<!–SPM:<SharePoint:ProjectProperty Property="Title" runat="server" />–>
<!–PS: Start of READ-ONLY PREVIEW (do not modify)–>Default Publishing Site<!–PE: End of READ-ONLY PREVIEW–>
<!–SPM:</SharePoint:SPLinkButton>–>
<!–SPM:</asp:ContentPlaceHolder>–>
<!–SPM:</SharePoint:AjaxDelta>–>
</h1>

But if you want to put in the master page (.master file) directly then you can add like below:

<SharePoint:ProjectProperty Property="Title" runat="server"/>

If you want that to come as a hyperlink, then you can use like below:

<SharePoint:SPSimpleSiteLink NavigateUrl="~sitecollection/" runat="server" id="sitelink"> </SharePoint:SPSimpleSiteLink>

Here, we learned how to use the SharePoint Site Title snippet in the SharePoint 2013/2016/Online custom master page, so that the Site title will appear in the sites, where the custom master page has been applied.

SharePoint Design manager is missing

If you do not the SharePoint design manager, then follow this to solve the design manager is missing option in SharePoint 2013/2016/Online.

Recently, in SharePoint 2013 on-premise environment “Design Manager” option is missing as part of the SharePoint Site Setting gear icon. But the same solution will work to enable the design manager in SharePoint 2016 or SharePoint Online.

Design manager is missing in SharePoint

In SharePoint 2013 “Designer Manager” will comes by default as part of publishing SharePoint site collection, if the site collection is created with team site template you need to enable publishing features.

Follow the below steps to enable “Design Manager” in SharePoint 2013 on-premise environment.

Click on site settings gear icon and navigate to Site Settings.

Enable Site collection features as part of Site Collection Administration.

Enable the “SharePoint Server Publishing Infrastructure” feature.

Once the publishing feature is enabled as part of Site collection features navigate back to site settings (step 1)

Click on “Manage Site Features” as part of Site Actions in SharePoint.

Enable the “SharePoint Server Publishing” feature.

Now if you click on the Site settings gear icon you can see “Design Manager“.

This is how to enable the design manager is SharePoint 2013/2016/Online.

You may like the following SharePoint tutorials:

• Customize access denied page in SharePoint
• How to create a form in SharePoint designer 2013
• SharePoint List View Item filter based on Query String
• Page Viewer Web Part in SharePoint Online/2013/2016
• How to Change Layout of a Page in SharePoint 2013
• Follow/Unfollow SharePoint Online Site
• You may be trying to access this site from a secured browser on the server. Please enable scripts and reload this page

Hopefully, this sharepoint branding article will help you to create a master page in SharePoint online using design manager. The say way we can create a custom master page using design manager in SharePoint Online or SharePoint 2013/2016.