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.


241 comments:

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

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

trainingcourses 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 Training 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 Training 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

trainingcourses 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 Training - 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

cloud computing course in bangalore 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 Training 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 Training 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


cloud computing course in bangalore 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 Training - 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

cloud computing course in bangalore 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

trainingcourses 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

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