First Project On SharePoint | Part 2 of 2

First Project On SharePoint | Part 2 of 2

But wait! We need SharePoint tags back! But the page still needs to look the same.

So.. The best option that I found was to create a master page from HTML (the same option what I thought about before)

First I create an HTML file based on a master page created previously by copy-paste. Next I delete unnecessary files.

HTML file look like shown below:

Next, I moved to SharePoint Settings using the browser. Inside Design Manager, I used a link called Edit Master Pages and next Convert an HTML file to a SharePoint master page.

01

I added a index.html  to master page directory

02And saved it as Design File.

04

This design file was automatically created as the master page. This master page contains two files:

Index.html and index.master.

Editing this master is only needed to make changes on index.html. Index.master will automatically update Master Page from HTML.

To modify this, I added and removed a  few things:

  1. Added a link to CSS file

  2. Deleted default content block:

  3. Added to my custom div in class main-container following asp content palces

    Next, I just copied the page that I created previously and only changed a reference to the master page.

    Unfortunately, the page did not look like I expected:

    10

To fix it I’ve made a changes in CSS file:

  1. Added !important to background URL
  2. Added CSS style to hide navigation and ribbon:

    And now the website looks like expected and inside has all of the SharePoint tags.11

And now the website looks like expected and inside has all of the SharePoint tags.