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:

<html>

<head runat="server">
    <title>Test site</title>
    <link href="css/main.css" rel="stylesheet" />
</head>

<body>
    <div class="main-container">
        <div class="header-container block">
        </div>
        <div class="left-container container block">
        </div>
        <div class="middle-container container block">
        </div>
        <div class="right-container container block">
        </div>
    </div>
</body>

</html>

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.

<?xml version="1.0" encoding="utf-8"?><!--SPG:
 
This HTML file has been associated with a SharePoint Master Page (.master file) carrying the same name.  While the files remain associated, you will not be allowed to edit the .master file, and any rename, move, or deletion operations will be reciprocated.
 
To build the master page directly from this HTML file, simply edit the page as you normally would.  Use the Snippet Generator at ../_layouts/15/ComponentHome.aspx?Url=https%2F%5Fcatalogs%2Fmasterpage%2Findex%2Emaster to create and customize useful SharePoint entities, then copy and paste them as HTML snippets into your HTML code.   All updates to this file will automatically sync to the associated Master Page.
 
-->
<!DOCTYPE html[]>
<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
    <head runat="server">
        <meta http-equiv="X-UA-Compatible" content="IE=10" />
        <!--CS: Start Page Head Contents Snippet-->
        <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
        <!--SPM:<%@Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
        <!--SID:00 -->
        <meta name="GENERATOR" content="Microsoft SharePoint" />
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <meta http-equiv="Expires" content="0" />
        <!--MS:<SharePoint:RobotsMetaTag runat="server">-->
        <!--ME:</SharePoint:RobotsMetaTag>-->
        <!--MS:<SharePoint:PageTitle runat="server">-->
            <!--MS:<asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server">-->
                <!--MS:<SharePoint:ProjectProperty Property="Title" runat="server">-->
                <!--ME:</SharePoint:ProjectProperty>-->
            <!--ME:</asp:ContentPlaceHolder>-->
        <!--ME:</SharePoint:PageTitle>-->
        <!--MS:<SharePoint:StartScript runat="server">-->
        <!--ME:</SharePoint:StartScript>-->
        <!--MS:<SharePoint:CssLink runat="server" Version="15">-->
        <!--ME:</SharePoint:CssLink>-->
        <!--MS:<SharePoint:CacheManifestLink runat="server">-->
        <!--ME:</SharePoint:CacheManifestLink>-->
        <!--MS:<SharePoint:PageRenderMode runat="server" RenderModeType="Standard">-->
        <!--ME:</SharePoint:PageRenderMode>-->
        <!--MS:<SharePoint:ScriptLink language="javascript" name="core.js" OnDemand="true" runat="server" Localizable="false">-->
        <!--ME:</SharePoint:ScriptLink>-->
        <!--MS:<SharePoint:ScriptLink language="javascript" name="menu.js" OnDemand="true" runat="server" Localizable="false">-->
        <!--ME:</SharePoint:ScriptLink>-->
        <!--MS:<SharePoint:ScriptLink language="javascript" name="callout.js" OnDemand="true" runat="server" Localizable="false">-->
        <!--ME:</SharePoint:ScriptLink>-->
        <!--MS:<SharePoint:ScriptLink language="javascript" name="sharing.js" OnDemand="true" runat="server" Localizable="false">-->
        <!--ME:</SharePoint:ScriptLink>-->
        <!--MS:<SharePoint:ScriptLink language="javascript" name="suitelinks.js" OnDemand="true" runat="server" Localizable="false">-->
        <!--ME:</SharePoint:ScriptLink>-->
        <!--MS:<SharePoint:CustomJSUrl runat="server">-->
        <!--ME:</SharePoint:CustomJSUrl>-->
        <!--MS:<SharePoint:SoapDiscoveryLink runat="server">-->
        <!--ME:</SharePoint:SoapDiscoveryLink>-->
        <!--MS:<SharePoint:AjaxDelta id="DeltaPlaceHolderAdditionalPageHead" Container="false" runat="server">-->
            <!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->
            <!--ME:</asp:ContentPlaceHolder>-->
            <!--MS:<SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true">-->
            <!--ME:</SharePoint:DelegateControl>-->
            <!--MS:<asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" runat="server">-->
            <!--ME:</asp:ContentPlaceHolder>-->
        <!--ME:</SharePoint:AjaxDelta>-->
        <!--MS:<SharePoint:CssRegistration Name="Themable/corev15.css" runat="server">-->
        <!--ME:</SharePoint:CssRegistration>-->
        <!--MS:<SharePoint:AjaxDelta id="DeltaSPWebPartManager" runat="server">-->
            <!--MS:<WebPartPages:SPWebPartManager runat="server">-->
            <!--ME:</WebPartPages:SPWebPartManager>-->
        <!--ME:</SharePoint:AjaxDelta>-->
        <!--CE: End Page Head Contents Snippet-->
        <!--DC:Test site-->
        <link href="css/main.css" rel="stylesheet" />
        <!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:HtmlDesignFromMaster msdt:dt="string">../_catalogs/masterpage/index.html, …/_catalogs/masterpage/index.html</mso:HtmlDesignFromMaster>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">../_catalogs/masterpage/index.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
<mso:ContentTypeId msdt:dt="string">0x010100751C12BE8A2F21498BE0C9883E6CA96A</mso:ContentTypeId>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
<mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
<mso:DefaultCssFile msdt:dt="string"></mso:DefaultCssFile>
<mso:DisplayTemplateJSConfigurationUrl msdt:dt="string"></mso:DisplayTemplateJSConfigurationUrl>
<mso:DisplayTemplateJSTemplateType msdt:dt="string"></mso:DisplayTemplateJSTemplateType>
<mso:DisplayTemplateJSTargetListTemplate msdt:dt="string"></mso:DisplayTemplateJSTargetListTemplate>
<mso:DisplayTemplateJSTargetContentType msdt:dt="string"></mso:DisplayTemplateJSTargetContentType>
<mso:_CopySource msdt:dt="string">../_catalogs/masterpage/index.html</mso:_CopySource>
<mso:Order msdt:dt="string">1937600.00000000</mso:Order>
<mso:DisplayTemplateJSTargetScope msdt:dt="string"></mso:DisplayTemplateJSTargetScope>
<mso:DisplayTemplateJSIconUrl msdt:dt="string"></mso:DisplayTemplateJSIconUrl>
<mso:MasterPageDescription msdt:dt="string"></mso:MasterPageDescription>
<mso:DisplayTemplateJSTargetControlType msdt:dt="string"></mso:DisplayTemplateJSTargetControlType>
<mso:_SourceUrl msdt:dt="string"></mso:_SourceUrl>
<mso:_SharedFileIndex msdt:dt="string"></mso:_SharedFileIndex>
<mso:UIVersion msdt:dt="string"></mso:UIVersion>
</mso:CustomDocumentProperties>
</xml><![endif]-->
        <!--DC:Test site-->
    <title>Test site</title></head>
    <body>
        <!--CS: Start Ribbon Snippet-->
        <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
        <!--SPM:<%@Register Tagprefix="wssucw" TagName="Welcome" Src="~/_controltemplates/15/Welcome.ascx"%>-->
        <!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" HideFromSearchCrawler="true" EmitDiv="true">-->
            <div id="TurnOnAccessibility" style="display:none" class="s4-notdlg noindex">
                <a id="linkTurnOnAcc" href="#" class="ms-accessible ms-acc-button" onclick="SetIsAccessibilityFeatureEnabled(true);UpdateAccessibilityUI();document.getElementById('linkTurnOffAcc').focus();return false;">
                    <!--MS:<SharePoint:EncodedLiteral runat="server" text="&#60;%$Resources:wss,master_turnonaccessibility%&#62;" EncodeMethod="HtmlEncode">-->
                    <!--ME:</SharePoint:EncodedLiteral>-->
                </a>
            </div>
            <div id="TurnOffAccessibility" style="display:none" class="s4-notdlg noindex">
                <a id="linkTurnOffAcc" href="#" class="ms-accessible ms-acc-button" onclick="SetIsAccessibilityFeatureEnabled(false);UpdateAccessibilityUI();document.getElementById('linkTurnOnAcc').focus();return false;">
                    <!--MS:<SharePoint:EncodedLiteral runat="server" text="&#60;%$Resources:wss,master_turnoffaccessibility%&#62;" EncodeMethod="HtmlEncode">-->
                    <!--ME:</SharePoint:EncodedLiteral>-->
                </a>
            </div>
        <!--ME:</SharePoint:SPSecurityTrimmedControl>-->
        <div id="ms-designer-ribbon">
            <!--SID:02 {Ribbon}-->
            <!--PS: Start of READ-ONLY PREVIEW (do not modify) --><div class="DefaultContentBlock" style="background:rgb(0, 114, 198); color:white; width:100%; padding:8px; height:64px; overflow:hidden;">The SharePoint ribbon will be here when your file is either previewed on or applied to your site.</div><!--PE: End of READ-ONLY PREVIEW -->
        </div>
        <!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" AuthenticationRestrictions="AnonymousUsersOnly">-->
            <!--MS:<wssucw:Welcome runat="server" EnableViewState="false">-->
            <!--ME:</wssucw:Welcome>-->
        <!--ME:</SharePoint:SPSecurityTrimmedControl>-->
        <!--CE: End Ribbon Snippet-->
        <div id="s4-workspace">
            <div id="s4-bodyContainer">
                <div class="main-container">
                    <div class="header-container block">
                    </div>
                    <div class="left-container container block">
                    </div>
                    <div class="middle-container container block">
                    </div>
                    <div class="right-container container block">
                    </div>
                </div>
                <div data-name="ContentPlaceHolderMain">
                    <!--CS: Start PlaceHolderMain Snippet-->
                    <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
                    <!--MS:<SharePoint:AjaxDelta ID="DeltaPlaceHolderMain" IsMainContent="true" runat="server">-->
                        <!--MS:<asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server">-->
                            <div class="DefaultContentBlock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;">
            This div, which you should delete, represents the content area that your Page Layouts and pages will fill. Design your Master Page around this content placeholder.
        
                            
                            </div>
                        <!--ME:</asp:ContentPlaceHolder>-->
                    <!--ME:</SharePoint:AjaxDelta>-->
                    <!--CE: End PlaceHolderMain Snippet-->
                </div>
            </div>
        </div>
    </body>
</html>
 

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

  1. Added a link to CSS file

    <!--MS:<SharePoint:CssRegistration Name="../Development/TestSite/SitePages/css/main.css" runat="server">-->
    <!--ME:</SharePoint:CssRegistration>-->
  2. Deleted default content block:

     <div class="DefaultContentBlock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;">
    This div, which you should delete, represents the content area that your Page Layouts and pages will fill. Design your Master Page around this content placeholder.</div>
  3. Added to my custom div in class main-container following asp content palces
    <div class="header-container block">
       <!--MS:<asp:ContentPlaceHolder ID="HeaderContent" runat="server">-->
       <!--ME:</asp:ContentPlaceHolder>-->
    </div>
    <div class="left-container container block">
       <!--MS:<asp:ContentPlaceHolder ID="LeftContent" runat="server">-->
       <!--ME:</asp:ContentPlaceHolder>-->
    </div>
    <div class="middle-container container block">
       <!--MS:<asp:ContentPlaceHolder ID="MiddleContent" runat="server">-->
       <!--ME:</asp:ContentPlaceHolder>-->
    </div>
    <div class="right-container container block">
       <!--MS:<asp:ContentPlaceHolder ID="RightContent" runat="server">-->
       <!--ME:</asp:ContentPlaceHolder>-->
    </div>

    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:
    #globalNavBox{
    display:none;
    }
     
    #suiteBarTop
    {
        display: none !important;
    }

    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.