Wednesday, February 22, 2012

Custom master page and page layout using visual studio

This is Team Site, default have not "master page" link will be display in category Look and Feel

Active some features to "master page" link will be display in category Look and Feel
Go to Site Actions | Site Settings
At category "Site Collection Administration" click to " Site collection features" link then find to " SharePoint Server Publishing Infrastructure" feature and active it

Go to Site Actions | Site Settings
At category " Site Actions" click to " Manage site features" link then find to " SharePoint Server Publishing" feature and active it

After active two feature you will see "master page" link will be display in category Look and Feel

Go to Site Actions | Site Settings
At category "Look and Feel" click to " Master page" then choose master page from dropdownlist

You will see user interface as follows:


Deploy custom master page from v4.master

Open visual studio | New Project | choose Module template and provide name is

choose radio button "Deploy as a farm solution"

Change Module1 to MasterPage

Delete Sample.txt file in MasterPage module

Download default master page sharepoint (V4.master) from your web application or at here, then add new existing item to v4.master

Choose your v4.master

Open Element.xml file in MasterPage module and see Molule and File tag is configured as follows

Copy  code  Url="_catalogs/masterpage" RootWebOnly="TRUE" List="116" and paste to here

Delete Url MasterPage/

Copy  Type="GhostableInLibrary" IgnoreIfAlreadyExists="TRUE" and paste to here
Then change v4.master to mstechsharingdotcom.master
Continue, Mapping Images folder as follows

Mapping Layout folder as follows

Mapping STYLES folder as follows

Choose STYLES Folder

After Mapping Folders, you see UI as follow

Open mstechsharingdotcom.master and edit content below body tag

Deploy project
Go to Site Actions | Site Settings
At category "Look and Feel" click to " Master page" then choose master page from dropdownlist which it had deployed from visual

You see Hello word is appear

Design Html Page and copy resource (Image, css, js) to sharepoint folder (image 26)

Download html package at here then view on browser, you will see UI as follow

In folder STYLES, create new folder

Copy image to Images |, .css to STYLES |, .JS to Layouts | (if have) from html package

Add new Style Sheet and provide name is mstechsharingdotcom.css then call mstechsharingdotcom.css to mstechsharingdotcom.master

Edit myMaster.master (mstechsharingdotcom.master) image 30

Change background

Call mstechsharingdotcom.css file above </head> tag

Open .css file in html package and copy code below

Open mstechsharingdotcom.css and paste that code to here

but you know body in normal html is different to body in sharepoint. So you use fire bug in firefox and get div contain all contain (in sharepoint 2010 that div have id= "s4-workspace")

Delete all code in mstechsharingdotcom.css and paste this code to here and change path in URL
body #s4-workspace {
    background-attachment: fixed !important;
    background-image: url("/_layouts/Images/") !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;

Deploy and set master page again (no require)

You see background is changed

Change width of body container. Using firebug and get that div tag with id "s4-bodyContainer"

copy this code and paste to mstechsharingdotcom.css file

Deploy project and hit F5 you will see width of body container is changed

Insert banner (image 39)

Using firebug and get where can insert banner. below div with class ="s4-title s4-lp" and above div have id="s4-topheader2"

Open mstechsharingdotcom.master and insert code html to here
<!--Insert banner-->
<div class="div-top-ban">
<!--End Insert banner-->

Paste this segment code to here
.div-top-ban {
       height: 172px;
       width: 980px;
       background-image: url(/_layouts/Images/;
       background-repeat: no-repeat;
Deploy project
You see banner had inserted

Custom menu bar

download css at here and add existing item to STYLES | folder

at reference MenuBar.css to mstechsharingdotcom.master

Deploy project
You see menu had changed but you see have a block with width is not fix

Solve: Using firebug to get Block which it is not fix the width, it is div with id="s4-titlerow"

Paste segment code to here
    width:980px !important;

deploy project
UI is fixed as follow

Insert bottom (Image 50)

Using firebug to find where can insert bottom. insert below div with id="s4-mainarea"

Copy this segment code to mstechsharingdotcom.master (view in project)

Open mstechsharingdotcom.css and insert code css to here

deploy project
Now, you see UI have background, banner, top menu, bottom

Design page layout (image 55)

Download your Default PageLayout in sharepoint 2010 or download at here

Then add Existing Item... file DefaultLayout.aspx to MasterPage module

Rename DefaultLayout.aspx to mstechsharingLayout.aspx

Open mstechsharingLayout.aspx file and delete all and paste segment below to mstechsharingLayout.aspx file

<%@ Page language="C#"   Inherits="Microsoft.SharePoint.Publishing.PublishingLayoutPage,Microsoft.SharePoint.Publishing,Version=,Culture=neutral,PublicKeyToken=71e9bce111e9429c" meta:webpartpageexpansion="full" meta:progid="SharePoint.WebPartPage.Document" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="OSRVWC" Namespace="Microsoft.Office.Server.WebControls" Assembly="Microsoft.Office.Server, Version=, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="OSRVUPWC" Namespace="Microsoft.Office.Server.WebControls" Assembly="Microsoft.Office.Server.UserProfiles, Version=, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="SPSWC" Namespace="Microsoft.SharePoint.Portal.WebControls" Assembly="Microsoft.SharePoint.Portal, Version=, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="SEARCHWC" Namespace="Microsoft.Office.Server.Search.WebControls" Assembly="Microsoft.Office.Server.Search, Version=, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
       <style type="text/css">
                     display: none;
           body #s4-leftpanel
            display:none !important;
        body .s4-ca
             margin-left: 0px;
       <SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/page-layouts-21.css %>" runat="server"/>
       <PublishingWebControls:EditModePanel runat="server" id="editmodestyles">
              <!-- Styles for edit mode only-->
              <SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/edit-mode-21.css %>"
                     After="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/page-layouts-21.css %>" runat="server"/>

<asp:Content ContentPlaceHolderID="PlaceHolderPageTitle" runat="server">
       <SharePoint:FieldValue id="PageTitle" FieldName="Title" runat="server"/>

<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">

<asp:Content ContentPlaceHolderId="PlaceHolderPageImage" runat="server">
       <img src="/_layouts/images/blank.gif" alt="">
<asp:Content ContentPlaceHolderId="PlaceHolderTitleBreadcrumb" runat="server"></asp:Content>
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
<table style="padding-top:0px;" border="0" cellpadding="0" cellspacing="0" ID="OuterZoneTable" width="100%">
              <td ID="OuterButton" colspan="2" >
                     <table style="width:100%">
                           <td ID="OuterButtonLeft">

                     <WebPartPages:WebPartZone runat="server"
                                  Title="Button_ZoneLeft" Orientation="Vertical"
                           <td ID="OuterButtonMid">

                     <WebPartPages:WebPartZone runat="server"
                                  Title="Button_ZoneMidle" Orientation="Vertical"
                                         <td ID="OuterButtonRight">

                     <WebPartPages:WebPartZone runat="server"
                                  Title="Button_ZoneMidle" Orientation="Vertical"

Open Element.xml in MasterPage Module then delete URL MasterPage\ below

Copy  Type="GhostableInLibrary" IgnoreIfAlreadyExists="TRUE" and paste to here

Deploy project
Go to Site Actions | Site Settings
In category " Look and Feel" click to " Page layouts and site templates " link then select new page default settings is (Page)mstechsharingLayou.aspx

Go to Site Actions | Manage Content and Stucture

Click to Pages

Add New Page

Typing Name: Home
Choose Page layout is "(Page)mstechsharingLayou.aspx"

Check in Page

Go to Site Action | Site Settings
In category "Look and Feel" click to "Welcome Page" link and set Wellcome page to page had created above

Back to home page | Edit Page and Insert image webpart (Left, center, right) as follows
download image at here

Have some problems
Go to Site Actions | Site Settings
At category "Look and Feel" click to " Page layouts and site templates " you will see a problem with the width as follow:

Using firebug to find control which effect to UI

Decrease width from 3in to 2in on firebug to view result

Copy css from firebug to your mstechsharingdotcom.css
.areatemplate-select {
    height: 1.75in;
    width: 2in;

You will see UI as follow

Download All Resource: at here

Read more:

Deploy Branding Solution


  1. - Bài viết của Hùng khá chi tiết và rất bài bản. Hy vọng sắp đến Hùng chia sẻ thêm cho anh em về kỹ thuật thiết kế trang masterpages cho cổng thông tin điện tử (trang chủ, trang tin tức , danh sách tin tức).

  2. hee chi tiet qua, dang lam theo, ma chua đc :)

  3. OK. Thanks you very much. i will try share more.

  4. Excellent Man,
    Thank you very much for the post.

  5. Thanks man, you can share for all people with purpose share knownledge

  6. Thanks for providing this information on your website.
    Also see my webpage > Remove Stickers

  7. Absolutely fabolus! This made my day since all searches so far have been bad. Great blog-post!

  8. Hi Mansoor Pasha,

    Thanks for your comment!!!

  9. This is by far the most useful post

  10. Great post. I followed the steps and got it to work. The only problem i ran into was the path to the images ../images/imagename. I had to modify mine to work such as ../layouts/images/imagename

    I am halfway there. Having trouble with top banner.. stock there for now, but his truly awesome. Now i feel like I have some idea about creating master pages. I will pratice and in one years time, I will become very comfortable.. Thanks again

  11. I am trying to change the custom master page under the guidance of above screens procedure i am getting error after deploying the first time of sample code u written above "HELLO WORLD!!" for me getting error as below screen

    1. i got it answer mr DO QUOC HUNG . thanking u....
      what i did a mistake is export v4.master from spdesigner to local disk . code in v4.master of local disk is not excuted in visual studio. so i rectified it by copying code in v4.master from spdesiger to visual studio then it will build properly...............
      any thanks for u r information ........... i gain more knowledge from u r blogspot...............

  12. Server Error in '/' Application.

    Compilation Error
    Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

    Compiler Error Message: CS0030: Cannot convert type 'Microsoft.SharePoint.WebControls.ScriptLink' to 'System.Web.UI.IAttributeAccessor'

    Source Error:

    Line 24: var _fV4UI = true;
    Line 25: script
    Line 26: SharePoint:ScriptLink language="javascript" name="core.js" OnDemand="true" runat="server" __designer:Preview="<script type="text/javascript">
    Line 27: // <![CDATA[
    Line 28: document.write('<script type="text/javascript" src="/_layouts/1033/init.js?rev=lEi61hsCxcBAfvfQNZA%2FsQ%3D%3D"></' + 'script>');

    Source File: /_catalogs/masterpage/Reddymaster.master Line: 26

  13. Fantastic - very much appreciate all the hard work. I am still using SP 2010 and this is the MOST COMPREHENSIVE steps that I have ever seen !!!!
    Thank you.