I am working on SharePoint 2013 pilot project and I need to integrate customized HTML into Master page for this (publishing site). SharePoint 2013 Preview comes up with new feature called “Design Manager” (This feature available only for publishing site).
In SharePoint 2010 we have an option to create a customized master page using SharePoint Designer 2010 (in most cases). Design Manager allows us to create a Master Page in SharePoint 2013 from an existing HTML page which has associated graphics, scripts, CSS files, Java Scripts, JQuery etc. In previous versions it required an ASP.NET developer to create dynamic pages, but Design Manager Feature allows designers to create dynamic pages. We can integrate HTML using SharePoint Designer 2013 as well.
I have created a HTML which looks like below image (which I am going to convert into Master Page)
Design/Plan your Master Page
Generally, Master page in any technology represents elements which remains same from page to page and associated with master styles, scripts, fonts, images etc. Same concept applies for SharePoint master pages as well.
The content in the below part of the page is what will governed dynamically by SharePoint using a combination of Page Layouts and dynamic content. I will add few more design areas later on into the same master page.
I have designed my HTML and the folder structure for this looks like :
Now We are ready to create Master Page in SharePoint 2013.
Create a SharePoint 2013 Account
I have used cloud based environment to deploy this Master page because its easy and free for the moment. You can download and install the SharePoint 2013 Preview and work locally as well. You can create an account from here to signup for an account.
Create Publishing Site Collection
Once you are done with your SharePoint 2013 account creation, you are allocated a public facing web site and a collaboration site along with Central Administration area to manage all your site collection and sites. You can use public facing web site as well, but I would recommend to create a separate Publishing Site Collection as Microsoft allows one public facing web site in the current cloud environment.
To create it, go to Admin—SharePoint—Site Collection and click on the New Private Site Collection link.
It will allow you to create a Site Collection using different templates. We will use “Publishing Portal” Template.
Now we have a Publishing Site ready, we can start to customize it with new Master Page. The Default home page will look like this:
How to use Design Manager
You can see two different areas on the default home page. One for Information Architecture and second for Visual Designer. If you click on “Design your site”, this will bring you to SharePoint 2013’s new Design Manager:
Note: 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
Map Master Page Directory
Click on 4. Edit Master Pages and you will see a screen like this:
Now we are going to Convert an HTML file to a SharePoint master page (as i said earlier). 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.). I have already uploaded the folder structure (you can see css, images, and fonts folder in above screen). You can manage this folder by mapping to network drive in Windows.
Note: Upload all your folders and .HTML page at this location
Creating Master Page from HTML
Go to the Design Manager. Click on 4. Edit Master Pages and then click on Convert an HTML File to a SharePoint master page. You will see your HTML page over there. Select that page and click on “Insert” button. It will insert master page into Design Manager’s Master pages list.
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.
To preview this page, click on the Master 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.
When you insert HTML page into Master Pages list, it would be in Draft version. We need to publish it otherwise it will not be available in Site Master Page Settings drop down. To publish it, go to Site Settings — Master pages and page layouts and then find your HTML file. Hit the Publish button on the ribbon.
To assign master page, go to Site Settings –> Master Page (under Look and Feel) and select your master page from the drop down list. Your site will now adopt your new look and feel.
My page looks like this after publishing it on SharePoint 2013.
Hi kp, It is very good post…thanks for sharing information.
Thank you for your blog post.Thanks Again.
I am in Norway right now working with one my client, My client is asking me to do some branding work in SharePoint 2013 on CloudShare, it’s gonna be a POC, I was reading your article and I found it very useful for me to get started, I am a SharePoint developer and not a designer, If you could help me with some HTML and CSS files so that I can get started the branding on SharePoint 2013 sites.
this would be your great help.
You can use any kind of HTML (even simple table) to use for your POC or you can get HTML of any OOTB site from SharePoint Designer 2013 and start working on it.
I will provide you sample file if you are not able to get the required details from SPD 2013.
i have followed all of your steps and all seems to be working fine.
but after i applied my new master page to the system master page i cannot add any new apps i.e. i cannot create new list or document libraries…
this is the only issue i have come across so far. have you come across this? am i missing something?
I did not come across this kind of issue yet. But i will figure out and try to re-produce from my end.
How do you add the top navigation menu? Via Snippet Gallery? Can you share your html so that I can learn from the content?
I have uploaded HTML using Design Manager. Top navigation itself covered in HTML. Will share sample HTML.
Can you upload your HTML to be shared?