This SharePoint 2013 tutorial explains, how to use design manager feature in SharePoint server 2013. Here I will show, how to convert an HTML page into SharePoint master page using design manager in SharePoint server 2013/Online.
Convert an HTML page into SharePoint master page using Design manager
The design manager is a publishing feature is available in publishing sites for both SharePoint server and Office 365. Using a design manager you can brand the internet-facing websites in SharePoint server 2013 and Office 365.
Skills required:
- Having some knowledge in HTML and CSS
- Javascript
Open a SharePoint publishing site. Then Click site settings -> Design manager
Before doing that I am created some sample HTML and CSS.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Masterpage coversion using Html and css</title>
<link rel=”stylesheet” type=”text/css” href=”css\custom.css”>
</head>
<body>
<header>
<p>this is my header </p>
</header>
<footer>
<p>this is my footer</p>
</footer>
</body>
</html>CSS:
header{
background-color: blue;
}
footer{
background-color : green;
}
p{
font-family: callibri;
font-weight: bold;
font-size:22px;
}Click on the designer manager. Click on Upload design files.
Map the master page gallery to a network drive for copy the HTML Structure
URL: http://trenmaxorgs/sites/pubs/_catalogs/masterpage/
You may like following SharePoint master page tutorials:
- Create a custom master page using Design Manager in SharePoint Online/2013/2016
- SharePoint Online Step by Step Tutorial on how to create a new custom master page by using the existing master page
- SharePoint 2013 Create a custom master page using Visual Studio 2013
- Site Title snippet in SharePoint 2013 custom master page
- Only Content controls are allowed directly in a content page that contains Content controls SharePoint 2013 Page Layout
- Sorry something went wrong the file masterurl custom.master is not a valid master page
- How to hide a master page div when displayed in a SharePoint dialog box?
- Creating a fixed width master page in SharePoint 2013
- Create a responsive mobile master page using SharePoint 2013 designer
- Change Master Page using PowerShell in SharePoint 2013
- Steps to create a master page using design manager in SharePoint 2013/2016/Online
Hope this SharePoint tutorial, will be helpful to convert an HTML page into a SharePoint master page using Design Manager in SharePoint server 2013.
Download SharePoint Online Tutorial PDF FREE!
Get update on Webinars, video tutorials, training courses etc.
