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.


316 comments:

«Oldest   ‹Older   201 – 316 of 316
Priya Rathod said...

Nice blog to read, Thanks for sharing this valuable article.
Python Training in Hyderabad
Python Course in Hyderabad

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

princika said...

I want to leave a little comment to support and wish you the best of luck.we wish you the best of luck in all your blogging enedevors.
data science course in chennai

Maneesha said...

I'm hoping you keep writing like this. I love how careful and in depth you go on this topic. Keep up the great work
data scientist course in hyderabad

Rohini said...

Truly, this article is really one of the very best in the history of articles. I am a antique ’Article’ collector and I sometimes read some new articles if I find them interesting. And I found this one pretty fascinating and it should go into my collection. Very good work!
pmp certification in bangalore

princika said...

I want to leave a little comment to support and wish you the best of luck.we wish you the best of luck in all your blogging enedevors.
data science training in chennai

data scientist course said...

The writer is enthusiastic about purchasing wooden furniture on the web and his exploration about the best wooden furniture has brought about the arrangement of this article.
data scientist course in hyderabad

lionelmessi said...

Hi, Thanks for sharing nice articles...

Data Science Training in Hyderabad

princika said...

I want to leave a little comment to support and wish you the best of luck.we wish you the best of luck in all your blogging enedevors.
data science training in chennai

data scientist course said...

This is a great article thanks for sharing this informative information. I will visit your blog regularly for some latest posts. I will visit your blog regularly for Some latest posts.
data scientist course in hyderabad

Mallela said...

Thanks for posting the best information and the blog is very important.digital marketing institute in hyderabad

Data Science Course in Bhilai - 360DigiTMG said...

Highly appreciable regarding the uniqueness of the content. This perhaps makes the readers feels excited to get stick to the subject. Certainly, the learners would thank the blogger to come up with the innovative content which keeps the readers to be up to date to stand by the competition. Once again nice blog keep it up and keep sharing the content as always.

Data Science Course in Bhilai

Data Science Course in Bhilai - 360DigiTMG said...

Fantastic blog extremely good well enjoyed with the incredible informative content which surely activates the learners to gain the enough knowledge. Which in turn makes the readers to explore themselves and involve deeply in to the subject. Wish you to dispatch the similar content successively in future as well.

Data Science Training in Bhilai

data science said...

I was just examining through the web looking for certain information and ran over your blog.It shows how well you understand this subject. Bookmarked this page, will return for extra. data science course in vadodara

Mallela said...

Thanks for posting the best information and the blog is very important.artificial intelligence course in hyderabad

data scientist course said...

Really nice and interesting post. I was looking for this kind of information and enjoyed reading this one.
data scientist training and placement

Mallela said...

Thanks for posting the best information and the blog is very important.data science institutes in hyderabad

Pallavi reddy said...

i am glad to discover this page : i have to thank you for the time i spent on this especially great reading !! i really liked each part and also bookmarked you for new information on your site.
artificial intelligence training in chennai

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

dmProITacademy 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.
Python Classes in Pune

Data Scientist said...

Truly overall quite fascinating post. I was searching for this sort of data and delighted in perusing this one. Continue posting. Much obliged for sharing.artificial intelligence course in chennai

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

Anonymous said...

I want to leave a little comment to support and wish you the best of luck.we wish you the best of luck in all your blogging enedevors.
aws training in hyderabad

traininginstitute said...

First You got a great blog .I will be interested in more similar topics. i see you got really very useful topics, i will be always checking your blog thanks.
data science training in malaysia

Data Science Course in Bhilai - 360DigiTMG said...

Thanks for bringing such innovative content which truly attracts the readers towards you. Certainly, your blog competes with your co-bloggers to come up with the newly updated info. Finally, kudos to you.

Data Science Course in Varanasi

Data Scientist Course in Dombivli said...

Extremely overall quite fascinating post. I was searching for this sort of data and delighted in perusing this one. Continue posting. A debt of gratitude is in order for sharing. python course in delhi

training institute said...

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

Data Science Course in Bhilai - 360DigiTMG said...

Impressive blog to be honest definitely this post will inspire many more upcoming aspirants. Eventually, this makes the participants to experience and innovate themselves through knowledge wise by visiting this kind of a blog. Once again excellent job keep inspiring with your cool stuff.

Data Science Training in Bhilai

Data Science Course in Bhilai - 360DigiTMG said...

Wonderful blog found to be very impressive to come across such an awesome blog. I should really appreciate the blogger for the efforts they have put in to develop such an amazing content for all the curious readers who are very keen of being updated across every corner. Ultimately, this is an awesome experience for the readers. Anyways, thanks a lot and keep sharing the content in future too.

Data Science Course in Bhilai

Anonymous said...

I want to leave a little comment to support and wish you the best of luck.we wish you the best of luck in all your blogging enedevors.
data science course

training institute said...

First You have 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.
data scientist course in malaysia


Data Scientist Course in Dombivli said...

Extremely overall quite fascinating post. I was searching for this sort of data and delighted in perusing this one. Continue posting. A debt of gratitude is in order for sharing. data analytics course in delhi

data science said...

I was basically inspecting through the web filtering for certain data and ran over your blog. I am flabbergasted by the data that you have on this blog. It shows how well you welcome this subject. Bookmarked this page, will return for extra. data science course in jaipur

annoymous said...

I want to leave a little comment to support and wish you the best of luck.we wish you the best of luck in all your blogging enedevors.
iot training in hyderabad

Data Science Course in Bhilai - 360DigiTMG said...

Extraordinary blog went amazed with the content that they have developed in a very descriptive manner. This type of content surely ensures the participants to explore themselves. Hope you deliver the same near the future as well. Gratitude to the blogger for the efforts.

Data Science Training

Deekshitha said...

Informative blog
best digital marketing institute in hyderabad

Anonymous said...

Amazing Articles ! 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.If you are Searching for info click on given link
Data science course in pune

Data Scientist Course in Dombivli said...

Extremely overall quite fascinating post. I was searching for this sort of data and delighted in perusing this one. Continue posting. A debt of gratitude is in order for sharing. cloud computing course in jaipur

Manisha Sudha said...

Valuable blog,Informative content...thanks for sharing, Waiting for the next update…
Spanish Classes in Chennai
Spanish Language Course in Chennai

traininginstitute said...

A great website with interesting and unique material what else would you need.
data scientist certification malaysia

Mallela said...

Thanks for posting the best information and the blog is very good.data science course in Lucknow

princika said...

I want to leave a little comment to support and wish you the best of luck.we wish you the best of luck in all your blogging enedevors.
iot course in bangalore

Pallavi reddy said...

i am glad to discover this page : i have to thank you for the time i spent on this especially great reading !! i really liked each part and also bookmarked you for new information on your site.
data science training in noida

Unknown said...

Nice information, valuable and excellent design, as share good stuff with good ideas and concepts, lots of great information and inspiration, both of which I need, thanks to offer such a helpful information here.cloud computing course in noida

princika said...

I want to leave a little comment to support and wish you the best of luck.we wish you the best of luck in all your blogging enedevors
data science course in noida

Unknown said...

I truly appreciate just perusing the entirety of your weblogs. Just needed to educate you that you have individuals like me who value your work. Unquestionably an extraordinary post. Caps off to you! The data that you have given is exceptionally useful.data science institute in noida

traininginstitute said...

We are really grateful for your blog post. You will find a lot of approaches after visiting your post. Great work
data science training in malaysia

ServiceNow Training in Hyderabad - DettifossIT said...

Good blog , thanks for sharing a informative content.
Azure DevOps Training In Hyderabad

princika said...

I want to leave a little comment to support and wish you the best of luck.we wish you the best of luck in all your blogging enedevors
cyber security training in delhi

traininginstitute said...

It is imperative that we read blog post very carefully. I am already done it and find that this post is really amazing.
data science course

dmProITacademy 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

Data Science said...

Extremely overall quite fascinating post. I was searching for this sort of data and delighted in perusing this one. Continue posting. A debt of gratitude is in order for sharing.data science course in bangalore

traininginstitute said...

Always so interesting to visit your site.What a great info, thank you for sharing. this will help me so much in my learning
data science course in malaysia

Unknown said...

All the contents you mentioned in post is too good and can be very useful. I will keep it in mind, thanks for sharing the information keep updating, looking forward for more posts.Thanks data science training in noida

Unknown said...

I want to leave a little comment to support and wish you the best of luck.we wish you the best of luck in all your blogging enedevors
data science course in gurgaon

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...

I am truly getting a charge out of perusing your elegantly composed articles. It would seem that you burn through a ton of energy and time on your blog. I have bookmarked it and I am anticipating perusing new articles. Keep doing awesome.business analytics course in ghaziabad

Mrbk30 said...

Very Informative blog thank you for sharing. Keep sharing.

Best software training institute in Chennai. Make your career development the best by learning software courses.

devops training in chennai
azure training in chennai
android course in chennai

Data Science said...

Extremely overall quite fascinating post. I was searching for this sort of data and delighted in perusing this one. Continue posting. A debt of gratitude is in order for sharing.data science training in gwalior

Professional Learning Institute said...

It's like you've got the point right, but forgot to include your readers. Maybe you should think about it from different angles.

Data Analytics Course in Bangalore

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.

Professional Education Center said...

It's like you've got the point right, but forgot to include your readers. Maybe you should think about it from different angles.

Data Science Course in Kolkata

Anonymous said...

I want to leave a little comment to support and wish you the best of luck.we wish you the best of luck in all your blogging enedevors
data science course in faridabad

Maneesha said...

I really appreciate this wonderful post that you have provided for us. I assure this would be beneficial for most of the people.
data analytics courses in hyderabad with placements

Career Courses Academy 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!

Best Data Science Courses in Bangalore

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

Unknown said...

Extremely overall quite fascinating post. I was searching for this sort of data and delighted in perusing this one. Continue posting. A debt of gratitude is in order for sharing.data science course in bhubaneswar

Unknown said...

Those guidelines additionally worked to become a good way to
recognize that other people online have the identical fervor like mine
to grasp great deal more around this condition.
dot net course in chennai
core java training classes in chennai
manual testing training in chennai

traininginstitute said...

Excellent effort to make this blog more wonderful and attractive.
cyber security training malaysia

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

Peter Johnson said...

Great Article… I love to read your articles because your writing style is too good, its is very very helpful for all of us and I never get bored while reading your article because, they are becomes a more and more interesting from the starting lines until the end. best micronutrients for plants

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

traininginstitute said...

Thanks for the informative and helpful post, obviously in your blog everything is good..
data scientist certification malaysia

Data Science said...

Extremely overall quite fascinating post. I was searching for this sort of data and delighted in perusing this one.
Continue posting. A debt of gratitude is in order for sharing.
data science course in kolhapur

digital marketing training malaysia said...

Through this post, I know that your good knowledge in playing with all the pieces was very helpful. I notify that this is the first place where I find issues I've been searching for. You have a clever yet attractive way of writing. digital marketing training malaysia

PMP Training in Malaysia said...

I am impressed by the information that you have on this blog. It shows how well you understand this subject. data analytics certification malaysia

Deekshitha said...

Informative blog
data analytics course in agra

Professional Academic Institute said...

Very informative message! There is so much information here that can help any business start a successful social media campaign!

Data Analytics Bangalore

Deekshitha said...

Informative blog
data analytics course in jamshedpur

Anonymous said...

I want to leave a little comment to support and wish you the best of luck.we wish you the best of luck in all your blogging enedevors
data scientist course in trivandrum

Unknown said...

smm panel
smm panel
faturalı hatta kredi
faturalı hatta kredi
instagram takipçi satın al
binance komisyon indirimi
binance indirim kodu
instagram takipçi satın al
tiktok jeton hilesi

Professional Career Technology said...

Very informative message! There is so much information here that can help any business start a successful social media campaign!

Data Analytics Course in Nashik

Data Science Course in Bhilai - 360DigiTMG said...

Impressive blog to be honest definitely this post will inspire many more upcoming aspirants. Eventually, this makes the participants experience and innovate themselves knowledge wise by visiting this kind of a blog. Once again excellent job keep inspiring with your cool stuff.

Data Science Training in Bhilai

Anonymous said...

I want to leave a little comment to support and wish you the best of luck.we wish you the best of luck in all your blogging enedevors
data analytics course in faridabad

Career Academic institute said...

It's like you've got the point right, but forgot to include your readers. Maybe you should think about it from different angles.

Data Analytics Course in Nashik

Data Science said...

Extremely overall quite fascinating post. I was searching for this sort of data and delighted in perusing this one. Continue posting.
A debt of gratitude is in order for sharing.business analytics course in kolhapur

data analytics courses said...

Took me time to understand all of the comments, but I seriously enjoyed the write-up. It proved being really helpful to me and Im positive to all of the commenters right here! Its constantly nice when you can not only be informed, but also entertained! I am certain you had enjoyable writing this write-up. data analytics course

Career Program and Skill Development said...

Very informative message! There is so much information here that can help any business start a successful social media campaign!

Best Data Science Courses in Bangalore

data science bangalore said...

I really like reading a post that can make people think. Also, thank you for permitting me to comment!|data science training in jodhpur

Unknown said...

I want to leave a little comment to support and wish you the best of luck.we wish you the best of luck in all your blogging enedevors
data analytics course in thiruvananthapuram

Unknown said...

Truly overall quite fascinating post. I was searching for this sort of data and delighted in perusing this one. Continue posting. Much obliged for sharing.data scientist course in bhopal

Anonymous said...

I want to leave a little comment to support and wish you the best of luck.we wish you the best of luck in all your blogging enedevors
data science course delhi

PMP Training in Malaysia said...

I was just browsing through the internet looking for some information and came across your blog. I am impressed by the information that you have on this blog. It shows how well you understand this subject. Bookmarked this page, will come back for more. data analytics training

Anonymous said...

I want to leave a little comment to support and wish you the best of luck.we wish you the best of luck in all your blogging enedevors
data science training in faridabad

360DigiTMG said...

Good to visit your weblog again, it has been months for me. Nicely this article that i've been waiting for so long. I will need this post to total my assignment in the college, and it has the exact same topic together with your write-up. Thanks, good share.
data analytics training in hyderabad

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 training in gwalior

kanchana said...

I want to leave a little comment to support and wish you the best of luck.we wish you the best of luck in all your blogging enedevors
data science course in trivandrum

360DigiTMG said...

Your music is amazing. You have some very talented artists. I wish you the best of success.
data science course fee in hyderabad

360digitmg said...

Enroll in the Data Analytics Certification course and outshine in your career. The unmatchable training methodology will allow you to flourish in your career. data analytics course in kanpur

Data science course in chennai said...

360DigiTMG offers the best Data Science certification course in the market with placement assistance. Get trained by IIT, IIM, and ISB alumnibusiness analytics course in vadodara.

deekshitha said...

Our Data Science certification training with a unique curriculum and methodology helps you to get placed in top-notch companies. Avail all the benefits and become a champion.data analytics course in nashik

Project Management Course said...

I would like to thank you for the efforts you have made in writing this article. I am hoping the same best work from you in the future as well. In fact your creative writing abilities has inspired me to start my own Blog Engine blog now. Really the blogging is spreading its wings rapidly. Your write up is a fine example of it. Project Management Course

digital marketing course said...

Truly, this article is really one of the very best in the history of articles. I am a antique ’Article’ collector and I sometimes read some new articles if I find them interesting. And I found this one pretty fascinating and it should go into my collection. Very good work! digital marketing course

Data science course in chennai said...

Data scientists do this work. There is an increase in the use of data science applications every year, so data scientists are in huge demand​data science course in nagpur.

Professional Academic Institute said...

With decision making becoming more and more data-driven, learn the skills necessary to unveil patterns useful to make valuable decisions from the data collected. Also, get a chance to work with various datasets that are collected from various sources and discover the relationships between them. Ace all the skills and tools of Data Science and step into the world of opportunities with the Best Data Science training institutes in Bangalore.

Data Science Course in Bangalore

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

Professional Career Technology said...

Learn to build powerful models to solve business problems by generating useful insights and discover the various scientific processes and methods used to transform the information available in huge datasets into meaningful results. master all the tools and techniques in Data Science and gain domain-specific knowledge which will help you to add more value to your profile. Sign up for the Data Science course in Bangalore with Placements and multiple your chances of working across all industries and job functions.

Data Science Course in Bangalore with Placement

Professional Courses and Training said...

Fast forward your career with the best Data Analyst Course offered by 360DigiTMG. Get trained by expert trainers with placement assistance.

Data Scientist Course in Delhi

datascience course said...

It would help if you learned programming and other fundamentals of computers that you can use throughout your life in any field you choose.data science course in kolkata

Educational Training and Learning said...

Are you not ready to risk your and your family's health this pandemic time by joining an offline Data Analyst course. we have a solution for you, enroll in an online Data Analyst course that will equip you with all the knowledge needed for a job in just 6 months.


Data Science Training in Delhi

data analytics course in borivali said...

Unleash your potential and expand your capabilities with the Data Science Certification Course.
data analytics course in borivali

Rajesh said...

The new wave of innovation that is changing the way people do business is called data science. Gain expertise in organizing, sorting, and transforming data to uncover hidden patterns Learn the essential skills of probability, statistics, and machine learning along with the techniques to break your data into a simpler format to derive meaningful information. Enroll in Data science in Bangalore and give yourself a chance to power your career to greater heights.
Data Science Certification in Bangalore

Dtat science Course said...

I was just browsing through the internet looking for some information and came across your blog. I am impressed by the information that you have on this blog. It shows how well you understand this subject. Bookmarked this page, will come back for more..data science training institute in chennai

datascience course 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"

digital marketing training malaysia said...

I was basically inspecting through the web filtering for certain data and ran over your blog. I am flabbergasted by the data that you have on this blog. It shows how well you welcome this subject. Bookmarked this page, will return for extra. digital marketing training malaysia

«Oldest ‹Older   201 – 316 of 316   Newer› Newest»