Custom Responsive Master Page for SharePoint 2013 / Office 365 Site

Goal
Import an HTML design template and convert it into a working SharePoint Responsive master page.

Steps

  • Open your SharePoint 2013 / O365 public site in SharePoint Designer
  • In SharePoint Designer, under Navigation, click on All Files.

1rd

  • Go to _catalogs –> masterpage –> Paste the MasterSample Folder (download from here https://drive.google.com/file/d/0BxRP6sYdzK3_aEF5U3hXZTRMZHM/view?usp=sharing)
  • In the browser, open your site and go to Design Manager and click on Edit Master Pages.

2rd

  • Click on Convert an HTML file to a SharePoint master page.
  • In the dialog that appears, click on MasterSample.
  • Select SampleMaster.HTML file and Click on Insert.
  • The HTML file we uploaded now be automatically converted to a SharePoint master page. On complete, a new master page appears on the page. Click on SampleMaster to preview it.

3rd

  • The preview page shows your converted master page template. Notice the template as it appears inside SharePoint.

4rd

  • In SharePoint Designer, go to All Files –> _catalogs –> masterpage –> MasterSample.HTML –> open and click on Edit File
  • Locate the placeholders you have allotted for SharePoint controls and replace the placeholders with the respective SharePoint elements accordingly. The SharePoint control elements can be copy pasted from the Snippets page.

5rd

  • Once you are done, Click on the context menu (…) that appears next to SampleMaster.HTML. In the pop-up that appears, select the context menu (…) once again. Finally, click on Publish a Major Version.
  • In the dialog that appears, enter version comments and click OK
  • All set, we just need to apply this master page to our site.
  • Go to Site Settings –> Click on Master page under Look and Feel
  • Select MasterSample/SampleMaster and click ok
  • Go to home page and see your new master page.
  • That is you are done.

 Note:

  • Here the responsive design is handled with device width and CSS Media Query
  • To make the Main Placeholder content responsive, create your own page layout and change the css styles according to your requirement.
  • If you face any issues in downloading the sample html template zip file, please contact me.

 

 

 

Advertisements

About Joseph Velliah
As a SharePoint Developer my professional interests tend to be technical and SharePoint focused. I run a blog at "SP RIDER" where you can expect to read HOW TOs and scenarios that I run into during my day to day job. I hope my posts will give back a little to the community that is helped me.

Comments are closed.

%d bloggers like this: