Post
Ask Question

Convert An HTML Page Into Sharepoint Master Page Using Design Manager In Sharepoint Server 2013

Design manager is a publishing feature available in publishing sites for both Sharepoint Server and Office 365. Using design manager you can brand the internet-facing websites in Sharepoint Server 2013 and Office 365.

Skills required:

  • Having some knowledge of HTML and CSS
  • Javascript

Open a Sharepoint publishing site,

site

Click site settings -> Design manager,

settings

Before doing that I  created some sample HTML and CSS,

Html

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Masterpage coversion using Html and css</title>  
  7.     <link rel="stylesheet" type="text/css" href="css\custom.css"> </head>  
  8.   
  9. <body>  
  10.     <header>  
  11.         <p>this is my header </p>  
  12.     </header>  
  13.     <footer>  
  14.         <p>this is my footer</p>  
  15.     </footer>  
  16. </body>  
  17.   
  18. </html>  
CSS
  1. header{  
  2. background-color: blue;  
  3. }  
  4. footer{  
  5. background-color : green;  
  6. }  
  7. p{  
  8. font-family: callibri;  
  9. font-weight: bold;  
  10. font-size:22px;  
  11. } 
Click on designer manager.

Click on Upload design files.

Upload design files
Map the master page gallery to network drive for copying the HTML Structure.

URL: http://trenmaxorgs/sites/pubs/_catalogs/masterpage/

drive

Copy and paste the HTML and css files here,

files

Now open Design Manager.

Click Edit master page.

Edit master pageSelect Convert an HTML file into a Sharepoint masterpage,

masterpage

Select the HTML file created and click insert.

So now the conversion has been successful without errors,

errors

So now the master has been generated successfully

master
Here is the final result,

result

 
Next Recommended Reading Site Master Page Vs System Master Page or CustomMasterUrl vs MasterUrl in SharePoint