How To Create Custom Master Page In Sharepoint Designer 2013

This step-by-step guide provides a quick way to enable a custom master page theme in Sharepoint 2013 in six easy steps.

1. Create a one Page HTML/CSS page
2. Map master page file folder
3. Upload the contents of the HTML
4. Update Theme HTML
5. Convert the HTML file to a Sharepoint master page
6. Activate

1. Create a one Page HTML/CSS page

Create a one-page HTML page which matches your preferred look and feel. Insert placeholder text at the sections which will be replaced by Sharepoint-generated code. The sections labeled A-E below are typically available as Sharepoint snippets.

General tips for creating the html page:

• The name assigned to the html file should be unique and must have a .html or a .htm extension.
• Make sure that the HTML file is XML-compliant. Consider running your HTML file through an external XML validator to identify XML errors.
• The HTML code should not include any <form> tags.
• Place all images and scripts associated with the HTML page inside folders in the root directory.
• Links and references within the HTML page should be relative links.

2. Map master page file folder

• When logged in to the Sharepoint site, choose Settings on the upper right corner of the page and then choose Design Manager.
• Click on Upload Design Files and copy the entire mapped link as shown below.
• Map this drive as a local drive on your computer.

3. Upload the contents of the HTML file to the mapped folder created in step 2

Upload the HTML file and its associated folders directly into the root of the mapped master page folder.

4.      Convert the HTML file to a Sharepoint master page

• From the Sharepoint page, click on the upper right corner of the page, choose Settings and then choose Design Manager.
• In the Design Manager page select Edit Master Pages from the left navigation pane.
• Choose Convert an HTML file to a SharePoint master page.
• In the Select an Asset dialog box, browse to and select the HTML file that you created earlier.
• Click on Insert.

At this point, SharePoint 2013 converts your HTML file into a   .master file with the same name as your html page. In Design Manager, your HTML file now appears with a Status   column that shows one of two possible statuses:

• Warnings and Errors
• Conversion successful

• To fix any errors, edit the HTML file that resides directly on the server by using an HTML editor to open and edit the HTML file in the mapped drive. Each time you save the HTML file, any changes are synced to the associated .master file. If the HTML file has been converted successfully, you should be able to review the page.

5. Update Theme HTML

When you convert an HTML file into a master page, multiple lines of markup are added to the HTML file. You can safely ignore most of these additions, but be careful not to alter any of the code as they are required in converting your HTML file into the .master file that SharePoint actually uses. Each time you save a change to the HTML file, this SharePoint markup makes it possible for that same change to be made to the associated .master file in the background.  All the structural changes to your HTML code should therefore be made through this page.  To update sections A-F listed in 1 above, follow these specific steps:

A snippet is an HTML representation of a SharePoint component or   control such as a navigation bar or a Web Part. By using the Snippet Gallery   in Design Manager, you can quickly add SharePoint functionality to your HTML   master page or page layout.

SECTION	TITLE	REPLACE	WITH
A	Logo	<a …</a>	Snippets -> Site Logo
B	Logged in User	Sharepoint User	Snippets->Sign In
B	Search Box		Snippets->Search Box
C	Navigation Links	<ul><li>…..</li></ul>	Snippets -> Top Navigation
D	Sharepoint body	<p>ValeWaste Sharepoint Content Goes Here</p>	<div data-name="ContentPlaceHolderMain"> <!–CS: Start   PlaceHolderMain Snippet–>… <!–CE: End   PlaceHolderMain Snippet–></div>
E	Sharepoint links	<p><a href=""> … </a></p>	Snippets -> Top Navigation

6. Activate the new Theme masterpage

Before you can activate a new theme, you have to publish the new html page. To publish a theme, select Master pages and page layouts from the site settings page.  Find the HTML file of the new theme and right click on it to reveal the file menu. Select Publish a Major Version.  Activate the new theme by selecting Master page under Look and Feel section of the site settings page. Select the theme from the dropdown options and click OK to make it the active theme.

Article written by Kenneth Kabaki

Kenneth has been a Dynamics CRM/Integration Consultant with I.B.I.S. since August 2013. Kenneth has an extensive background in development of web applications on a wide array of platforms including PHP and ASP.NET MVC. As a Dynamics CRM Consultant, Kenneth is often involved in the full implementation of projects involving customization, and integrations using Scribe and SQL integration services. Other tasks routinely accomplished include requirement analysis and documentation, setup and configuration, testing, go-live support, along with custom development to extend the base functionality of Dynamics CRM. Kenneth graduated from the University of North Florida with a degree in Civil Engineering. Outside of the office, Ken enjoys running, travelling and programming.

Ask Kenneth a Question or call (866) 714-8422

How To Create Custom Master Page In Sharepoint Designer 2013

Source: https://ibisinc.com/blog/enabling-a-custom-master-page-theme-in-sharepoint-2013-2/

Posted by: alcarazliplet.blogspot.com

Share this post