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

To achieve this task, we have to perform following tasks.
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.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <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.

<div class="navigationarea s4-notdlg">

Now deploy the solution again and refresh the page and open the popup once and see the magic.

Hope this post is helpful to you.

Thanks.

Advertisements

1 Comment

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