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

These days most users 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.

I will also show you, how to change the master page in SharePoint Online.

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

SharePoint Design Manager

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

Here is Master Page that I will use.

create master page in sharepoint 2013 using design manager
create master page in sharepoint 2013 using design manager

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 the 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.

create master page sharepoint online design manager
create master page SharePoint online design manager

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

create master page in sharepoint 2013 using design manager
create master page in sharepoint 2013 using design manager

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

add an html Master Page to SharePoint 2013 using Design Manager
add an html Master Page to SharePoint 2013 using 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.

create custom master page in sharepoint online
create custom master page in sharepoint online

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

create custom master page in sharepoint 2013 step by step
create custom master page in sharepoint 2013 step by step

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

sharepoint branding 2013 tutorial
sharepoint branding 2013 tutorial

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

sharepoint branding 2013 step by step
sharepoint branding 2013 step by step

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

how to create master page in sharepoint 2013 step by step
how to create master page in sharepoint 2013 step by step
create master page in sharepoint 2013 using design manager
create master page in sharepoint 2013 using design manager

6. After following the above set you can see that a Html while gets converted to a master page. Refer to the screen.

sharepoint 2013 custom master page branding tutorial
sharepoint 2013 custom master page branding tutorial
sharepoint 2016 custom master page branding tutorial
sharepoint 2016 custom master page branding tutorial

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

create custom master page in sharepoint 2013 using sharepoint design manager
create custom master page in sharepoint 2013 using sharepoint design manager

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 to below screens.

See also  LepideMigrator for Documents Product Review (Kernel Migrator for SharePoint)
create custom master page in sharepoint 2016 using sharepoint design manager
create custom master page in sharepoint 2016 using sharepoint design manager

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.

create custom master page in sharepoint online using sharepoint design manager
create custom master page in sharepoint online using sharepoint design manager

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

custom master page in sharepoint online using design manager
custom master page in sharepoint online using design manager

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 the 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 it like the 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 a 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 missing sharepoint 2013
Design manager is missing in SharePoint

The design manager is missing in SharePoint

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

See also  How to Check if an item exists in a SharePoint list using Power Automate?

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

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

design manager missing in sharepoint online
Design manager is missing in SharePoint

Enable Site collection features as part of Site Collection Administration.

design manager missing sharepoint 2013

Enable the “SharePoint Server Publishing Infrastructure” feature.

design manager not showing in sharepoint online
enable design manager in team site in SharePoint

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.

design manager not available in sharepoint online

Enable the “SharePoint Server Publishing” feature.

Design manager is missing in SharePoint 2013/2016/Online
enable design manager in team site in SharePoint

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

design manager in sharepoint online not visible
enable design manager in team site in SharePoint

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

Change the master page in SharePoint Online

Microsoft has already provided various ways to change the master page in SharePoint Online.

Let us check step by step how to change the master page in SharePoint Online.

Change master in SharePoint Online using Browser

Now, we will see how to change master page in SharePoint Online by using the out of box feature from the browser itself.

Step 1: Log in to your SharePoint Online site -> Site settings -> click on the Master page Under Look and Feel.

Note: Make sure you should have the SharePoint server publishing feature should be enabled.

change master page in sharepoint online
SharePoint Online change master page

Step 2: By default, you can see two master pages: seattle and oslo in the dropdown.

If you have created any custom master pages in SharePoint, those will also appear in the same dropdown.

How to change master page in SharePoint Online
SharePoint Online master page

Step 3: Now my Default master page is already set as Seattle.master. So if I want to change it to oslo.master or any other master page then we have to select it here and click on OK to set as default master page.

change master page in sharepoint
change master page in sharepoint

This is how you can change the master page to oslo in SharePoint Online.

Change the master page using SharePoint Designer

Now, we will see how to change the master page using SharePoint Designer in SharePoint Online.

Step 1: Log in to the SharePoint Designer 2013 -> Go to the Master Page section -> Select the Master page -> Set as default Master Page.

set default master page in SharePoint Online

Change the master page using Master Page Gallery in SharePoint Online

Now, we will see how to change the master page from the master page gallery in SharePoint Online.

See also  SharePoint Online Organization Chart Web Part - Complete tutorial

If you have created a SharePoint Online master page using SharePoint Designer or SharePoint design manager, then you can upload it here.

In order to set a new master page will have to upload it to the Master page Library which is located at https://domain.sharepoint.com/_catalogs/masterpage

Change master page in SharePoint
change master page in sharepoint

To assign the master page to your SharePoint Site, Go to Site Settings > Design Manager > Publish and Apply Design > Assign master pages to your site based on the device channel.

change master page in sharepoint 2013
change master page in sharepoint 2013

Choose your Master page from the dropdown, and specify whether you want to “Reset all subsites to inherit this site master page setting” or not. Then hit OK.

set master page in sharepoint 2013
set master page in sharepoint online

After a refresh you should see your new master page in action in the SharePoint Online site.

Note: Sometimes Master page option will disappear in the SharePoint site so don’t worry at that time, Just go to the Site feature and activate the publishing feature.

set default master page in SharePoint Online
change master page in SharePoint Online

Set master page for a particular page in SharePoint

Recently we were working in a public-facing SharePoint 2013 site, where we created our own custom master page and we applied it throughout the site collections.

By default when you change the master page from Site Settings -> Master Page which is under Look and Feels. The master page will be applied to the whole SharePoint site.

But according to one of my requirements in one of the page we need to set the default Seattle master page.

For this, we have to change the master page on the particular page with the help of SharePoint Designer 2013.

Open the SharePoint site using SharePoint Designer 2013.

Let us say the particular page presented in the Site Pages document library then click on Site Pages under Site Objects in SharePoint Designer. And then right-click on the particular page and click on Edit File in Advanced Mode.

Set master page for a particular page in SharePoint
Set master page for a particular page in SharePoint

By default when you open any site you can see by default the master page file path will be like the below:

MasterPageFile="~masterurl/default.master"
Set master page for a particular page in SharePoint Online
Set master page for a particular page in SharePoint

Now let us say if you want to set the master page as Seattle master page then modify the tag like below:

MasterPageFile="/_catalogs/masterpage/Seattle.master"
Set master page for a particular page in SharePoint 2013
Set master page for a particular page in SharePoint

Then save the page and refresh the page in the browser. You will see the particular page will use the Seattle.master page.

Hopefully, this sharepoint branding article will help you to create a master page in SharePoint online using design manager. In the same way, we can create a custom master page using design manager in SharePoint Online or SharePoint 2013/2016. I have also explained, how to change the master page of a SharePoint Online site.

You may also like:

  • >