Convert an HTML page into a SharePoint master page using Design manager

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:

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:

Hope this SharePoint tutorial, will be helpful to convert an HTML page into a SharePoint master page using Design Manager in SharePoint server 2013.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

Vinodh Narayanan

>