Creating a New Master Page in SharePoint 2013

This article explains how to create a Master Page in SharePoint 2013 from an existing HTML page with associated graphics, scripts, CSS files, etc. This article is targeted primarily at designers who want to start customizing their SharePoint 2013 site with minimal fuss. In SharePoint 2013, designers can now use HTML, CSS and JavaScript to create dynamic pages where in previous versions it required an ASP.NET developer. This article shows a step by step example.

For this example, I have used our own web site as a starting point:

http://www.navantis.com/Portals_Collaboration.html

We’re going to convert this page into a master page for use in SharePoint 2013.

Planning Out Your Master Page

A Master Page in SharePoint represents the chrome elements of a page, e.g. those areas of the site that stay the same from page to page and the associated master styles, scripts, fonts, images, etc. that should be included on every page of your site.

For our page, we want these chunks of content in our master page as well as all the governing style sheets, JavaScript, images, etc.:

The content in the middle of the page is what will governed dynamically by SharePoint using a combination of Page Layouts and dynamic content.

Before moving to SharePoint, create a stripped down HTML file that has the chrome isolated with the appropriate images, CSS, JavaScript, etc. in folders.

The dynamic content is going to go where it says, “Dynamic content will go here”. My folder structure looks like this:

Ok, now that we’re organized, we can create our Master Page in SharePoint 2013.

Creating a SharePoint 2013 Account

Currently, you can download and install the SharePoint 2013 beta software locally, or you can create a cloud based account. I have used the cloud based account route because its easy and free for the moment. Go to http://www.microsoft.com/office/preview/en/office-365-enterprise to signup for an account and you will have your own SharePoint 2013 environment in the cloud.

The same instructions should work on a local version of SharePoint 2013 as well.

Creating a Publishing Site Collection

When you are first granted a SharePoint 2013 account, you are allocated a public facing web site and a collaboration site. You can use your public facing web site, but I recommend you create a separate Publishing Site Collection for development purposes as Microsoft only allows one public facing web site in the current cloud environment. To create a new Publishing Site Collection, go to Admin –> SharePoint –> Site Collections and click on the New Private Site Collection button.

Now that you have a Publishing Site, you can start to customize it with your new Master Page. Your default home page will look like this:

The Design Manager

If you click on “Design your site”, this will bring you to SharePoint 2013’s new Design Manager:

You can also reach this screen by clicking on the settings menu at the top right hand of the page and clicking on Design Manager

Mapping to the Master Page Directory

Click on 4. Edit Master Pages and you will see a screen like this:

We’re going to Convert an HTML file to a SharePoint master page. Click on that link and you will see this dialogue box:

This directory is the folder containing Master Page and Page Layouts as well as their dependent assets (CSS files, scripts, images, etc.). The easiest way to manage this folder is to map a network drive in Windows to this folder. To do this go to Windows Explorer, right click on your computer and select Map Network Drive. Copy and paste the URL for the location of this directory (it’s at the top of this dialogue box) and put in your login credentials. You should then get a drive letter that maps to this folder and you can copy and paste files from your local machine into SharePoint directly.

NOTE: You will get an error when you map the network drive if you don’t have the “Keep me signed in” checkbox selected when you sign into Office 2013. Sign out, delete your cookies, and re-authenticate with this box checked and it will work.

With a mapped network drive, we can simply copy our template and dependent files into this folder.

NOTE: SharePoint 2013 will allow you to create folders in this directory, so this might help in keeping organized to create a separate folder as the root of your master page and its files.

NOTE: If you cannot map the drive, you can also upload files through the UI by going to Site Settings and Clicking on Master pages and page layouts.

When you click on this you will access the same master page library that is used by the Design Manager.

If you click on files you can then upload documents and create folders through the browser UI.

Creating a Master Page from HTML

Now that we have uploaded our files, we’re going to create a Master Page. SharePoint 2013 can take your HTML file and convert it into a ASP.NET Master Page automatically. When it does this, it will link the HTML and Master Page together so that if you change your HTML file it will sync these changes into the Master Page. This allows designers to now work in their comfort zone with HTML, CSS, JavaScript, etc.

Go to the Design Manager. Click on 4. Edit Master Pages and then click on Convert an HTML File to a SharePoint master page.

Select your HTML file and click insert.

If you go to the Design Manager, you will also now see your Master Page in the list of Master Pages:

NOTE: SharePoint 2013 expects your HTML to be XML Compliant. If you have older or non-compliant HTML you will get an error. Fix your file and try again.

If you click on the Master Page, it will take you to a preview page. At the bottom of the page you will see a Yellow Box that represents the place holder where dynamic content is going to be inserted…We’re going to now move that place holder into where we want it to replace our dummy text in the middle of the page.

Download the HTML file from the SharePoint 2013 environment (you can just copy and paste it if you have a mapped network drive) and open it in your HTML editor and you will see that SharePoint 2013 has decorated your HTML with a number of tags. These tags are used by SharePoint 2013 as markup to specify where to put to insert content when it generates the Master Page. You can edit and add HTML around them and add new snippets to the HTML to add dynamic navigation, content containers, metadata etc.

In your newly improved HTML file, you will see tags in the header (used to insert metadata, title and other header information), at the top of the body (used to insert the ribbon), and at the bottom you will find a div called “ContentPlaceHolderMain”.

This is a content place holder and is used by the Page Layout to inject content dynamically. You can move this place holder into the appropriate spot in your HTML to insert the content correctly.

Publishing Your Master Page

The last step is we need to publish our master page – its currently in draft. If you don’t publish it you won’t see it in the Site Master Page Settings drop down menu. To publish your page, go to Site Settings –> Master pages and page layouts and then find your HTML file. Hit the publish button on the ribbon.

NOTE: If you try to publish the master page itself you will get an error because it is linked to the master HTML file. If you publish the HTML file, the master page is automatically published as well.

Assigning Your Master Page to your Site

Now that your master page is published, you can assign it to your site. All pages in your site will adopt this new chrome. Publish sites have two types of pages: 1) publishing pages and 2) system pages. Publishing pages are traditional web pages and System pages are views of lists, document libraries and other administrative pages. You can assign your master page to either type of pages.

To assign your master page, go to Site Settings –> Master Page (under Look and Feel) and select your master page from the drop down list (if its not there then you probably didn’t publish it successfully or it has errors). Your site will now adopt your new look and feel!

Here is my default site with the Master Page site assigned.

refer to:http://blog.navantis.com/creating-a-new-master-page-in-sharepoint-2013/