Deploying a new master page

In this section, we can see how to deploy a master page to a site to provide consistent Look and feel across the pages. The master page provides the chrome contents that does not change from one site to another. Any given site may have following components across all pages

• Header
• Logo, Title, Search, 
• Left navigation
• Footer

To illustrate how to deploy a master page, I have used http://www.cancer.org site as a template. 

 

In the above screenshot, contents in yellow are page level contents that change from one page to another. Contents above the yellow box are Header and contents below the yellow box are footer. Here are the steps to create a master page template and publish to a 2013 Sharepoint site. 

First, extract the raw HTML and assets for the template. Assets can be Images, CSS files, JS files and any HTML files and store in a file structure :

Create a sharepoint site collection using "PublishingSite" template and login to the site, In this tutorial, I have created a publishing site in my office 365. The default OOB publishing site looks like this

Go to Settings --> Design Manager and select option 4 from left side items (4. Edit Master Pages). You should see list of available master page templates. Click on the top link that says "Convert an HTML to a SharePoint master page". You should see a pop-up that looks like a folder structure - header says "Select an Asset". Top link provides you the path you can use to create a "mapped network drive" from your windows desktop to easily manage the files. You can also upload files using browser by going to Site Settings --> Master pages and Page Layouts.

Once you copy the files (HTML, Images, JS and CSS files), you should see the file structure in the "Select an Asset" popup. Select the HTML file
and click "Insert" to add the HTML file to master page template collection.

 Once you selected, the Designer manager should list the file and status. If the status shows any warnings or errors, click on it to see details, fix the errors.

When the status says "conversion successfull", publish the master page - Click on the "..." and click on the "..." on the popup to open the sub menu and click "Publish a Major version"

All assets (images/styles/jscripts) should also be published. Unfortunately with this approach each file has to published one by one. To get to the files,

Click on "Convert an HTML file to a sharepoint master page" link on the top. Get the url from top that says "Current Location: Master Page Gallery at" and paste it on the address bar. Navigate to the folders that hosts all assets. Select the file and under "Ribbon control", select Files --> Publish. Repeat for all files

Once masterpage is published, Site master page should be associated with the new master page template.

Go to Site Settings and select "Master Page" under "Look and Feel".  Select the new master page from dropdown for "Site Master Page".  If you want the new UI to be applied to admin pages as well. select the template for "System Master Page" as well. Click OK and logoff and login to the site. Site should have the new look :