Dec 10, 2012

How to Create an HTML MasterPage for SharePoint 2013

As I have stated before, HTML MasterPages are one of the big new things in SharePoint 2013, and even if they are not always the preferred option, it may prove handy in some cases (a bit of exploration of that topic in my previous article). So the question is: how to actually go about it?

1) Create your HTML structure
You can create the basic structure of the master page in any HTML editor of your liking, more or less forgetting about the SharePoint aspect altogether. I say more or less, not completely, because you need to understand what a MasterPage is, essentially, what its function is.

A MasterPage contains the basic structure of the pages, the wireframe of where elements are on every page. In SharePoint, it can also contain some controls like navigation and site logo and search. These controls are later added as snippets to the MasterPage. What you need to do now, is create the wireframe as an HTML page. 

Example (HTML5):

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
<link type="text/css" href="DemoStyles.css" />
</head>
<body>
    <header>
        <div id="sitelogo">[site logo control here]</div>
        <div id="headerright">
            <div id="subtitle">Company A Intranet</div>
            <div id="searcharea">[search control here]</div>
        </div>
    </header>
    <nav>[top navigation control here]</nav>
    <section id="mainarea">
        <nav>[left navigation control here]</nav>
        <div id="pagebody">
            [ContentPlaceHolderMain here]
        </div>
    </section>
    <footer>
        <span>Company A Intranet</span>
    </footer>
</body>
</html>


2) Create your CSS stylesheet (and graphics etc.)
You can test your site UI by adding the references to your stylesheet (and graphics) on the HTML page while still stored in your filesystem; simply change them later if the relative paths change after uploading everything to the server.

3) Upload your files to the server
Navigate to the top level site settings in your SharePoint Site Collections and open the MasterPages library under Web Designer Galleries category. Click Upload Document in the Ribbon, and browse for your HTML file and click Upload. Select HTML MasterPage as the Content Type of the file.



You can also add your CSS Stylesheet reference in the information form.

Upload your stylesheet and graphics as Design Files. You can create a separate folder for them too.


4) Convert your HTML file into a MasterPage
Navigate to the Design Manager in Site Settings, under Look and Feel and select Edit Master Pages. Note your HTML MasterPage in the list.



It still needs to be converted into a .master MasterPage, so click on Convert an HTML file to a SharePoint master page and select your MasterPage from the gallery.


Click Insert and SharePoint will convert your HTML page into a MasterPage, showing the MasterPage status as "Conversion successful".

Click on your MasterPage to open it in Preview.

5) Open your HTML MasterPage file for editing
You can either download a copy of the converted .html file from the MasterPages gallery or open the Top Level Site for editing in SharePoint Designer 2013 where you can edit the file on the fly and see the changes in the preview right away.


In SharePoint Designer: click to open the file, then click the Edit file -link.

You can see that with the conversion, SharePoint added a whole lot of code in the HTML version of the file in addition to creating the .master file. Do not delete the code added by SharePoint!

6) Add snippets to your .html MasterPage
In the browser, open the file in Preview, if you did not do this yet. Then, click on Snippets in the upper right hand corner of the Preview page.


This opens a new tab in the browser for selecting and customizing the snippets, i.e. the SharePoint controls.



Pick the snippet on the Ribbon, customize it as needed, then click on Copy to Clipboard and paste the code in the appropriate place in the HTML file.


If you are working in SharePoint Designer, save changes and refresh Preview to view the changes made by insterting the snippets.

When you are ready, save and close the HTML file and return to Design Manager in the browser.

7) Publish your design files
Navigate to the MasterPages gallery and publish your files. Your MasterPage is ready to be used.


33 comments:

StephanO said...

Thanks for your organization and examples. This is not a "walk in the park".

Stephan Onisick

Deisbel Diaz said...

Thanks a lot. It is the only decent tutorial I've found.

Khushi said...

The best and simple to understand article. I read so many articles on the same topics but none was close to this article.

Best Regards,
Khushi

SM said...

Thanks for the feedback :)

Anonymous said...

great explanation !!!

Fully Help said...

Nice blog Very useful information is providing by ur blog. Great beginning html tutorials Very clear and helpful for beginners.

Karthika Shree said...

That was a great message in my carrier, and It's wonderful commands like mind relaxes with understand words of knowledge by information's.
Sharepoint Training in Chennai

Freddie King said...
This comment has been removed by a blog administrator.
Unknown said...

ERA ESOLUTION

and grt description

Nila shri said...

Really you have done great job,There are may person searching about that now they will find enough resources by your post
Data Science Training in Chennai
Data science training in bangalore
Data science online training
Data science training in pune
Data science training in kalyan nagar

simbu said...

Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging.
java training in annanagar | java training in chennai

java training in marathahalli | java training in btm layout

java training in rajaji nagar | java training in jayanagar

java training in chennai

Mouni yoga said...

Superb. I really enjoyed very much with this article here. Really it is an amazing article I had ever read. I hope it will help a lot for all. Thank you so much for this amazing posts and please keep update like this excellent article. thank you for sharing such a great blog with us.
python online training
python training in OMR
python training course in chennai

gowsalya said...

Thank you for allowing me to read it, welcome to the next in a recent article. And thanks for sharing the nice article, keep posting or updating news article.
Devops training in sholinganallur
Devops training in velachery
Devops training in annanagar
Devops training in tambaram

Anonymous said...

Really great post, I simply unearthed your site and needed to say that I have truly appreciated perusing your blog entries. I want to say thanks for great sharing.
angularjs Training in marathahalli

angularjs interview questions and answers

angularjs Training in bangalore

angularjs Training in bangalore

angularjs online Training

angularjs Training in marathahalli

Safety Professionals said...

I really love the theme/design of your website. Do you ever run into any browser compatibility problems?
nebosh course in chennai

swashthik said...

This is the exact information I am been searching for, Thanks for sharing the required infos with the clear update and required points.
apple service center chennai
apple service center in chennai
apple mobile service centre in chennai
apple service center near me

janitha said...

This is also a very good post which I really enjoyed reading. It is not every day that I have the possibility to see something like this..
data science course malaysia
big data course malaysia
data analytics course malaysia
AI learning course malaysia
Keyword
machine learning course malaysia

Aaditya said...

Wonderful Blog, great blog post that you have provided for peoples. Its really good. Nice information.


ExcelR Data Science Bangalore

zaintech99 said...

Just saying thanks will not just be sufficient, for the fantasti c lucidity in your writing. I will instantly grab your rss feed to stay informed of any updates.
date analytics certification training courses
data science courses training
data analytics certification courses in Bangalore
ExcelR Data science courses in Bangalore

anusha said...



MEAN Stack Training in Chennai MEAN Stack Training in Chennai with real time projects. We are Best MEAN Stack Training Institute in Chennai. Our Mean Stack courses are taught by Industrial Experts which would help you to learn MEAN Stack development from the scratch.

creative web solution said...

such a nice post thanks for sharing this with us really so impressible and attractive post
are you searching for a caterers service provider in Delhi or near you then contact us and get all info and also get best offers and off on pre booking

caterers services sector 29 gurgaon
caterers services in west Delhi
event organizers rajouri garden
wedding planners in Punjabi bagh
party organizers in west Delhi
party organizers Dlf -phase-1
wedding planners Dlf phase-1
wedding planners Dlf phase-2
event organizers  Dlf phase-3
caterers services Dlf phase-4
caterers services Dlf phase-5

creative web solution said...

Alleyaaircool is the one of the best home appliances repair canter in all over Delhi we deals in repairing window ac, Split ac , fridge , microwave, washing machine, water cooler, RO and more other home appliances in cheap rates

Window AC Repair in vaishali
Split AC Repair in indirapuram
Fridge Repair in kaushambi
Microwave Repair in patparganj
Washing Machine Repair in vasundhara
Water Cooler Repair in indirapuram
RO Service AMC in vasundhara
Any Cooling System in vaishali
Window AC Repair in indirapuram

creative web solution said...

Are you looking for a maid for your home to care your baby,patient care taker, cook service or a japa maid for your pregnent wife we are allso providing maid to take care of your old parents.we are the best and cheapest service provider in delhi for more info visit our site and get all info.

maid service provider in South Delhi
maid service provider in Dwarka
maid service provider in Gurgaon
maid service provider in Paschim Vihar
cook service provider in Paschim Vihar
cook service provider in Dwarka
cook service provider in south Delhi
baby care service provider in Delhi NCR
baby care service provider in Gurgaon
baby care service provider in Dwarka
baby service provider in south Delhi
servant service provider in Delhi NCR
servant service provider in Paschim Vihar
servant Service provider in South Delhi
japa maid service in Paschim Vihar
japa maid service in Delhi NCR
japa maid service in Dwarka
japa maid service in south Delhi
patient care service in Paschim Vihar
patient care service in Delhi NCR
patient care service in Dwarka
Patient care service in south Delhi

creative web solution said...

In This Summers get the best designer umbrellas for you or for your family members we allso deals in wedding umbrellas and in advertising umbrellas For more info visit links given bellow
UMBRELLA WHOLESALERS IN DELHI
FANCY UMBRELLA DEALERS
CORPORATE UMBRELLA MANUFACTURER
BEST CUSTOMIZED UMBRELLA
FOLDING UMBRELLA DISTRIBUTORS
DESIGNER UMBRELLA
GOLF UMBRELLA DEALERS/MANUFACTURERS
TOP MENS UMBRELLA
LADIES UMBRELLA DEALERS
WEDDING UMBRELLA DEALERS
BEST QUALITY UMBRELLA
BIG UMBRELLA
Top Umbrella Manufacturers in India
Umbrella Manufacturers in Mumbai
Umbrella Manufacturers in Delhi
Garden Umbrella Dealers
Garden Umbrella Manufacturers
PROMOTIONAL UMBRELLA DEALERS IN DELHI/MUMBAI
PROMOTIONAL UMBRELLA MANUFACTURERS IN DELHI / MUMBAI
ADVERTISING UMBRELLA MANUFACTURERS

creative web solution said...

Totalsolution is the one of the best home appliances repair canter in all over Delhi we deals in repairing window ac, Split ac , fridge , microwave, washing machine, water cooler, RO and more other home appliances in cheap rates

LCD, LED Repair in Janakpuri
LCD, LED Repair in Dwarka
LCD, LED Repair in Vikaspuri
LCD, LED Repair in Uttam Nagar
LCD, LED Repair in Paschim Vihar
LCD, LED Repair in Rohini
LCD, LED Repair in Punjabi Bagh
LCD, LED Repair in Delhi. & Delhi NCR
LCD, LED Repair in Delhi. & Delhi NCR
Washing Machine repair on your doorstep
Microwave repair on your doorstep

creative web solution said...

We are the one of the top blue art pottery manufacturers in jaipur get contact us and get all informations in detail visit our site
blue pottery jaipur
blue pottery shop in jaipur
blue pottery manufacturers in jaipur
blue pottery market in jaipur
blue pottery work shop in jaipur
blue pottery
top blue pottery in jaipur
blue pottery wholesale in jaipur

creative web solution said...

Rihan electronics is one of the best repairing service provider all over india we are giving our service in many different different cities like Noida,Gazibad,Delhi,Delhi NCR

AC Repair in NOIDA
Refrigerator Repair Gaziabad
Refrigerator repair in NOIDA
washing machine repair in Delhi
LED Light Repair in Delhi NCR
plasma TV repair in Gaziyabad
LCD TV Repair in Delhi NCR
LED TV Repair in Delhi

creative web solution said...

we are one of the top rated movers and packers service provider in all over india.we taqke all our own risks and mentanance. for more info visit our site and get all details and allso get amazing offers

Packers and Movers in Haryana
Packers and Movers Haryana
Best Packers and Movers Gurugram
Packers and Movers in Gurugram
packers and movers in east delhi
packers and movers in south delhi
packer mover in delhi
cheapest packers and movers in faridabad
best Packers and Movers Faridabad

creative web solution said...

Are you searching for a home maid or old care attandents or baby care aaya in india contact us and get the best and experianced personns in all over india for more information visit our site

best patient care service in India
Male  attendant service provider in India
Top critical care specialist in India
Best physiotherapist providers in India
Home care service provider in India
Experienced Baby care aaya provider in India
best old care aaya for home in India
Best medical equipment suppliers in India

istiaq ahmed said...

Welcome to the party of my life here you will learn everything about me.
Data Science Course in Pune

malaysiaexcelr01 said...

After reading your article I was amazed. I know that you explain it very well. And I hope that other readers will also experience how I feel after reading your article.






DATA SCIENCE COURSE MALAYSIA

lucy88 said...

Just saying thanks will not just be sufficient, for the fantasti c lucidity in your writing. I will instantly grab your rss feed to stay informed of any updates.
Data Science Courses

shivam said...

Flying Shift - Packers & Movers in Bhopal