Skip to main content

Creatin a Custom master page using a Feature

Creating a custom MasterPage is a very common requirement especially for those who want to migrate from ASP.NET 2.0 to SharePoint, without altering the look and feel they already had previously.
I have searched a lot about how to accomplish this, and found many articles and blog posts but they are all incomplete, they are missing the complete guide. I will try to be as direct as possible, and include screen shots that I hope they would help.
Anyway, lets start and get our hands dirty...


  1. Navigate to the following folder: C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\FEATURES\
    Copy the PageLayouts folder and paste it in the same directory but Change the folder name to another one. To easily follow up with me through this post, lets call it CustomMasterPages.



    Add the masterpage you want in the masterpage folder, the CSS file into the styles folder, and all images you need into the images folder.
  2. Open the CustomMasterPages folder. Now we have to Edit the Feature.xml that has the main Registry info about the new feature you want to create (in our case, the custom MasterPage). So open the feature.xml file using your favorite text editor.
    Delete what the file has, and paste the following:
    <!-- _lcid="1033" _version="12.0.4518" _dal="1" -->
    <!-- _LocalBinding -->
    <Feature  Id="77596cae-c12d-4451-9d65-53b66b2fd5aa"
              Title="CS Masterpage"
              Description="My own Custom MasterPage"
              Version="12.0.0.0"
              Scope="Site"
              Hidden="False"
              DefaultResourceFile="core"
              xmlns="http://schemas.microsoft.com/sharepoint/">
        <ElementManifests>
            <ElementManifest Location="ProvisionedFiles.xml"/>
        </ElementManifests>
    </Feature>
    You have to change only the following fields, but I advice you to leave everything as it is for this Demo, just as a good kick off :)
    ID: A GUID to identify the feature. you can go to http://www.newguid.com/ to generate a new GUID (you will find it in the upper banner) and paste it right there.
    Title: the Feature name (Custom MasterPage name).
    Description: Feature's description.
    The Element Manifest is considered as the backbone of the feature; you have to specify its location, which is by default named as ProvisionedFiles.xml located at the same level with the feature.xml. Save the file and close it.
  3. Now open the ProvisionedFiles.xml file and let's see what we have got there.
    You simply link EVERYTHING you have in the CustomMasterPages folder, and create an entry for it in the ProvisionedFiles.xml
    <!-- _lcid="1033" _version="12.0.4407" _dal="1" -->
    <!-- _LocalBinding -->
    <Elements xmlns="http://schemas.microsoft.com/sharepoint/"> <Module Name="OSGMasterPages" Url="_catalogs/masterpage" Path="MasterPages" RootWebOnly="TRUE">
    <!--the MasterPage file that you have to put in the CustomMasterPage/MasterPages folder -->
        <File Url="MasterPage.master" Type="GhostableInLibrary">
        <Property Name="ContentType" Value="My Sample Master Page" />
    <!-- a preview image for the MasterPage file. Put the image in the CustomMasterPage/en-us folder -->
    <Property Name="PublishingPreviewImage" Value="~SiteCollection/_catalogs/masterpage/$Resources:core,Culture;/Preview Images/BlackVertical.png, ~SiteCollection/_catalogs/masterpage/$Resources:core,Culture;/Preview Images/BlackVertical.png" />
    <!-- MasterPage Description -->
    <Property Name="MasterPageDescription" Value="This is my sample master page for use with collaboration or publishing sites." />
        </File>
    </Module> <!-- a preview image for the MasterPage file. Put the image in the CustomMasterPage/en-us folder -->
    <Module Name="PublishingLayoutsPreviewImages" Url="_catalogs/masterpage" IncludeFolders="??-??" Path="" RootWebOnly="TRUE">
        <File Url="BlackVertical.png" Name="Preview Images/BlackVertical.png" Type="GhostableInLibrary">
        </File>
    </Module>
    <!-- The place where we can add the registry info of the images used in the MasterPage-->
    <Module Name="Images" Url="Style Library/Images" Path="Images" RootWebOnly="TRUE">
    <!-- All images that you added previously in the CustomMasterPage\images folder, each will have its own entry as shown below, with the same syntax except the Url, and name. Please take care that they are case sensitive-->
    <File Url="1_Duane.jpg" Name="1_Duane.jpg" Type="GhostableInLibrary"/>
    </Module> <!-- Styles, the name of the css file located in the CustomMasterPage\styles folder-->
    <Module Name="OSGStyles" Url="Style Library" Path="Styles" RootWebOnly="TRUE">
            <File Url="CS MasterPage.css" Type="GhostableInLibrary" />
    </Module> </Elements>
    Now we are done with the 2 most important pages.
  4. One important thing you must take care of, is that the masterpage design is not the same as what you used to do in ASP.NET 2.0. Its not an HTML page with some ContentPlaceHolders with random IDs and placed anywhere like before. SharePoint's MasterPages are way different; there are a number of predefined ContentPlaceHolders with specific ids (you can't change them, or they wont be recognized, and the MOSS will hit you with a silly frustrating error page!). These ContentPlaceHolders are recognized by the MOSS according to their IDs. Have a look at the complete list below:



    yet, you dont have to place ALL of these ContentPlaceHolders into your new customized MasterPage. there are some of these which are essential, and others not. The following is a minimal MasterPage that you cant remove anything from it, or it wont work at all. You can always use it as a start for designing your masterpages.. i.e NEVER START THE MASTERPAGE DESIGN FROM SCRATCH! or you will end up banging your head against the wall!
    <%-- Identifies this page as a .master page written in Microsoft Visual C# and registers tag prefixes, namespaces, assemblies, and controls. --%>
    <%@ Master language="C#" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <%@ Import Namespace="Microsoft.SharePoint" %>
    <%@ Register Tagprefix="SPSWC" Namespace="Microsoft.SharePoint.Portal.WebControls" Assembly="Microsoft.SharePoint.Portal, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register Tagprefix="PublishingNavigation" Namespace="Microsoft.SharePoint.Publishing.Navigation" Assembly="Microsoft.SharePoint.Publishing, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register TagPrefix="wssuc" TagName="Welcome" src="~/_controltemplates/Welcome.ascx" %>
    <%@ Register TagPrefix="wssuc" TagName="DesignModeConsole" src="~/_controltemplates/DesignModeConsole.ascx" %>
    <%@ Register TagPrefix="PublishingVariations" TagName="VariationsLabelMenu" src="~/_controltemplates/VariationsLabelMenu.ascx" %>
    <%@ Register Tagprefix="PublishingConsole" TagName="Console" src="~/_controltemplates/PublishingConsole.ascx" %>
    <%@ Register TagPrefix="PublishingSiteAction" TagName="SiteActionMenu" src="~/_controltemplates/PublishingActionMenu.ascx" %>
    <%-- Uses the Microsoft Office namespace and schema. --%>
    <html>
      <WebPartPages:SPWebPartManager runat="server"/>
      <SharePoint:RobotsMetaTag runat="server"/>   <%-- The head section includes a content placeholder for the page title and links to CSS and ECMAScript (JScript, JavaScript) files that run on the server. --%>
      <head runat="server">
        <asp:ContentPlaceHolder runat="server" id="head">
          <title>
            <asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server" />
          </title>
        </asp:ContentPlaceHolder>
        <Sharepoint:CssLink runat="server"/>
        <asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server" />
      </head>
      <%-- When loading the body of the .master page, SharePoint Server 2007 also loads the SpBodyOnLoadWrapper class. This class handles .js calls for the master page. --%>
      <body onload="javascript:_spBodyOnLoadWrapper();">
        <%-- The SPWebPartManager manages all of the Web part controls, functionality, and events that occur on a Web page. --%>
        <form runat="server" onsubmit="return _spFormOnSubmitWrapper();">
          <wssuc:Welcome id="explitLogout" runat="server"/>
          <PublishingSiteAction:SiteActionMenu runat="server"/> 
          <PublishingWebControls:AuthoringContainer id="authoringcontrols" runat="server">
            <PublishingConsole:Console runat="server" />
          </PublishingWebControls:AuthoringContainer>
          <%-- The PlaceHolderMain content placeholder defines where to place the page content for all the content from the page layout. The page layout can overwrite any content placeholder from the master page. Example: The PlaceHolderLeftNavBar can overwrite the left navigation bar. --%>
          <asp:ContentPlaceHolder id="PlaceHolderMain" runat="server" />
            <asp:Panel visible="false" runat="server">
            <%-- These ContentPlaceHolders ensure all default SharePoint Server pages render with this master page. If the system master page is set to any default master page, the only content placeholders required are those that are overridden by your page layouts. --%>
                <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server"/>
                <asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server"/>
                <asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea"  runat="server"/>
                <asp:ContentPlaceHolder id="PlaceHolderLeftNavBar" runat="server"/>
                <asp:ContentPlaceHolder ID="PlaceHolderPageImage" runat="server"/>
                <asp:ContentPlaceHolder ID="PlaceHolderBodyLeftBorder" runat="server"/>
                <asp:ContentPlaceHolder ID="PlaceHolderNavSpacer" runat="server"/>
                <asp:ContentPlaceHolder ID="PlaceHolderTitleLeftBorder" runat="server"/>
                <asp:ContentPlaceHolder ID="PlaceHolderTitleAreaSeparator" runat="server"/>
                <asp:ContentPlaceHolder ID="PlaceHolderMiniConsole" runat="server"/>
                <asp:ContentPlaceHolder id="PlaceHolderCalendarNavigator" runat ="server" />
                <asp:ContentPlaceHolder id="PlaceHolderLeftActions" runat ="server"/>
                <asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat ="server"/>
                <asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" runat ="server"/>
                <asp:ContentPlaceHolder id="PlaceHolderTitleAreaClass" runat ="server"/>
                <asp:ContentPlaceHolder id="PlaceHolderBodyRightMargin" runat="server" />
            </asp:Panel>
        </form>
      </body>
    </html>
    So to start, you can get whatever HTML you have in the old MasterPage and paste it in here, just below the </asp:Panel>. Then arrange the ContentPlaceHolders wherever you want into your HTML code.
    Another point you must take care of; the images and background's source urls. of course, we added the images previously into the CustomMasterPages\images folder, so we will replace the old source urls you had in the html code into something like:
    background="/Style%20Library/images/bg1.jpg">
    and for sure, that would be the same case in the CSS file.
  5. Now we are ready to install the feature!
    open the command prompt (Start> Run), then type:
    cd C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\BIN
    Now type the following
    stsadm -o installfeature -filename CustomMasterPages\feature.xml
    We are installing the feature that we are providing its feature.xml file (the xml file's path from the C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\FEATURES folder).
  6. Activate the feature for your site.
    open the Internet Browser, and type in the webapplication's URL.. something like http://ahmed-ig:35193 and concatenate /_layouts/settings.aspx to the previous part.
    i.e: http://ahmed-ig:35193/_layouts/settings.aspx

    under the "Site Collection Administration" column, click on "Site collection features"



    locate the Feature you have just made. (you will find its name as you named it in the feature.xml file)



    Now Press on the Activate Button to activate the Feature.
  7. Apply the MasterPage into your site
    Now get back to the url you opened in Step #7
    and under the "Look and Feel" column, click on "Master page".
    Choose the Site Master Page as the customized MasterPage you have created.
    and leave the System Master Page as it is.
    Now you have to upload the CSS file you are using in your customized MasterPage file.


And Hopefully, that's it! Hope it works smoothly without any problems :)

Comments

Post a Comment

Popular posts from this blog

Sharepoint 2010 Subsites webpart

This posting was originally made by Arild Aarnes and it is in here . This is a simple webpart to show a list (with links) of subsites immediately below the current site. This webpart will work on both Sharepoint 2010 and Sharepoint Foundation. On Sharepoint 2010 you could have used the built in “Table of Contents” webpart to do similar things but this one can also display the list as a dropdown list to save space on the webpage and it can open links in a new window. All the settings can by edited in the webpart configuration panel. The settings are: Show bullet in list – this will display the small square gif in front of the site name Open link in new window – this will open the subsite in a new window Show Site Description – this will show the description you entered when you created the subsite Show icon – Shows a icon for the type of subsite, see picture. Show as dropdown list – Will display the subsites in a dropdown box to save space. The webpart can be downl
1 comment
Read more

Configuring the User Profile Service in SharePoint 2010

I will share with you my step by step guide in setting up the User Profile Service application, focusing on its configuration and administration and how we can enable the creation of user profiles via an Active Directory import . SharePoint 2010 introduces the notion of “Service Applications” which build’s upon the “Shared Services Provider (SSP)” which was introduced in SharePoint 2007.  Service Applications are individual services that can be configured independently and can be shared across other sites within your farm with some service applications that can also be configured across farms. The individual service applications provided with SharePoint 2010 are listed as follows; Access Services Business Data Connectivity Document Conversion Excel Services Managed Metadata Service PerformancePoint Search Service Secure Store State Service Visio Graphics Service User Profile Service This article will build upon our initial SharePoint 2010 install utilizing the least privi
Post a Comment
Read more

The Text Filter Web Part – Without Having To Filter Exact Text

This posting I took it from  Here   This applies to both SharePoint 2007 and 2010.  In MOSS Enterprise, and the 2010 version of Enterprise.  There is an out-of-box web part called the Text Filter Web Part .  Basically, when you put this web part on a page, and put a list or library web part on the same page, you then create a web part connection that sends the text typed in the box as a filter to one of the columns in the web part, like this: The name Molly Clark had to be typed in exactly.  So, if you typed “Molly”, this record would not come up.  People use the text filter web part when they just want to search a single column in a list or library.  Otherwise, you’d simply use the “Search” box at the top of the screen, choose “This List” or “This Site” and perform SharePoint searches that way. One more note before I get into today’s solution: If you’re making use of site columns in your lists, there’s a setting where you can specifically select which columns you do N
6 comments
Read more

Telephone format for a text box on infopath form

If you want to create a Telephone format on a infopath form : 1. Add a text field to the form (Even if it is the list or a blank form) 2. Select the text box and click on Manage Rules 4. Add a rule to your textbox control with the following conditions (make sure to select "and" operator):     a. field "does not match pattern" Phone number     b. the expression: string-length(translate(., "()- ", "")) = 10     c. the expression: string-length(translate(., "()- 0123456789", "")) = 0 5. Add action to the rule:     a. Set a field's value     b. Select your textbox field     c. Insert formula for the value (click the fx button): concat("(", substring(translate(., "()- ", ""), 1, 3), ") ", substring(translate(., "()- ", ""), 4, 3), "-", substring(translate(., "()- ", ""), 7, 4)) Link for the detailed explanation :  http:
5 comments
Read more

HOWTO: change the home button text on the top link bar in sharepoint 2010

Hi All, I got a requirement that the title of the site collection which shows the first button on the top link bar to be different from the title. for example: my sharepoint site title is " Srikanth SharePoint Blog" and I need to show"Home" on the top link bar. It shows Home when the publishing features are not enabled. But once the publishing features are enabled it shows the same as the title("srikanth sharepoint blog" in my case instead of "Home").In other blogs I saw the solution as "in SITE ACTIONS>SITE SETTINGS>LOOK AND FEEL> TOP LINK BAR" , but once the publishing features are enabled, you don't see the "TOP LINK BAR" under "LOOK AND FEEL"(ofcourse it is changed to "NAVIGATION" , when publishing features are enabled). In this case : 1. Hide the initial button by adding code in css.    .s4-tn li.static > a{ display: none !important; } .s4-tn li.static > ul a{ display: bloc
6 comments
Read more

SharePoint Branding and Design in 2010-2

Update: Really Small SharePoint Calendar I really was not that happy with the look of the first calendar so after some modifications and a bit of CSS magic I have come up with a really good looking small calendar. At least I think so… Basically I have replaced the text of an event item with a color coded box. The benefit that you get out of this is that you don’t have to try and read the even within the small calendar but if you hover over and click on the color block you get the list Item display. Orange is for single event items (8am-10am, etc) Green is for full day events or repeat events Another nice feature to this is that I have also simplified the visual indicator when there are more then two event items in one day. Instead of seeing the arrow and text all you see is the arrow. Once you click on the arrow it will show the other blocks of events (Right image). Here is the CSS Code: Download Here Simply place a content editor web part on the same page as the calendar
Post a Comment
Read more

SharePoint Branding and Design in 2010

Hide First Tab in SharePoint 2010 Navigation I created a blog post on this for SharePoint 2007 HERE : But SharePoint 2010 is a bit more complex. Since it uses UL’s and Li’s for it’s navigation it is a bit harder to hide just one element. You will notice that the Home tab actually is the first node and then has a child UL which represents the rest of the navigation Items. So the approach is to hide the first <li> <a> (display: none) and then simply just use (display:block ) to show the hidden <ul> <li> <a> tags. Here is the CSS you could use to hide just the first node (home) tab in a SharePoint 2010 application: .s4-tn li.static > a{ display: none !important; } .s4-tn li.static > ul a{ display: block !important; } Enjoy! Posted by Erik Swenson at 12:12 PM 2 comments Labels: Branding , CSS , SharePoint 2010 Wednesday, August 18, 2010 How To: Hide Left Side Navigation on Home Page I was recently asked: " How can I hide the sid
1 comment
Read more

Data View conditional formatting using SharePoint Designer

Data View conditional formatting using SharePoint Designer This article demonstrates how to use SharePoint Designer 2010conditional formatting to format items in a SharePoint (SPS 2010) list based on item metadata. The example uses a standard SharePoint task list and formats tasks based on the due date. The end result is a list view sorted by due date with item text or background coloured to represent the number of days until the due date. The Process In this example I have started with a standard task list and have created a few sample items for testing / demonstration. From the task list, create a new view, starting from the default “Active Items” view (filtered to only display incomplete tasks). The view created in the example is called “Active – Coloured” Open the view using SharePoint Designer. Right click on the List View Web Part and select “Convert to XSL Data View”. This will automatically convert settings for the current view into da
2 comments
Read more