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.


71 comments:

Stephan said...

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

Stephan Onisick

Unknown 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 !!!

Unknown said...

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

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

ERA ESOLUTION

and grt description

nilashri 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

Mounika 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

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

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

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

gautham said...

At azure, there are many benefits learn on azure microsoft azure training

gautham said...

At sql we can learn all the concepts related to sql. sql is a query language
sql online training

gautham said...

This is the best blog to learn on ui online training india

vijay said...

Awesome..I read this post so nice and very imformative information...thanks for sharing
aws Training in Bangalore
python Training in Bangalore
hadoop Training in Bangalore
angular js Training in Bangalore
bigdata analytics Training in Bangalore
python Training in Bangalore
aws Training in Bangalore

dras said...

Nice post..
inplant training in chennai
inplant training in chennai
inplant training in chennai for it.php
Australia hosting
mexico web hosting
moldova web hosting
albania web hosting
andorra hosting
australia web hosting
denmark web hosting

raju said...

excellent
inplant training in chennai
inplant training in chennai for it
panama web hosting
syria hosting
services hosting
afghanistan shared web hosting
andorra web hosting
belarus web hosting
brunei darussalam hosting
inplant training in chennai

ammu said...

very good information....!!!
text animation css
animation css background
sliding menu
hover css
css text animation
css loaders
dropdown menu
buttons with css

tejaswini said...

it's really cool blog. Linking is very useful thing.you have really helpedbig data analytics course
data scientist course in malaysia
data analytics courses

Anonymous said...

Really impressed! Everything is very open and very clear clarification of issues. It contains truly facts. Your website is very valuable. Thanks for sharing.
tableau certification
360DigiTMG

Dinesh said...

It is a very helpful data. It will help to improve my knowledge about this topic. Thank you for this awesome post.
Corporate Training in Chennai
Corporate Training institute in Chennai
Spark Training in Chennai
Social Media Marketing Courses in Chennai
Graphic Design Courses in Chennai
Oracle Training in Chennai
Appium Training in Chennai
Tableau Training in Chennai
Power BI Training in Chennai
Linux Training in Chennai
Corporate Training in OMR

svrtechnologies said...

I am reading your post from the beginning, it was so interesting to read & I feel thanks to you for posting on azure course such a good blog, keep updates regularly..

ss said...

Cool stuff you have and you keep overhaul every one of us

pmp course

IT Software Training Institute said...


Artificial Intelligence AI Course in Bangalore with 100% placement. We are the Best Artificial Intelligence AI Course Institute in Bangalore. Our Artificial Intelligence AI course and Certification courses are taught by working professionals who are experts in Artificial Intelligence AI.

Artificial Intelligence AI Training in Bangalore

Artificial Intelligence AI course in bangalore

Artificial Intelligence AI in bangalore

Artificial Intelligence AI classes in bangalore

Artificial Intelligence AI course institute in bangalore

Artificial Intelligence AI course and Certification course syllabus

best Artificial Intelligence AI course

Artificial Intelligence AI course centers

dataexpert said...

Very nice job... Thanks for sharing this amazing and educative blog post! ExcelR Data Analytics Course Pune

tejaswini said...

Such a very useful article. Very interesting to read this article.I would like to thank you for the efforts you had made for writing this awesome article.
data science course
data science course in malaysia
data science certification
data science course malaysia
data scientist course in malaysia

david said...

Article is really Admired.

Data Science Training Course In Chennai | Data Science Training Course In Anna Nagar | Data Science Training Course In OMR | Data Science Training Course In Porur | Data Science Training Course In Tambaram | Data Science Training Course In Velachery



yash said...

You completed certain reliable points there. I did a search on the subject and found nearly all persons will agree with your blog.

data science course in vizag

yash said...

You completed certain reliable points there. I did a search on the subject and found nearly all persons will agree with your blog.


data science course in vijayawada

lavanya said...

Interesting Post. Looking for this information for a while. Thanks for Posting. c Software Testing Training in Chennai | Software Testing Training in Anna Nagar | Software Testing Training in OMR | Software Testing Training in Porur | Software Testing Training in Tambaram | Software Testing Training in Velachery

Data Science pune said...
This comment has been removed by the author.
latchu kannan said...

I really enjoyed a lot by reading your post thank you so much for providing this information.

AngularJS training in chennai | AngularJS training in anna nagar | AngularJS training in omr | AngularJS training in porur | AngularJS training in tambaram | AngularJS training in velachery



DataScience Specialist said...

I am overwhelmed by your post with such a nice topic. Usually I visit your blogs and get updated through the information you include but today’s blog would be the most appreciable. Well done!
Data Science Training in Bangalore

Training for IT and Software Courses said...

Wow it is really wonderful and awesome thus it is very much useful for me to understand many concepts and helped me a lot.

SAP HCM Online Training

SAP HCM Classes Online

SAP HCM Training Online

Online SAP HCM Course

Training for IT and Software Courses said...

Thank you for excellent article.You made an article that is interesting.

SAP HANA Online Training

SAP HANA Classes Online

SAP HANA Training Online

Online SAP HANA Course

SAP HANA Course Online

Training for IT and Software Courses said...

I have recently visited your blog profile. I am totally impressed by your blogging skills and knowledge.

RPA Training in Bangalore

Best RPA Training Institutes in Bangalore

EXCELR said...

Well Explained Content thanks For Sharing The Information With Us
Data Science Course in Hyderabad

tejaswini said...

Took me time to read all the comments, but I really enjoyed the article. It proved to be Very helpful to me and I am sure to all the commenters here! It’s always nice when you can not only be informed, but also entertained!data science course malaysia

radhika said...

Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts.

AWS training in Chennai

AWS Online Training in Chennai

AWS training in Bangalore

AWS training in Hyderabad

AWS training in Coimbatore

AWS training

Jackie Co Kad said...

Great Article
Artificial Intelligence Projects

Project Center in Chennai



JavaScript Training in Chennai

JavaScript Training in Chennai

Anonymous said...

very well explained. I would like to thank you for the efforts you had made for writing this awesome article. This article inspired me to read more. keep it up.
Correlation vs Covariance
Simple Linear Regression
data science interview questions
KNN Algorithm
Logistic Regression explained

EXCELR said...

Very interesting to read this article.I would like to thank you for the efforts. I also offer Data Scientist Courses data scientist courses

KITS Technologies said...

What as up, I read your blogs like every week. Your writing style is awesome, keep up the good work!
ios online online training
Iot online online training
Java online online training

delfen said...

This blog is really helpful to deliver updated educational affairs over internet which is really appraisable. I found one successful example of this truth through this blog. I am going to use such information now


Data Science Training in Chennai

Data Science Training in Velachery

Data Science Training in Tambaram

Data Science Training in Porur

Data Science Training in Omr
Data Science Training in Annanagar

data analytics course hyderabad said...

I just got to this astounding site in the no so distant past. I was really caught with the bit of assets you have here. Huge approval for making such superb blog page!
data scientist course

MAKSIM ALEK said...

I think you have a great article here, But let me share with you all here about my experience with a loan lender called Benjamin Lee who helped me expand my business with his loan company that offered me a loan amount of 600,000.00 USD which I used to upgrade my business months ago. He was really awesome working with him because he a Gentle man with a good heart, a man who can listen to your heart beat and tell you that everything will be OK, when I contacted Mr lee it was on my Facebook page that his advert came up then I visited his office at Michigan to discuss about the loan offer that he and his company render, He makes me understand how all process go then I decided to give a try to it was successful just like he promised, yeah I believe him, I trust him, I rely on him as well about all my project he will be my dear financial officer and I'm glad my business is probably going well and I'm going makes my business growth like grass with his help.he work's with a great investors and guess what? They also give international loans. Is that not awesome to hear when you know a lot of business project are growing up each day by day in your heart hoping that you going to make income of that job to raise money for the project, Ops, then Mr Lee will help you with that, Yes international loan he will help you with that perfectly because I trust him very much for that kind of job, Look don't be shy or shaded give a possible try to Mr lee here his contact : 247officedept@gmail.com

Excelr Tuhin said...

keep up the good work. this is an Ossam post. This is to helpful, i have read here all post. i am impressed. thank you. this is our site please visit to know more information
data science training in Hyderabad

dataanalyticscourse said...

We very much appreciate your hard work as a knowledge provider, which has helped us through a difficult period.
machine learning course malaysia

360digiTMG Training said...

A good blog always comes-up with new and exciting information and while reading I have feel that this blog is really have all those quality that qualify a blog to be a one.
Data Science Training in Hyderabad

vé máy bay từ hàn quốc về Việt Nam said...

Mua vé máy bay tại đại lý Aivivu, tham khảo

Vé máy bay đi Mỹ

giá vé máy bay đi từ mỹ về việt nam

giá vé máy bay đi nha trang

vé máy bay đi phú quốc bao nhiêu tiền

ve may bay di Hue gia bao nhieu

traininginstitute said...

First You got a great blog .I will be interested in more similar topics. I see you have really very useful topics, I will be always checking your blog thanks.
business analytics course

3RI Technologies said...

Thanks for sharing the article on the basics of HTML, good piece of content loved to read,keep sharing.

Data Science Training in Pune

data scientist course said...

Amazingly by and large very interesting post. I was looking for such an information and thoroughly enjoyed examining this one. Keep posting. An obligation of appreciation is all together for sharing.360digitmg
data scientist training in hyderabad

training institute said...

This post is very simple to read and appreciate without leaving any details out. Great work!
data scientist training in malaysia

Techwriter said...

I recently came across your article and have been reading along. I want to express my admiration of your writing skill and ability to make readers read from the beginning to the end.
Data Analytics Courses In Pune

What are the cryptocurrency wallets said...

ledger wallet bitcoin
other virtual currencies
bitcoin wallet id
digital wallet definition
crypto wallet free
encrypted security systems
exchange wallets cryptocurrency
physical crypto wallet
bitcoin cloud wallet

Unknown said...

Get the best AWS Training in Chennai from Infycle Technologies, the best software training institute, and Placement center in Chennai. We also come up with technical courses like Oracle, Java, Data Science, Big data, Python, Manual and Automation Testing, DevOps, Medical Coding etc., After completion of course, students will be able to obtain jobs from top MNC’s. For more updates call 7504633633.

Unknown said...

If you don"t mind proceed with this extraordinary work and I anticipate a greater amount of your magnificent blog entries business analytics course in mysore

Career Academy Center said...

I'm always looking online for articles that can help me. I think you also made some good comments on the functions. Keep up the good work!


Business Analytics Course in Kolkata

Data Science said...

Amazingly by and large very interesting post. I was looking for such an information and thoroughly enjoyed examining this one.
Keep posting. An obligation of appreciation is all together for sharing.
data science course in gwalior

360DigiTMG said...

I wanted to leave a little comment to support you and wish you a good continuation. Wishing you the best of luck for all your blogging efforts.
data science coaching in hyderabad

Career Academic institute said...

360DigiTMG offers advanced and job-ready Data Science Courses in the market with placement assistance. Mold your career into a success.

Data Science in Bangalore

Swarnalatha said...

"If you are also one of them and want to know what the companies demand from the data scientists to do in their organization, you have come to the right place.data science course in kolkata"

Swarnalatha said...

I found the section on exploratory data analysis in this post to be informative and well-explained. 360DigiTMG provides data analyst course in bangalore