Creating Custom Master Page Using Design Manager

Design Manager is a collective set of pages and functionality in SharePoint 2013 that guides users through the design process. It gives one the ability to map a local drive to a site’s Master Page Gallery and import HTML and CSS files into SharePoint. From there, SharePoint actually converts the HTML files into a Master page.

Given below are detailed steps on creating a Custom Master Page using Design Manager.

Please note that Design Manager is only available on sites with the publishing features enabled.

Step 1: Welcome

Welcome screen which display two useful links:  ‘Import a design package’, and ‘Pick a pre-installed look’.

Import a design package: On this screen user can upload design package and apply the branding to the site.

Pick a pre-installed look: User is directed to ‘Change the look’ screen. On this screen the user can select suitable theme and apply.

 Step 2: Manage Device Channels

This screen shows the device channels already set up on the site and gives options to set up additional device channels. Using device channels, different master pages for different devices or browsers, can be applied through the use of keywords that SharePoint looks for in a requesting browser’s user agent string.

 Step 3: Upload Design Files

Here, map a network drive to Master Page Gallery (/_catalogs/masterpage/) and move all branding assets into the SharePoint site.

 MAPPING A NETWORK DRIVE TO THE MASTER PAGE GALLERY

• Depending on your version of Windows, the steps to start mapping a drive are slightly different:
• Note: Internet Explorer users, right-click the link and select ‘Properties’. Copy the location displayed beside Address (URL).
•  Copy the URL provided in step 3 of the Design Manager (marked ‘1’ in above image).
  –  In Windows 7 or Windows Server 2008/2008 R2, click Start > right-click  Computer > map network drive
  –   In Windows 8 or Windows Server 2012, open the Start Screen, type Computer.  Right-click Computer and select Map Network Drive
• Choose your drive letter
• Paste the URL you copied from the Design Manager into the Folder field
• Select whether you want the drive to reconnect at logon. Click Finish and Windows Explorer opens and displays the contents of the Master Page Gallery in all its glory.

In the previous versions of SharePoint, master pages and page layouts were placed in the Master Page Gallery and custom CSS, images, and scripts in the Style Library or other document library. In SharePoint 2013, all branding assets CSS, images, scripts, master pages, and page layouts are placed in the Master Page Gallery.

Create a new folder within the mapped Master Page Gallery and copy all the branding assets into this folder.

If you are using SharePoint Designer 2013, follow the below steps:

• Open the site
• Select ‘All files’ from left navigation
• Navigate to _catalogs > masterpage folder
• Create new folder to hold all the branding assets [Example folder name ‘Trigent’]
• Copy paste the files into this folder

Step 4: Edit Master Pages

Here are options for converting an HTML file to a master page, or creating a blank starter master page. Below that, there are two master page files (oslo.master and seattle.master, SharePoint 2013’s out-of-the-box master pages) that have successfully converted.

 CONVERTING AN HTML FILE TO A MASTER PAGE:

1.  Click Convert an HTML file to a SharePoint master page.
2. In the Select an Asset dialog, browse to your Trigent folder within the Master Page Gallery, and select the Trigent2013.html file. The Location (URL) field at the bottom of the Select an Asset dialog shows the filename of the selected file

• Click the Insert button.
• After a few seconds the Design Manager refreshes, your Trigent2013 file is listed, and its status reads Conversion Successful.

If for some reason your conversion is unsuccessful, you’ll receive a status of Warnings and Errors. If you click the Warnings and Errors link, SharePoint will try to point out where you went wrong.

Generally, it’s due to malformed HTML. Because SharePoint parses through the document, your HTML needs to be XML compliant—make sure tags are closed in the proper order and tag properties are properly enclosed in quotes; and just generally make sure your HTML has the correct syntax.

Validate your HTML using online HTML validator https://validator.w3.org/

•  Your DOCTYPE needs to be listed in all uppercase letters.
• Don’t include any <form> tags in your HTML document; SharePoint adds a form automatically during the conversion.

On successful conversion, click the Trigent2013 filename and you can see a preview of your master page.

 MOVING A CONTENT PLACEHOLDER

When creating your own HTML design, you might find it helpful to add a comment to the beginning of the content that will be a page layout and another comment at the end like <!– START Page Mid Content –> to <!– END Page Mid Content –>, so it’s easy to discern where you will move the placeholder at this point.

For this example assume there are 3 sections header, mid content & footer.

•  Opened Trigent2013.html from the mapped drive in HTML editor. You should also see a corresponding Trigent2013.master file, but you’ll only be working with the HTML file. SharePoint automatically updates the master page file with any changes you make in the HTML file. If you don’t see the master page file, you may just need to refresh the Windows Explorer window by pressing F5.
• Assuming the mid content div (<div class=”mid-content”></div>) tag is placed between comments <!– START Page Mid Content –> to <!– END Page Mid Content –>, select all the content inside mid content div tag.
• Cut (Ctrl+X) these lines from the HTML file. (Don’t delete them!) Create a new page in HTML editor and paste (Ctrl+V) the lines in the HTML for later.
• Save the Trigent2013.html file, and switch back to the preview of your master page in the browser. On refresh you should see the master page with the empty mid content.

• Now its time to move the placeholder into the mid content area of the page. Scroll to the bottom of the HTML and find the following block of code.

<div data-name="ContentPlaceHolderMain">
 <!--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; 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>

•  Cut this code from the HTML (Ctrl+X) and place the cursor within the <div class=”mid-content”></div> tags. Press Enter to create an empty line between the opening <div> and closing </div>.
• Paste the code snippet (Ctrl+V) in the empty line between the mid-content div tags. Save Trigent2013.html. The preview should update with the yellow block in the mid content area.

• Delete the text and yellow box this is simply to help you locate the div to position it properly. Select and delete the following content

<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>

•  Save Trigent2013.html and return to the browser and refresh the master page preview. You should see your master page with an empty mid content area.

 ADDING SNIPPETS TO A MASTER PAGE

The Snippet Gallery is a collection of code snippets for various pieces of SharePoint functionality that you can use in your master page. Each snippet is found on the gallery’s ribbon. On selecting the snippet display the actual snippet of code that you can copy and paste into your master page, and an expanding accordion set of options that you can use to make changes to the code snippet if you want.

There are actually two versions of the Snippet Gallery: one for master pages and one for page layouts.

Snippets link is present at the upper-right corner of the page, above the ribbon preview. The Snippet Gallery opens in a new browser tab, so you can easily switch back and forth between the gallery and the master page preview.

EXAMPLE: REPLACING PLACEHOLDER SITE LOGO WITH SHAREPOINT SITE LOGO SNIPPET

1. Switch to the Snippet Gallery and click the Site Logo snippet in the ribbon.
2. Scroll down the page to the Customization – Site Logo (SPSimpleSiteLink) section and click the Appearance header to expand it. In the CssClass properties, replace the default text, ms-siteicon-a, with logo.
3. Still in the Customization – Site Logo (SPSimpleSiteLink) section, expand the Navigation section and in the NavigateUrl field, type ~sitecollection/.
4. In the Customization – Site Logo (SiteLogoImage) section, expand the Appearance section and delete the default text from the CssClass field. Then expand the Misc section, and in the LogoImageUrl field, replace the default URL in the field with /_catalogs/masterpage/trigent/logo.png.
5. Scroll up and click the Update button, then select and copy the HTML snippet.
6. Replace the HTML with the Site Logo snippet you just copied
7. Save Trigent2013.html, return to the master page preview in the browser, and refresh. The site logo should look exactly the same as it did before.

 Step 5: Edit Display Templates

Used for displaying search results and data. The Design Manager provides you with a view into the display templates folder in the Master Page Gallery, so you can see the available templates that can be used as a starting point for creating any custom template you want.

 Step 6: Edit Page Layouts

Page layouts are basically layout templates for displaying content on each page in SharePoint. All publishing pages are based on a page layout, and each page layout is based on a content type.

Creating custom page layouts will be discussed in detail in the next blog.

 Step 7: Publish and Apply Design

Here you will publish your design assets, page layout, and master page. Then you’ll apply the master page to the site.

 PUBLISHING DESIGN FILES

• Click the link Go to the Master Page Gallery. The Master Page Gallery opens in a new browser tab.
• Click the Trigent folder to display its contents and put a check in the box that appears next to the Trigent2013.html file when you hover over the filename.
• On the ribbon, click the Files tab; then click the Publish button toward the right side.

• In the dialog that opens, optionally type a comment in the Comments field; then click OK to publish your master page. SharePoint automatically publishes the corresponding Trigent2013.master file.
• There’s no way to mass publish all the items in this folder from within the Master Page Gallery. We have to take different approach click the Settings menu > Site settings.
• Under the Site Administration header, click Content and Structure to open the Content and Structure manager.

• In the left pane of the Content and Structure page, click the + next to Master Page Gallery. Then click the Trigent folder to display its contents in the main window of the page.
• At the top of the main body, click the icon of stacked check boxes to select all items in the folder.
• Click the Actions drop-down in the toolbar, and select Publish. In the dialog that appears, optionally type a comment, and then click OK. This publishes all items in the Trigent folder.

• Select each sub folders in Trigent folder and repeat the publish process for the items in each folder.
• When everything is published, click the Back to ‘[Site name]’ link in the upper left of the Content and Structure window to return to your site.

 APPLY YOUR CUSTOM MASTER PAGE TO THE SITE

• Return to the Design Manager tab in the browser.
• Still on step 7, click the link Assign Master Pages to Your Site Based on Device Channels. This opens the Master Page Settings in a dialog.
• For the Default drop-down, select trigent/trigent2013. Change the System Master Page setting drop-down to trigent/trigent2013. Click OK to apply your custom master page to your site.
• System master page setting applies the selected master page to all page types, including settings pages.

Step 8: Create Design Package

A design package is a Windows Solution Package (WSP), sometimes called a SharePoint Solution, which contains your custom branding assets from the site and instructions on where those assets should be deployed. When a design is packaged up in a WSP, it can be imported to other SharePoint sites or farms, and the custom branding you’ve built can be applied to other sites.

 CREATING A DESIGN PACKAGE

1. In the Design Name field, SharePoint has provided a name for you; it uses the site’s name by default. You can change it if you want. This becomes part of the filename for the design package. The other part is the version number of the design that appears directly under the name field.
2. You have the option to include the site’s search configuration in the design package. This can be useful if you’ve spent some time customizing the search experience in the site with custom query rules, result types, result sources, and other search-related assets.
3. Click Create to create your design package. You see a message that SharePoint is working on creating the package, and after a few moments, the Design Manager reappears with a link underneath the Create button.
4. Click the download link Your package is ready save your WSP to your computer for importing into another site. Save your WSP file to a location on your computer, such as your desktop.