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" />
<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.
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:
Thanks for your organization and examples. This is not a "walk in the park".
Stephan Onisick
Thanks a lot. It is the only decent tutorial I've found.
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
Thanks for the feedback :)
great explanation !!!
Nice blog Very useful information is providing by ur blog. Great beginning html tutorials Very clear and helpful for beginners.
ERA ESOLUTION
and grt description
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
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
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
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
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
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
Wonderful Blog, great blog post that you have provided for peoples. Its really good. Nice information.
ExcelR Data Science Bangalore
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
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
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
At azure, there are many benefits learn on azure microsoft azure training
At sql we can learn all the concepts related to sql. sql is a query language
sql online training
This is the best blog to learn on ui online training india
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
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
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
very good information....!!!
text animation css
animation css background
sliding menu
hover css
css text animation
css loaders
dropdown menu
buttons with css
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
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
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
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..
Cool stuff you have and you keep overhaul every one of us
pmp course
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
Very nice job... Thanks for sharing this amazing and educative blog post! ExcelR Data Analytics Course Pune
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
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
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
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
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
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
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
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
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
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
Well Explained Content thanks For Sharing The Information With Us
Data Science Course in Hyderabad
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
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
Great Article
Artificial Intelligence Projects
Project Center in Chennai
JavaScript Training in Chennai
JavaScript Training in Chennai
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
Very interesting to read this article.I would like to thank you for the efforts. I also offer Data Scientist Courses data scientist courses
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
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
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
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
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
We very much appreciate your hard work as a knowledge provider, which has helped us through a difficult period.
machine learning course malaysia
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
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
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
Thanks for sharing the article on the basics of HTML, good piece of content loved to read,keep sharing.
Data Science Training in Pune
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
This post is very simple to read and appreciate without leaving any details out. Great work!
data scientist training in malaysia
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
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
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.
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
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
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
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
"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"
I found the section on exploratory data analysis in this post to be informative and well-explained. 360DigiTMG provides data analyst course in bangalore
Dedicated Support Team take the time to comprehend the preferences, communication styles, and expectations of the customers they serve.
Post a Comment