Introduction:

Hi techies,

This is my first blog in the series where, I’m going to demonstrate, how can we customize and develop application on classic team site using client-side programming (JavaScript, Angular JS 1.7.x), Office UI fabric JS, Power BI, Power Apps, MS Flow and hopes it will be very helpful for beginners.
The classic team site is still relevant today and used as well. Hence, a good starting point for beginners to learn. In this blog I’m going to describe how we can customize a SharePoint site master page, otherwise known as SharePoint branding.
With the introduction of modern sites (modern team site, communication sites) on SharePoint online, there is so many things to learn. I’ll cover the modern site, SharePoint Framework (SPFx), Power BI, Power Apps, Flow and Office UI fabric in another blog series.

Prerequisites:

1. SharePoint server publishing infrastructure must be activated for respective site collection.The feature is available under Site Collections Feature. Blog link for activating publishing feature.
2. Customization of Master Page and page layout should be enabled under SP designer settings. Blog link for enabling SharePoint designer settings.
3. SharePoint designer 2013.
4. Visual Studio Code (Optional)
5. Create a custom HTML theme with required CSS, images and JavaScript code.
6. Validate the HTML file/code before uploading. Link to w3 validator.

Let’s go to the steps to customizing SharePoint master page.

Step-1: Upload files custom HTML template.

Open the site collection on SharePoint designer and navigate to “/_catalogs/masterpage/”. To access the master page location, click on All Files and it will show “_catalogs”. Open the “_catalog” folder and upload files to “masterpage” folder under it.

Figure 1: SharePoint Online – SharePoint designer > All Files > _catalogs

Figure 2: SharePoint Online – SharePoint designer > All Files > _catalogs > masterpage

Figure 3: SharePoint Online – SharePoint designer > All Files > _catalogs > masterpage > upload files

Step-2: Convert an HTML file to a SharePoint master page.

Since, we have uploaded the HTML theme and its associated CSS, JavaScript and images, now we have to convert it to a master page. To do this navigate to,
Site Settings > Design manager

Figure 4: SharePoint Online – Site Settings > Design Manager

Under design manager click on edit master page and convert an HTML file to SharePoint master page.

Figure 5: SharePoint Online – Design Manager > Edit Master Pages > Convert an HTML file to a SharePoint master page

It will open a popup asking for selecting the HTML file to convert. Select the respective HTML file and click insert.

Figure 6: SharePoint Online – Design Manager > Edit Master Pages > Convert an HTML file to a SharePoint master page

If the HTML file is valid as per the w3 standards, then it will show in the master page section with success message.

Figure 7: SharePoint Online – Design Manager > Edit Master Pages > Convert an HTML file

Step-3: Let’s test the master page.

Now, go to the SharePoint designer and navigate to Master Pages and set the custom master page as default master page.

Figure 8: SharePoint Online- Design Manager > Set as default master page

Open the SharePoint site and check the custom master page,

Figure 9: SharePoint Online – SharePoint branding result

Note: It is important to remember that if you use any <button> tag then make sure to add type=“button” property. If this is not added then, the page will post back (submit) and you will not be able to use it. To edit the custom master page, open the custom master page HTML file from _catalogs/masterpages/ folder.

Thanks for reading 🙂

Keep reading, share your thoughts, experiences. Feel free to contact us to discuss more. If you have any suggestion / feedback / doubt, you are most welcome.

Stay tuned on Knowledge-Junction, will come up with more such articles