none
SP2019 Custom Master Page RRS feed

  • Question

  • Hello,

    story goes like this:

    I have publishing portal and I need custom master page for external users. I create custom HTML, let's say this one:

    https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_temp_webpage&stacked=h

    I then upload that to Master Page Gallery and SP generates master page for me (with asp tags).

    And this works, but the problem is that when I create new publishing page (in Pages library), content that user inserts in that page goes below everything defined in master page.

    To be more specific:

    My HTML looks like this:

    <head>
    some text here
    </head>
    <body>
    some content here
    </body>

    SP generates master that looks like this:

    <head>
    some text here
    </head>
    <body>
    some content here
    </body>
    <div data-name="ContentPlaceHolderMain">
                        
                        
                        <SharePoint:AjaxDelta ID="DeltaPlaceHolderMain" IsMainContent="true" runat="server">
                            <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>
                            </asp:ContentPlaceHolder>
                        </SharePoint:AjaxDelta>
                        
                    </div>

    How can I set that this last div (asp tag ContentPlaceHolder) goes inside my body, not at the end?


    • Edited by Mario Zagreb Wednesday, September 11, 2019 4:32 PM
    Wednesday, September 11, 2019 4:31 PM

All replies

  • Hi Mario,

    After converting your html page using design manager are you getting the below screen - 

    In order to create HTML based master page your HTML should be XML-compliant. You can read about this here - https://docs.microsoft.com/en-us/sharepoint/dev/general-development/how-to-resolve-errors-and-warnings-when-previewing-a-page-in-sharepoint

    You can check whether your html is XML-Compliant or not here-https://validator.w3.org/

    After your page HTML page will pass all the validation then you can upload the file and create the .master file. Your .master file will not contain any <body> tag and the ContentPlaceHolder main will be later replaced by your page layout. 

    Here is an example of XML-Complaint html -  

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8"/>
    <title>some text here</title>
    </head>
    <body>
    <div>
    some content here
    </div>
    </body>
    </html>


    K Mohit

    Wednesday, September 11, 2019 6:45 PM
  • Hi Mario,

    I tested the sample html in the original question and it convert successfuly to master page in my side:

    And actually after converting into Master Page, both .html and .master file have ContentPlaceHolderMain tag, this is by design and <body></body> won't appear in .master file.

    For page layout, as Kumar's said, ContentPlaceHolder Main will be replaced by the page layout you selected, here is a reference about SharePoint Page Model:

     

    Overview of the SharePoint page model

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Thursday, September 12, 2019 8:01 AM
  • Thanks for the answers.

    I don't have problems with conversion of master page.

    My problem is that ContentPlaceHolder  is at the bottom of my (generated) master page. How do I define that it should go in the middle?
    Thursday, September 12, 2019 4:23 PM
  • Hi Mario,

    If you don't see any warnings and errors in design manager then you should not be worried about where your contentplaceholder is appearing.

    The mark up of the .master file is auto generated and it's suggested that you never make a change in .master file so my suggestion is keep it as it is.

    Here is content of .master file from my env - 

    <%-- 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 https://intranet.wingtip.com/_layouts/15/ComponentHome.aspx?Url=https%3A%2F%2Fintranet%2Ewingtip%2Ecom%2F%5Fcatalogs%2Fmasterpage%2Fnew%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.
    
     --%>
    <%@Master language="C#"%>
    <%@Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>
    <%@Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>
    <%@Register TagPrefix="wssucw" TagName="Welcome" Src="~/_controltemplates/15/Welcome.ascx"%>
    <%@Register TagPrefix="wssucmui" TagName="MUISelector" Src="~/_controltemplates/15/MUISelector.ascx"%>
    <%@Register TagPrefix="PublishingRibbon" TagName="PublishingRibbon" Src="~/_controltemplates/15/Ribbon.ascx"%>
    <!DOCTYPE html >
    <SharePoint:SPHtmlTag lang="en" runat="server" id="SPHtmlTag" dir="&lt;%$Resources:wss,multipages_direction_dir_value%&gt;">
        <head runat="server">
            <meta http-equiv="X-UA-Compatible" content="IE=10" />
            
            
            
            
            <meta name="GENERATOR" content="Microsoft SharePoint" />
            <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
            <meta http-equiv="Expires" content="0" />
            <SharePoint:RobotsMetaTag runat="server">
            </SharePoint:RobotsMetaTag>
            <SharePoint:PageTitle runat="server">
                <asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server">
                    <SharePoint:ProjectProperty Property="Title" runat="server">
                    </SharePoint:ProjectProperty>
                </asp:ContentPlaceHolder>
            </SharePoint:PageTitle>
            <SharePoint:StartScript runat="server">
            </SharePoint:StartScript>
            <SharePoint:CssLink runat="server" Version="15">
            </SharePoint:CssLink>
            <SharePoint:CacheManifestLink runat="server">
            </SharePoint:CacheManifestLink>
            <SharePoint:PageRenderMode runat="server" RenderModeType="Standard">
            </SharePoint:PageRenderMode>
            <SharePoint:ScriptLink language="javascript" name="core.js" OnDemand="true" runat="server" Localizable="false">
            </SharePoint:ScriptLink>
            <SharePoint:ScriptLink language="javascript" name="menu.js" OnDemand="true" runat="server" Localizable="false">
            </SharePoint:ScriptLink>
            <SharePoint:ScriptLink language="javascript" name="callout.js" OnDemand="true" runat="server" Localizable="false">
            </SharePoint:ScriptLink>
            <SharePoint:ScriptLink language="javascript" name="sharing.js" OnDemand="true" runat="server" Localizable="false">
            </SharePoint:ScriptLink>
            <SharePoint:ScriptLink language="javascript" name="suitelinks.js" OnDemand="true" runat="server" Localizable="false">
            </SharePoint:ScriptLink>
            <SharePoint:CustomJSUrl runat="server">
            </SharePoint:CustomJSUrl>
            <SharePoint:SoapDiscoveryLink runat="server">
            </SharePoint:SoapDiscoveryLink>
            <SharePoint:AjaxDelta id="DeltaPlaceHolderAdditionalPageHead" Container="false" runat="server">
                <asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">
                </asp:ContentPlaceHolder>
                <SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true">
                </SharePoint:DelegateControl>
                <asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" runat="server">
                </asp:ContentPlaceHolder>
            </SharePoint:AjaxDelta>
            <SharePoint:CssRegistration Name="Themable/corev15.css" runat="server">
            </SharePoint:CssRegistration>
            <SharePoint:AjaxDelta id="DeltaSPWebPartManager" runat="server">
                <WebPartPages:SPWebPartManager runat="server">
                </WebPartPages:SPWebPartManager>
            </SharePoint:AjaxDelta>
            
            <meta charset="utf-8" />
            
            </head>
        <body onhashchange="if (typeof(_spBodyOnHashChange) != 'undefined') _spBodyOnHashChange();"><SharePoint:SPClientIDGenerator runat="server" ServerControlID="DeltaPlaceHolderMain;DeltaPlaceHolderPageTitleInTitleArea;DeltaPlaceHolderUtilityContent" /><SharePoint:ImageLink runat="server" /><SharePoint:SharePointForm onsubmit="if (typeof(_spFormOnSubmitWrapper) != 'undefined') {return _spFormOnSubmitWrapper();} else {return true;}" runat="server"><asp:ScriptManager id="ScriptManager" runat="server" EnablePageMethods="false" EnablePartialRendering="true" EnableScriptGlobalization="false" EnableScriptLocalization="true" />
            
            
            
            <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;">
                        <SharePoint:EncodedLiteral runat="server" text="&lt;%$Resources:wss,master_turnonaccessibility%&gt;" EncodeMethod="HtmlEncode">
                        </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;">
                        <SharePoint:EncodedLiteral runat="server" text="&lt;%$Resources:wss,master_turnoffaccessibility%&gt;" EncodeMethod="HtmlEncode">
                        </SharePoint:EncodedLiteral>
                    </a>
                </div>
            </SharePoint:SPSecurityTrimmedControl>
            <div id="ms-designer-ribbon">
                <PublishingRibbon:PublishingRibbon runat="server" />
                
            </div>
            <SharePoint:SPSecurityTrimmedControl runat="server" AuthenticationRestrictions="AnonymousUsersOnly">
                <wssucw:Welcome runat="server" EnableViewState="false">
                </wssucw:Welcome>
            </SharePoint:SPSecurityTrimmedControl>
            
            <div id="s4-workspace">
                <div id="s4-bodyContainer">
                    <div>
    some content here
    
                    </div>
                    <div data-name="ContentPlaceHolderMain">
                        
                        
                        <SharePoint:AjaxDelta ID="DeltaPlaceHolderMain" IsMainContent="true" runat="server">
                            <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>
                            </asp:ContentPlaceHolder>
                        </SharePoint:AjaxDelta>
                        
                    </div>
                </div>
            </div>
        <SharePoint:AjaxDelta id="DeltaFormDigest" BlockElement="true" runat="server"><asp:ContentPlaceHolder id="PlaceHolderFormDigest" runat="server"><SharePoint:formdigest runat="server" /></asp:ContentPlaceHolder></SharePoint:AjaxDelta></SharePoint:SharePointForm><SharePoint:AjaxDelta id="DeltaPlaceHolderUtilityContent" runat="server"><asp:ContentPlaceHolder id="PlaceHolderUtilityContent" runat="server" /></SharePoint:AjaxDelta><asp:ContentPlaceHolder id="PlaceHolderTitleAreaClass" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderGlobalNavigationSiteMap" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderGlobalNavigation" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderSearchArea" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderLeftNavBar" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderTopNavBar" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderLeftNavBarDataSource" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderCalendarNavigator" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderLeftActions" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderLeftNavBarTop" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderSiteName" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderPageDescription" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderPageImage" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderTitleLeftBorder" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderMiniConsole" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderTitleRightMargin" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderTitleAreaSeparator" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderNavSpacer" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderLeftNavBarBorder" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderBodyLeftBorder" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderBodyRightMargin" Visible="False" runat="server" /><asp:ContentPlaceHolder id="WSSDesignConsole" Visible="False" runat="server" /><asp:ContentPlaceHolder id="SPNavigation" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderQuickLaunchTop" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderQuickLaunchBottom" Visible="False" runat="server" /></body>
    </SharePoint:SPHtmlTag>


    K Mohit

    Thursday, September 12, 2019 6:51 PM
  • Thanks for the answers.

    I don't have problems with conversion of master page.

    My problem is that ContentPlaceHolder  is at the bottom of my (generated) master page. How do I define that it should go in the middle?

    Hi Mario,

    As Kumar's suggestion, if you custom master page works well without any conversion error, you don't need to concern the position of ContentPlaceHolder tag, this is generated by SharePoint automatically. You can keep the master page as original.

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Friday, September 13, 2019 6:25 AM
  • You don't understand my problem :)

    I wanted my pages to look like as in following image:

    https://imgur.com/QDNRlY4https://imgur.com/QDNRlY4https://imgur.com/QDNRlY4https://imgur.com/QDNRlY4https://imgur.com/a/y29lhg7

    But, after I upload that html to SP, it generates master page and put its ContentPlaceHolder na the bottom, below footer, and that all my pages look like this:

    https://imgur.com/a/IDevnbB

    Content is at the bottom

    Friday, September 13, 2019 11:35 AM
  • Hi Mario,

    Could you please share your html mater page.

    Image links that you have shared are not working.


    K Mohit

    Friday, September 13, 2019 12:05 PM
  • oh, I am sorry, this is corrected post:

    I wanted my pages to look like as in following image:

    https://imgur.com/a/y29lhg7

    But, after I upload that html to SP, it generates master page and put its ContentPlaceHolder na the bottom, below footer, and that all my pages look like this:

    https://imgur.com/a/IDevnbB

    Content is at the bottom

    Monday, September 16, 2019 11:47 AM
  • These images are not working for me.

    Can you do print screen or snap.


    K Mohit

    Monday, September 16, 2019 12:26 PM