Wednesday, January 29, 2014

Creating custom master page in visual studio and deploy it to the sharepoint site

1. Open the sharepoint designer and open any site. Goto master pages section in the designer and take a copy of existing master page and paste into the same gallery. Do some customization. After customization my site is appearing as below.

2. Now open the visual studio and create a New project–> Empty Sharepoint project (select the .net framework 3.5) and give the project name. Give the url in the coming screen into which you want to deploy your master page.

3. Now right click on the solution in the visual studio, Add–> New Item–>Module.

4. Rename the Sample.txt into Sample.master. Open the Sample.master page and remove the existing content. Now paste the content form the master page you already customized earlier. Open the Elements.xml file and enter the following code.
1
2
3
4
5
6
<?xml version="1.0" encoding="utf-8"?>
  <Module Name="CustomMaster" Url="_catalogs/masterpage">
    <File Path="CustomMaster\Sample.Master" Url="CustomMaster/Sample.Master" Type="GhostableInLibrary" IgnoreIfAlreadyExists="TRUE" />
  </Module>
</Elements>
Now deploy the solution.
Now the solution was deployed into your site. We have to enable the necessary features and map our master page to our site. For this follow the below steps.
1. Goto the site in which you deployed your solution and goto Site Settings and activate the following features at site collection level(Site Settings –> Site Collection Administration –>Site collection features ) and site level (Site Settings –> Site Actions –> Manage Site features) respectively.
a. SharePoint Server Publishing Infrastructure
b. SharePoint Server Publishing


2. After activating come back to the site settings page and goto Look and Feel section –> Master page. Now select our required master page from the drop down and click on ok.

In the above image I just only applied our master page to the site. If you want to use the same master page to System pages also, the select our master page in the below section also and click ok.
3. Now goto home page and check whether our master page applied or not. After applying the changes my final page looks like this.

4. upto now every thing is fine. But some times while opening the popups like adding a new item, we came across a situation like our custom menu may appear int the popup like below.

If you found like this, don’t worry we have a solution.
Goto visual studio solution once and open our Sample.master page and search for the area what coming in the popup. In my case, my custom menu is appearing in the popup. I went to that custom menu area in the master page and applied the class s4-notdlg.
1
<div class="navigationarea s4-notdlg">
Now deploy the solution again and refresh the page and open the popup once and see the magic.

No comments:

Post a Comment