Convert a Master Page to HTML
Usually folks want to take an HTML file and convert it to a Master Page file. However, I have a master page that I want to work in with Design Manager. To do so, I need to upload an "HTML" file and modify it with the Design Manager Editor.
I haven't found how to convert from a Master Page to an HTML file to allow me to use the Design Manager Editor.
I haven't found how to convert from a Master Page to an HTML file to allow me to use the Design Manager Editor.
The reason is that there is a tool in SharePoint 2013 called the Design Manager. It allows you to noodle around with among other page types, master pages. However, it only edits the HTML file and upon saving and uploading that HTML file, SharePoint checks and if the page is valid, creates the associated .master file.
I didn't start with an HTML file, so to use the Design Manager, I have to convert the .master page somehow to HTML.
I didn't start with an HTML file, so to use the Design Manager, I have to convert the .master page somehow to HTML.
I have to convert the .master page somehow to HTML.... which is what the browser does. If you view the page with your browser. Right click, select view source you will have the html.
It's not the same HTML that the Designer uses. If you look at a sample HTML file that has an associated .MASTERPAGE file, you will see that the rendered page and that HTML file differ greatly. SharePoint has placeholders and the like for example that would be in the HTML file and not in the rendered page.
that would be in the HTML file and not in the rendered pageMaybe we are missing each other on terminology - the rendered page is HTML.
From what I am hearing there are three possibilities
- Master page - which I imagine is using some sort of templating markup that SharePoint uses
- A file that Designer users - that looks different from a Master page but not the same as a browser rendered page
- An rendered html page in the browser.
I am trying to get a handle on what the middle one looks like.
The Design Manager allows you to edit HTML. That HTML differs from the source you view of a rendered page. So, taking that source and using it like the HTML that the Designer works with, won't produce the same results.
The designer, via a "Snippet Editor" allows you to insert SharePoint specific tags for assorted widgets which will be converted to Master Page format if the special HTML page uploads and is valid.
I will paste a sample of one of these special HTML pages here:
The designer, via a "Snippet Editor" allows you to insert SharePoint specific tags for assorted widgets which will be converted to Master Page format if the special HTML page uploads and is valid.
I will paste a sample of one of these special HTML pages here:
<?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 https://bashcomputing.sharepoint.com/sites/PublishingSandbox/_layouts/15/ComponentHome.aspx?Url=https%3A%2F%2Fbashcomputing%2Esharepoint%2Ecom%2Fsites%2FPublishingSandbox%2F%5Fcatalogs%2Fmasterpage%2FMyMiniMasterPage%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.
-->
<!-- _lcid="1033" _version="16.0.5715" _dal="1" -->
<!-- _LocalBinding -->
<!DOCTYPE html[]>
<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<!--CS: Start Head Snippet-->
<!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--SPM:<%@Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.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" />
<!--SPM:<SharePoint:RobotsMetaTag runat="server"/>-->
<!--MS:<SharePoint:PageTitle runat="server">-->
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server">-->
<!--SPM:<SharePoint:ProjectProperty Property="Title" runat="server"/>-->
<!--SPM:</asp:ContentPlaceHolder>-->
<!--ME:</SharePoint:PageTitle>-->
<!--SPM:<SharePoint:StartScript runat="server"/>-->
<!--MS:<SharePoint:CssLink runat="server" Version="15">-->
<!--PS: Start Preview--><link href="https://bashcomputing.sharepoint.com/_layouts/15/1033/styles/Themable/corev15.css" rel="stylesheet" type="text/css" /><link href="https://bashcomputing.sharepoint.com/_layouts/15/1033/styles/OLD/Themable/layouts.css" rel="stylesheet" type="text/css" /><link href="https://bashcomputing.sharepoint.com/_layouts/15/1033/styles/Themable/searchv15.css" rel="stylesheet" type="text/css" /><!--PE: End Preview-->
<!--ME:</SharePoint:CssLink>-->
<!--SPM:<SharePoint:CacheManifestLink runat="server"/>-->
<!--SPM:<SharePoint:PageRenderMode runat="server" RenderModeType="Standard"/>-->
<!--SPM:<SharePoint:ScriptLink language="javascript" name="core.js" OnDemand="true" runat="server" Localizable="false"/>-->
<!--SPM:<SharePoint:ScriptLink language="javascript" name="menu.js" OnDemand="true" runat="server" Localizable="false"/>-->
<!--SPM:<SharePoint:ScriptLink language="javascript" name="callout.js" OnDemand="true" runat="server" Localizable="false"/>-->
<!--SPM:<SharePoint:ScriptLink language="javascript" name="sharing.js" OnDemand="true" runat="server" Localizable="false"/>-->
<!--SPM:<SharePoint:ScriptLink language="javascript" name="suitelinks.js" OnDemand="true" runat="server" Localizable="false"/>-->
<!--SPM:<SharePoint:CustomJSUrl runat="server"/>-->
<!--MS:<SharePoint:SoapDiscoveryLink runat="server">-->
<!--PS: Start Preview--><link href="https://bashcomputing.sharepoint.com/_vti_bin/spsdisco.aspx" rel="alternate" type="text/xml" /><!--PE: End Preview-->
<!--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>-->
<!--SPM:<SharePoint:CssRegistration Name="Themable/corev15.css" runat="server"/>-->
<!--SPM:<SharePoint:AjaxDelta id="DeltaSPWebPartManager" runat="server">-->
<!--SPM:<WebPartPages:SPWebPartManager runat="server"/>-->
<!--SPM:</SharePoint:AjaxDelta>-->
<!--CE: End Head Snippet-->
<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:ContentType msdt:dt="string">Design File</mso:ContentType>
<mso:ContentTypeId msdt:dt="string">0x0101000F1C8B9E0EB4BE489F09807B2C53288F0054AD6EF48B9F7B45A142F8173F171BD10003D357F861E29844953D5CAA1D4D8A3A</mso:ContentTypeId>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
<mso:HtmlDesignFromMaster msdt:dt="string"></mso:HtmlDesignFromMaster>
<mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">https://bashcomputing.sharepoint.com/sites/PublishingSandbox/_catalogs/masterpage/MyMiniMasterPage.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>
<body>
<div id="ms-designer-ribbon">
<!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<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="<%$Resources:wss,master_turnonaccessibility%>" 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="<%$Resources:wss,master_turnoffaccessibility%>" EncodeMethod="HtmlEncode">-->
<!--ME:</SharePoint:EncodedLiteral>-->
</a>
</div>
<!--SID:02 {Ribbon Snippet}-->
<!--PS: Start Preview--><div class="DefaultContentBlock" style="background:rgb(0, 114, 198); color:white; width:100%; padding:8px; height:64px; overflow:hidden;">In true previews of your site, the SharePoint ribbon will be here.</div><!--PE: End Preview-->
</div>
<!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" AuthenticationRestrictions="AnonymousUsersOnly">-->
<!--SPM:<wssucw:Welcome runat="server" EnableViewState="false"/>-->
<!--ME:</SharePoint:SPSecurityTrimmedControl>-->
<div id="s4-workspace">
<div id="s4-bodyContainer">
<div>
<!--CS: Start PlaceHolderMain Snippet-->
<!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.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;">
This area will be filled in by content you create in your page layouts.
<div class="myNav">
<div class="myMenu">
<div data-name="TopNavigationNoFlyoutWithStartNode"><!--CS: Start Top Navigation Snippet--><!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>--><!--MS:<SharePoint:AjaxDelta runat="server" CssClass="ms-displayInline ms-core-navigation ms-dialogHidden" BlockElement="True" ID="DeltaTopNavigation">--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW--><!--MS:<SharePoint:DelegateControl runat="server" Id="topNavigationDelegate" ControlId="TopNavigationDataSource">--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><span style="display:none"><table cellpadding="4" cellspacing="0" style="font:messagebox;color:buttontext;background-color:buttonface;border: solid 1px;border-top-color:buttonhighlight;border-left-color:buttonhighlight;border-bottom-color:buttonshadow;border-right-color:buttonshadow"><tr><td nowrap="nowrap"><span style="font-weight:bold">PortalSiteMapDataSource</span> - topSiteMap</td></tr><tr><td></td></tr></table></span><!--PE: End of READ-ONLY PREVIEW--><!--MS:<Template_Controls>--><!--MS:<asp:SiteMapDataSource ShowStartingNode="True" SiteMapProvider="SPNavigationProvider" ID="topSiteMap" runat="server" StartingNodeUrl="sid:1002">--><!--ME:</asp:SiteMapDataSource>--><!--ME:</Template_Controls>--><!--ME:</SharePoint:DelegateControl>--><a name="startNavigation"></a><!--MS:<asp:ContentPlaceHolder ID="PlaceHolderTopNavBar" runat="server">--><!--MS:<SharePoint:AspMenu runat="server" UseSeparateCss="false" AdjustForShowStartingNode="False" StaticDisplayLevels="2" AccessKey="1" SkipLinkText="" EnableViewState="False" MaximumDynamicDisplayLevels="0" UseSimpleRendering="True" DataSourceID="topSiteMap" Orientation="Horizontal" ID="TopNavigationMenu">--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><link id="CssLink-52a7953ed1d54f839910808d2e75b584" rel="stylesheet" type="text/css" href="/_layouts/15/1033/styles/menu-21.css" /><div id="zz7_TopNavigationMenu" class=" noindex ms-core-listMenu-horizontalBox"><ul id="zz9_RootAspMenu" class="root ms-core-listMenu-root static"><li class="static selected"><a class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-core-listMenu-selected ms-navedit-linkNode" href="/sites/PublishingSandbox" accesskey="1"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Publishing Sandbox</span><span class="ms-hidden">Currently selected</span></span></a><ul class="static"><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PublishingSandbox/Pages/Test-Page.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Test Page</span></span></a></li><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PublishingSandbox/Pages/MoreTesting.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">MoreTesting</span></span></a></li><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PublishingSandbox/Pages/anjularJSForm.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">anjularJSForm</span></span></a></li><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PublishingSandbox/Pages/ExperimentingWithCQWPBug.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">ExperimentingWithCQWPBug</span></span></a></li><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PublishingSandbox/Pages/Another-Test-Page.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Another Test Page</span></span></a></li><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PublishingSandbox/Pages/LastTestForNow.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">LastTestForNow</span></span></a></li><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PublishingSandbox/Pages/FromWelcome.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">FromWelcome</span></span></a></li><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PublishingSandbox/Pages/Maps.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Maps.aspx</span></span></a></li></ul></li><li class="static ms-verticalAlignTop ms-listMenu-editLink ms-navedit-editArea"><span class="ms-navedit-editSpan" id="zz7_TopNavigationMenu_NavMenu_Edit"><a id="zz7_TopNavigationMenu_NavMenu_EditLinks" class="ms-navedit-editLinksText" href="#" onclick="g_QuickLaunchMenu = null; EnsureScriptParams('quicklaunch.js', 'QuickLaunchInitEditMode', 'zz7_TopNavigationMenu', 1, 0, 0, '\u002fSITES\u002fPUBLISHINGSANDBOX'); cancelDefault(event); return false;" title="Edit Links"><span class="ms-displayInlineBlock"><span class="ms-navedit-editLinksIconWrapper ms-verticalAlignMiddle"><img class="ms-navedit-editLinksIcon" src="/_layouts/15/images/spcommon.png?rev=44#ThemeKey=spcommon" alt="Edit Links" /></span><span class="ms-metadata ms-verticalAlignMiddle">Edit Links</span></span></a><span id="zz7_TopNavigationMenu_NavMenu_Loading" class="ms-navedit-menuLoading ms-hide"><a id="zz7_TopNavigationMenu_NavMenu_GearsLink" href="#" onclick="HideGears(); return false;" title="This animation indicates the operation is in progress. Click to remove this animated image."><img id="zz7_TopNavigationMenu_NavMenu_GearsImage" src="/_layouts/15/images/loadingcirclests16.gif?rev=44" alt="This animation indicates the operation is in progress. Click to remove this animated image." /></a></span><div id="zz7_TopNavigationMenu_NavMenu_ErrorMsg" class="ms-navedit-errorMsg"></div></span></li></ul></div><!--PE: End of READ-ONLY PREVIEW--><!--ME:</SharePoint:AspMenu>--><!--ME:</asp:ContentPlaceHolder>--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW--><!--ME:</SharePoint:AjaxDelta>--><!--CE: End Top Navigation Snippet-->
</div>
</div>
<div class="leftNav">
</div>
<div class="rightNav" style="float:right">
<div data-name="SearchBox"><!--CS: Start Search Box Snippet--><!--SPM:<%@Register Tagprefix="SearchWC" Namespace="Microsoft.Office.Server.Search.WebControls" Assembly="Microsoft.Office.Server.Search, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>--><!--MS:<SearchWC:SearchBoxScriptWebPart UseSiteCollectionSettings="true" EmitStyleReference="false" ShowQuerySuggestions="false" ChromeType="None" UseSharedSettings="true" TryInplaceQuery="false" ServerInitialRender="true" runat="server">--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><div class="ms-webpart-chrome ms-webpart-chrome-fullWidth "><div WebPartID="00000000-0000-0000-0000-000000000000" HasPers="true" id="WebPart" width="100%" class="ms-WPBody noindex " OnlyForMePart="true" allowDelete="false" style=""><div componentid="ctl00_ctl03_csr" id="ctl00_ctl03_csr"><div id="SearchBox" name="Control"><div class="ms-srch-sb ms-srch-sb-border" id="ctl00_ctl03_csr_sboxdiv"><input type="text" value="Search..." maxlength="2048" accessKey="S" title="Search..." id="ctl00_ctl03_csr_sbox" autocomplete="off" autocorrect="off" onkeypress="EnsureScriptFunc('Search.ClientControls.js', 'Srch.U', function() {if (Srch.U.isEnterKey(String.fromCharCode(event.keyCode))) {$find('ctl00_ctl03_csr').search($get('ctl00_ctl03_csr_sbox').value);return Srch.U.cancelEvent(event);}})" onkeydown="EnsureScriptFunc('Search.ClientControls.js', 'Srch.U', function() {var ctl = $find('ctl00_ctl03_csr');ctl.activateDefaultQuerySuggestionBehavior();})" onfocus="EnsureScriptFunc('Search.ClientControls.js', 'Srch.U', function() {var ctl = $find('ctl00_ctl03_csr');ctl.hidePrompt();ctl.setBorder(true);})" onblur="EnsureScriptFunc('Search.ClientControls.js', 'Srch.U', function() {var ctl = $find('ctl00_ctl03_csr'); if (ctl){ ctl.showPrompt(); ctl.setBorder(false);}})" class="ms-textSmall ms-srch-sb-prompt ms-helperText" /><a title="Search" role="button" class="ms-srch-sb-searchLink" id="ctl00_ctl03_csr_SearchLink" onclick="EnsureScriptFunc('Search.ClientControls.js', 'Srch.U', function() {$find('ctl00_ctl03_csr').search($get('ctl00_ctl03_csr_sbox').value);})" href="javascript: {}"><img src="/_layouts/15/images/searchresultui.png?rev=44#ThemeKey=searchresultui" class="ms-srch-sb-searchImg" id="searchImg" alt="Search" /></a></div></div></div><noscript><div id="ctl00_ctl03_noscript">It looks like your browser does not have JavaScript enabled. Please turn on JavaScript and try again.</div></noscript><div id="ctl00_ctl03"></div><div class="ms-clear"></div></div></div><!--PE: End of READ-ONLY PREVIEW--><!--ME:</SearchWC:SearchBoxScriptWebPart>--><!--CE: End Search Box Snippet-->
</div>
</div>
</div>
<div class="main">
<!--CS: Start Web Pages Snippet--><!--SPM:<%@Register Tagprefix="af25e94ec" Namespace="Microsoft.Office.Server.Search.WebControls" Assembly="Microsoft.Office.Server.Search, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>--><!--MS:<af25e94ec:ContentBySearchWebPart runat="server" AlwaysRenderOnServer="False" ResultType="" DataProviderJSON="{"QueryGroupName":"Default","QueryPropertiesTemplateUrl":"sitesearch://webroot","IgnoreQueryPropertiesTemplateUrl":false,"SourceID":"5DC9F503-801E-4CED-8A2C-5D1237132419","SourceName":null,"SourceLevel":null,"CollapseSpecification":"","QueryTemplate":"{searchboxquery}","FallbackSort":null,"FallbackSortJson":"null","RankRules":null,"RankRulesJson":"null","AsynchronousResultRetrieval":false,"SendContentBeforeQuery":true,"BatchClientQuery":true,"FallbackLanguage":-1,"FallbackRankingModelID":"","EnableStemming":true,"EnablePhonetic":false,"EnableNicknames":false,"EnableInterleaving":true,"EnableQueryRules":true,"EnableOrderingHitHighlightedProperty":false,"HitHighlightedMultivaluePropertyLimit":-1,"IgnoreContextualScope":false,"ScopeResultsToCurrentSite":false,"TrimDuplicates":true,"Properties":{"Scope":"{Site.URL}","ContentTypeId":"0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF39*"},"PropertiesJson":"{\"Scope\":\"{Site.URL}\",\"ContentTypeId\":\"0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF39*\"}","ClientType":"","ClientFunction":"","ClientFunctionDetails":"","UpdateAjaxNavigate":true,"SummaryLength":180,"DesiredSnippetLength":90,"PersonalizedQuery":false,"FallbackRefinementFilters":null,"IgnoreStaleServerQuery":false,"RenderTemplateId":"","AlternateErrorMessage":null,"Title":""}" BypassResultTypes="True" ResultsPerPage="3" SelectedPropertiesJson="null" HitHighlightedPropertiesJson="["Title","Path","Author","SectionNames","SiteDescription"]" AvailableSortsJson="null" UseSimplifiedQueryBuilder="True" PreloadedItemTemplateIdsJson="null" QueryGroupName="Default" StatesJson="{}" ServerIncludeScriptsJson="null" Title="<%$Resources:Microsoft.Office.Server.Search,CBS_WebPage_Title;%>" FrameType="None" SuppressWebPartChrome="False" Description="<%$Resources:Microsoft.Office.Server.Search,CBS_WebPage_Description;%>" IsIncluded="True" ZoneID="" PartOrder="0" FrameState="Normal" AllowRemove="True" AllowZoneChange="True" AllowMinimize="True" AllowConnect="True" AllowEdit="True" AllowHide="True" IsVisible="True" DetailLink="" HelpLink="" HelpMode="Modeless" Dir="Default" PartImageSmall="" MissingAssembly="<%$Resources:core,ImportErrorMessage;%>" ImportErrorMessage="<%$Resources:core,ImportErrorMessage;%>" PartImageLarge="" IsIncludedFilter="" ExportControlledProperties="True" ConnectionID="00000000-0000-0000-0000-000000000000" ID="g_182485a7_7342_49f4_94d3_f3e4c2e7eb47" ChromeType="None" ExportMode="All" __MarkupType="vsattributemarkup" __WebPartId="{182485a7-7342-49f4-94d3-f3e4c2e7eb47}" WebPart="true" Height="" Width="">--><!--ME:</af25e94ec:ContentBySearchWebPart>--><!--PS: Start of READ-ONLY PREVIEW (do not modify)-->
<div class="ms-webpart-chrome ms-webpart-chrome-fullWidth ">
<div class="ms-WPBody noindex " id="WebPartWPQ1" allowdelete="false" onlyformepart="true" width="100%" haspers="true" webpartid="00000000-0000-0000-0000-000000000000"><div id="ctl00_ctl00_PlaceHolderMain_ComponentMain_ComponentPropertyGrids_g_182485a7_7342_49f4_94d3_f3e4c2e7eb47_csr" componentid="ctl00_ctl00_PlaceHolderMain_ComponentMain_ComponentPropertyGrids_g_182485a7_7342_49f4_94d3_f3e4c2e7eb47_csr"></div><noscript><div id="ctl00_ctl00_PlaceHolderMain_ComponentMain_ComponentPropertyGrids_g_182485a7_7342_49f4_94d3_f3e4c2e7eb47_noscript">It looks like your browser does not have JavaScript enabled. Please turn on JavaScript and try again.</div></noscript><div id="ctl00_ctl00_PlaceHolderMain_ComponentMain_ComponentPropertyGrids_g_182485a7_7342_49f4_94d3_f3e4c2e7eb47">
<div class="display-none">
<div class="ms-webpart-chrome-title" id="WebPartWPQ2_ChromeTitle">
<span title="" class="js-webpart-titleCell" id="WebPartTitleWPQ2"><h2 class="ms-webpart-titleText" style="text-align: justify;"><nobr><span></span><span id="WebPartCaptionWPQ2"></span></nobr></h2></span>
</div><div class="ms-WPBody ms-WPBorder noindex ms-wpContentDivSpace " id="WebPartWPQ2" allowdelete="false" onlyformepart="true" width="100%" haspers="true" webpartid="00000000-0000-0000-0000-000000000000"><div id="ctl00_ctl00_PlaceHolderMain_ComponentMain_ComponentPropertyGrids_g_182485a7_7342_49f4_94d3_f3e4c2e7eb47_ctl00_csr" componentid="ctl00_ctl00_PlaceHolderMain_ComponentMain_ComponentPropertyGrids_g_182485a7_7342_49f4_94d3_f3e4c2e7eb47_ctl00_csr"></div><noscript><div id="ctl00_ctl00_PlaceHolderMain_ComponentMain_ComponentPropertyGrids_g_182485a7_7342_49f4_94d3_f3e4c2e7eb47_ctl00_noscript">It looks like your browser does not have JavaScript enabled. Please turn on JavaScript and try again.</div></noscript><div id="ctl00_ctl00_PlaceHolderMain_ComponentMain_ComponentPropertyGrids_g_182485a7_7342_49f4_94d3_f3e4c2e7eb47_ctl00">
</div><div class="ms-clear"></div></div>
</div>
</div><div class="ms-clear"></div></div>
</div><!--PE: End of READ-ONLY PREVIEW--><!--CE: End Web Pages Snippet-->
</div>
</div>
<!--ME:</asp:ContentPlaceHolder>-->
<!--ME:</SharePoint:AjaxDelta>-->
<!--CE: End PlaceHolderMain Snippet-->
</div>
</div>
</div>
<div id="navBarContainer">
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderLeftNavBar" runat="server"/>-->
</div>
</body>
</html>
Here is a smaller fragment. This snippet will make the markup for a search button:
Here is that markup pulled from the associated master page:
<div data-name="SearchBox"><!--CS: Start Search Box Snippet--><!--SPM:<%@Register Tagprefix="SearchWC" Namespace="Microsoft.Office.Server.Search.WebControls" Assembly="Microsoft.Office.Server.Search, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>--><!--MS:<SearchWC:SearchBoxScriptWebPart UseSiteCollectionSettings="true" EmitStyleReference="false" ShowQuerySuggestions="false" ChromeType="None" UseSharedSettings="true" TryInplaceQuery="false" ServerInitialRender="true" runat="server">--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><div class="ms-webpart-chrome ms-webpart-chrome-fullWidth "><div WebPartID="00000000-0000-0000-0000-000000000000" HasPers="true" id="WebPart" width="100%" class="ms-WPBody noindex " OnlyForMePart="true" allowDelete="false" style=""><div componentid="ctl00_ctl03_csr" id="ctl00_ctl03_csr"><div id="SearchBox" name="Control"><div class="ms-srch-sb ms-srch-sb-border" id="ctl00_ctl03_csr_sboxdiv"><input type="text" value="Search..." maxlength="2048" accessKey="S" title="Search..." id="ctl00_ctl03_csr_sbox" autocomplete="off" autocorrect="off" onkeypress="EnsureScriptFunc('Search.ClientControls.js', 'Srch.U', function() {if (Srch.U.isEnterKey(String.fromCharCode(event.keyCode))) {$find('ctl00_ctl03_csr').search($get('ctl00_ctl03_csr_sbox').value);return Srch.U.cancelEvent(event);}})" onkeydown="EnsureScriptFunc('Search.ClientControls.js', 'Srch.U', function() {var ctl = $find('ctl00_ctl03_csr');ctl.activateDefaultQuerySuggestionBehavior();})" onfocus="EnsureScriptFunc('Search.ClientControls.js', 'Srch.U', function() {var ctl = $find('ctl00_ctl03_csr');ctl.hidePrompt();ctl.setBorder(true);})" onblur="EnsureScriptFunc('Search.ClientControls.js', 'Srch.U', function() {var ctl = $find('ctl00_ctl03_csr'); if (ctl){ ctl.showPrompt(); ctl.setBorder(false);}})" class="ms-textSmall ms-srch-sb-prompt ms-helperText" /><a title="Search" role="button" class="ms-srch-sb-searchLink" id="ctl00_ctl03_csr_SearchLink" onclick="EnsureScriptFunc('Search.ClientControls.js', 'Srch.U', function() {$find('ctl00_ctl03_csr').search($get('ctl00_ctl03_csr_sbox').value);})" href="javascript: {}"><img src="/_layouts/15/images/searchresultui.png?rev=44#ThemeKey=searchresultui" class="ms-srch-sb-searchImg" id="searchImg" alt="Search" /></a></div></div></div><noscript><div id="ctl00_ctl03_noscript">It looks like your browser does not have JavaScript enabled. Please turn on JavaScript and try again.</div></noscript><div id="ctl00_ctl03"></div><div class="ms-clear"></div></div></div><!--PE: End of READ-ONLY PREVIEW--><!--ME:</SearchWC:SearchBoxScriptWebPart>--><!--CE: End Search Box Snippet-->
Here is that markup pulled from the associated master page:
<!-- ===== STARTER: Search Control ==================================================================================== -->
<div class="ms-dialogHidden">
<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
<SearchWC:SearchBoxScriptWebPart UseSiteCollectionSettings="true" EmitStyleReference="false" ShowQuerySuggestions="true" ChromeType="None" UseSharedSettings="true" TryInplaceQuery="false" ServerInitialRender="true" runat="server" __MarkupType="vsattributemarkup" WebPart="true" Height="" Width="" __WebPartId="{F7DBFEDF-D871-41F9-B91F-448BE21E6584}" id="g_f7dbfedf_d871_41f9_b91f_448be21e6584"/>
</asp:ContentPlaceHolder>
</div>
Ok so the HTML is decorated with html comments that are syntactically meaningful to SP.
The Master Page is a standard .Net page with .Net controls.
How are the Designer pages usually generated - I am assuming you wouldn't code them by hand?
The Master Page is a standard .Net page with .Net controls.
How are the Designer pages usually generated - I am assuming you wouldn't code them by hand?
If you want to "brand" the out of the box SharePoint Site, there are simple themes (skins) that you can apply. If you want more exotic changes like responsive, multiple columns, custom views and other changes to the layout, you probably would start with an existing master page, copy it and it's associated html file and using the Design Manager, modify the html file until you achieve the desired look and content layout.
Also, you might design custom page layouts for how widgets reside on pages (by type) or build custom delegate controls to replace or supplement the OOTB controls.
Also, you might design custom page layouts for how widgets reside on pages (by type) or build custom delegate controls to replace or supplement the OOTB controls.
Ok but I meant the mechanics of how it is done. The Design Manager page looks like it is generated by something. You need to upload the page in a particular format that DM understands. In other circumstances how would you create a DM page.
If I look at this page I see the following
Which is telling me that the upload to DM is just plain old HTML.
If I look at this page I see the following
With Design Manager, you can create a visual design for your website by using whatever web design tool or HTML editor you prefer, using only HTML and CSS, and then upload that design into SharePoint. Design Manager is the central hub and interface where you manage all aspects of a custom design.Specifically create a visual design for your website by using whatever web design tool or HTML editor you prefer, using only HTML and CSS
Which is telling me that the upload to DM is just plain old HTML.
I take an HTML template which is a minimal SharePoint compliant page and edit it in Dreamweaver. At the same time I open that file in DM editor. In the DM editor is a snippet tool that allows you to select from a catalogue of snippets SharePoint compliant "widget" definitions. Once you select the piece of interest, you copy the generated HTML fragment from a textbox displayed in DM and paste it to a valid section of your Dreamweaver edit session for that HTML page.
After doing so, you upload the HTML file to its folder and SharePoint generates the associated MasterPage or you receive an error indication that you broke something and you must go back to your Dreamweaver session, review/backout/fix what you've broken.
That's pretty much the dance.
After doing so, you upload the HTML file to its folder and SharePoint generates the associated MasterPage or you receive an error indication that you broke something and you must go back to your Dreamweaver session, review/backout/fix what you've broken.
That's pretty much the dance.
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Gain unlimited access to on-demand training courses with an Experts Exchange subscription.
Get AccessWhy Experts Exchange?
Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.
Jim Murphy
Programmer at Smart IT Solutions
When asked, what has been your best career decision?
Deciding to stick with EE.
Mohamed Asif
Technical Department Head
Being involved with EE helped me to grow personally and professionally.
Carl Webster
CTP, Sr Infrastructure Consultant
Did You Know?
We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE
Ask ANY Question
Connect with Certified Experts to gain insight and support on specific technology challenges including:
- Troubleshooting
- Research
- Professional Opinions
Join our community and discover your potential
Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.
*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.