in SharePoint, SharePoint 2007

SharePoint WCM – Breaking the Ice – Building the initial Master Page

In our earlier post we got introduced to our new client Jet30, had our initial discussions and we came out with the initial home page/website design.

Jet30 Website Template 

Before getting into the discussion of what would be our site columns, content types and page layouts, let us use this template, create a SharePoint master page and activate it on an existing publishing site and see whether it works. It is always better to go step-by-step than going down and creating everything at once (site definitions, page layouts etc.,). However, if you are quite familiar with this process, you might end up doing everything at once than going this way. But for now, let us build a Jet30 Master Page.

Create a Sample Publishing Site

Create a publishing site (with publishing site features enabled). The master page, style sheets will be deployed to this site for now.

[I created a site called http://jet-thirty]

SharePoint Development Tools Used

1) WSPBuilder

2) SPVisualDev

Building the Master Page

All master pages (and page layouts) reside in the Master Pages and Page Layouts list in the publishing site.

image

It is always the best practice to manage everything and anything using Features in SharePoint. The same applies for our master page too – We will create a SharePoint Feature to deploy the Master Page to the publishing site.

Using SPVisualDev, I created my SharePoint project and added a new feature called Jet30_MasterPages.

image 

The feature has two modules.

  1. Jet30MasterPage
  2. Jet30Css

image

As you can see, both the Master Page and Css files are going to the SharePoint Master Pages and page layouts list in the site.

Modifying the Jet30MasterPage.master

image

If you added the Master Page using SPVisualDev, it will generate the minimal master page with all the necessary placeholders.

image

Insert all the HTML code of the Jet30 website template into this master page after the line

<PublishingConsole:Console runat="server" />

One another change we need to do in the master page is to add reference to the Jet30 style sheet. This can be done in the head section.

<head id="Head1" runat="server">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <SharePoint:RobotsMetaTag ID="RobotsMetaTag1" runat="server"/>

    <title><asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server"/></title>

    <SharePoint:CssLink ID="CssLink1" runat="server" />

        

    <link rel="Stylesheet" type="text/css" href="/_catalogs/masterpage/jet30-style.css" media="screen" />

    

    <asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server"/>

</head>

Modifying the CSS

There is nothing much to modify in the Jet30 style sheet except for the image references. Images are now available in the /_layouts/images/jet30/ than the template’s images folder.

image

The original CSS file will have entries something like this:

#header{

    background:url(images/header.gif) 0 0 no-repeat;

    width:981px;

    height:274px;

    position:relative;

    margin:0 auto;

}

Which will change to:

#header{

    background:url(/_layouts/images/jet30/header.gif) 0 0 no-repeat;

    width:981px;

    height:274px;

    position:relative;

    margin:0 auto;

}

Images will now be properly referenced.

 

 

 

 

 

 

 

Deploy the Jet30_MasterPages Feature

You are now ready to deploy this feature to your publishing site [I deployed to my sample site http://jet-thirty]

image

As you can see in the above screen-shot, it is quite easy to manage features if you are using SPVisualDev.Once deployed, you can find the master page & CSS style sheet in the SharePoint Master Pages and page layouts list in the site.

image

Selecting the Jet30 Master Page

Now as the master page is installed & activated, we can select the master page in our site.

Go to Site Actions->Site Settings->Modify All Site Settings. Select Master Page from Look and feel section.

Select the Jet30MasterPage for Site Master Page and System Master Page

image

If you browse to your site, you should see the Jet30 template up and running!

image

You can now build the WSP package and deploy it to any other server/site.

image

So, are we done with Master Page?

NO – So far, we have managed to load the master page into an existing site. Since we applied the master page to the whole site and to all page layouts, it has been applied to every page. If you scroll down, you can still see the existing web parts.

image

This is because of the page layout being used which has web part zones in them.

What next?

Our next step is to create the Home Page layout than using the pages in the site.

For now, you can download the source code from here. If you don’t have SPVisualDev, build a WSP package and deploy it to test.

Remember that until we have our own site definition, we are not done yet and things will be little messy 🙂

Write a Comment

Comment

Time limit is exhausted. Please reload the CAPTCHA.