How to: Create a Master Page in SharePoint 2013 using Visual Studio

Step I: Create Master Page Design Manager using
To create a minimal master page
  1. Browse to your publishing site.
  2. In the upper-right corner of the page, choose Settings, and then choose Design Manager.
  3. In Design Manager, in the left navigation pane, choose Edit Master Pages.
  4. Choose Create a minimal master page.
  5. In the Create a Master Page dialog box, enter a name for the master page, and then choose OK.At this point, SharePoint creates both a .master file and an associated HTML file with the same name in the Master Page Gallery.In Design Manager, your HTML file now appears with Conversion successful displayed in the Status column.
  6. Follow the link in the Status column to preview the file.The preview page is a live server-side preview of your master page.For more information about previewing the master page with different pages, see How to: Change the preview page in SharePoint 2013 Design Manager.The preview page also contains a Snippets link in the upper-right corner. This link opens the Snippet Gallery, where you can begin replacing static or mock-up controls in your design with dynamic SharePoint controls. For more information, see SharePoint 2013 Design Manager snippets.After your master page previews successfully, you will see a <div> tag that gets added to your HTML file. You may have to scroll to the bottom of the page to see the <div> tag.This <div> is the main content block. It resides inside a content placeholder named ContentPlaceHolderMain. At run time, when a visitor browses your site and requests a page, this content placeholder gets filled with content from a page layout that contains content in a matching content region. You should position this <div> where you want your page layouts to appear on the master page.
  7. You can edit the HTML file that resides directly on the server by using an HTML editor to open and edit the HTML file in a mapped drive. Each time you save the HTML file, any changes are synced to the associated .master file. For more information, see How to: Map a network drive to the SharePoint 2013 Master Page Gallery.
Step II : Download the MasterPage and HTML
  1. Go to MasterPage Gallary
  2. Find your created Master Page and HTML File and “Download A Copy” the same by clicking on the right side … button
  3. Keep the Downloaded files to specific location
Step III : Integrate the created master page in Step I to Visual Studio Project
  1. Create the module as depicted in below fig,
  2. 1
  3. Add the Step II copied .MasterPage and .HTML to Module
  4. Edit the the Element.xml as below,
  5. 2
  6. Create a publishing feature and add the the module to it 3
  7. Deploy the Feature and activate the same
  8. Now Master Page should reflect to master page gallery of deployed site
Advertisements

One thought on “How to: Create a Master Page in SharePoint 2013 using Visual Studio

  1. Hemachandra says:

    hi Good post i follow the same using share point hosted app but i am unable to see the master page in site master page gallery.(but i can find in isolation site master page gallery)
    could you describe step No:6 in detail.

    thanks
    hemachandra

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s