SharePoint Online – Customization and Developing application on SharePoint using client site scripting and Office 365 services such as Power BI, Power Apps, MS Flow – Part 1
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.
- 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.
- Customization of Master Page and page layout should be enabled under SP designer settings. Blog link for enabling SharePoint designer settings.
- SharePoint designer 2013.
- Visual Studio Code (Optional)
- 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.
Step-2: Convert an HTML file to a SharePoint master page.
Site Settings > Design manager
Under design manager click on edit master page and convert an HTML file to SharePoint master page.
It will open a popup asking for selecting the HTML file to convert. Select the respective HTML file and click insert.
If the HTML file is valid as per the w3 standards, then it will show in the master page section with success message.
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.
Open the SharePoint site and check the custom master page,
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