Use the following procedures to start customizing the master page.
To begin customizing the master page
-
On the Start menu, point to All Programs, point to Microsoft Office, and then click Microsoft Office SharePoint Designer 2007.
-
On the File menu, click Open Site.
-
In the site name field, type the address to the Woodgrove site. In our example, this URL should be http://localhost:32490.
-
In the Web Site Folders pane, expand the _catalogs folder.
-
Double-click the WoodGrove.master master page that we created earlier.
-
When you are prompted to check out the file from source control, click Yes.
-
Click the design mode tab.
An outline of the master page is displayed to give a general idea of how pages using this master page look.
We can identify several areas in this master page. There is a header or logo area, a top navigation area, a left navigation area, and a breadcrumb. And the page already contains controls to provide page editing and even search capabilities. Now all we need to do is to make the elements in these areas look like the elements in Woodgrove.
As we mentioned previously, Office SharePoint Server makes extensive use of CSS files. The BlueBand.master page referred to the Band.css file. Now switch the editor to the code view, use the Search function on the Edit menu to find this reference to Band.css, and change it to WoodGrove.css.
To modify the styles
-
Open the Woodgrove.css file.
-
In the Folder Page, expand the Styles.
-
In the folder list, expand the Style Library node.
-
Expand the en-us (Style Library) folder.
-
Expand the Core Styles (Style Library) folder.
-
Double-click the Woodgrove.css file. You are prompted to check out the file from source control. Click Yes. SharePoint Designer opens an editor window with the contents of this file. If you look at the original styles file for Woodgrove (you can find this file at ….WoodgroveNet\Style), you see that the style for the body established the following font properties : font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
Add this property for the body class.
-
On the Edit menu, click Search, and then click Find All. A list of all occurrences is displayed below your code window. Review all items in the list, and remove all font-family attributes from all these styles.
-
Close the Find window when you are finished.
To modify the logo area
-
In the Woodgrove.master file, switch to Split mode. This mode divides the screen into sections. The lower section is a preview of how the page will look and the upper section shows the actual page code.
-
Click the Logo. In Split mode, the design view and the code view are synchronized. If you click the page logo, SharePoint Designer changes the position of the code view to the declaration of the page elements that made up the logo.
Figure 24. Code for the company logo in the master page
In this template, a SharePoint:AspMenu is used. We need to add the logo and set the background for this area to black. To do so, we use the <img> HTML tag to refer to the WoodGroveBlackLogo.gif image that we had previously saved in the images folder. This logo resides within a <td>. We can set the background to black just by using a background-color property.
Figure 25. Code inserted to add the Woodgrove logo
-
On the File Menu, click Save. The Design view is updated to show the new logo.
This page already provides top navigation functionality. But it does not look like the Woodgrove page and it provides dynamic menus. We can handle these two issues now.
To modify the top navigation
-
Keeping the master page in the Split view, click the TopNavigation element. In the code view the editor is updated and is positioned over a SharePoint:Menu element.
Figure 26. Split view of the Global navigation items
As you can see Office SharePoint Server provides its own PortalSiteMapDataSource controls. And this SiteMapDataSource will pull the information from the SharePoint publishing sites.
This menu is already set to provide the desired navigation functionality.
-
To get rid of the dynamic menus, change the MaximumDisplayLevels property to 0.
-
Remove the DynamicMenuStyle, DynamicMenuItemStyle, and DynamicHoverStyle tags because there is no need for them now.
You can also use the SharePoint Designer interface to modify these values. To activate the properties editor, right-click the label, and on the shortcut menu select label properties. A properties editor pane is displayed.
-
To make the menu look more like Woodgrove, notice that the menu is enclosed inside a <tr> tag and a style called topNavContainer is used. In the Manage Styles pane, look for this style under the WoodGrove.css file. Double-click it.
-
An editor window for the Woodgrove.css file opens, positioned on the style declaration. Add a background-color:green; attribute.
-
Go to the File menu, and then click Save.
-
Go back to the Woodgrove.master page. The Preview updates.
Figure 27. Master page after updating styles
Left Navigation
Left navigation is also provided by this master page. However, the Woodgrove left navigation had a white background color and no border.
To modify left navigation
-
Keep the file in the Split view.
-
Click the left Navigation control. It shows a SharePoint:AspMenu tag. Examine this tag definition. You will see that it uses a CssClass property with the leftNav1 value.
-
Use the Manage Styles pane to look for this style under the Woodgrove.css file. Double-click it. It takes you to the style definition. Do the following:
You can also click the style name while pressing the CTRL key. This takes you to the style definition.
Breadcrumb
The Breadcrumb control is provided by default; there is no need to develop any code to provide this functionality.
Footer
The Woodgrove footer just added a copyright notice at the end of the page using a User Control. To do the same in Office SharePoint Server, go to the end of the Design View Pane and type “2002 Woodgrove Bank. All rights reserved".
Authoring Console
The built-in authoring console in Office SharePoint Server is a floating menu, less intrusive than the MCMS version, and it provides options for editing your page, versioning, and submitting your work to an approval workflow.
The BlueBand.master that we used as a base already provides these controls. While still in Split view, click at the top of the master page in the Design view. The Code view is then updated showing the use of the wssuc:DesignModeConsole and other authoring tags. We will leave it as is because it already provides the desired functionality. For more information, see Customizing and Branding Web Content Management-Enabled SharePoint Sites (Part 2 of 3): Extending WCM.
The content migration tool generates default page layouts for each of your templates, but you must check those page layouts to verify that they provide a look and feel similar to what they had in MCMS. We will compare all the templates with the generated page layouts and edit them with SharePoint Designer to ensure that they are equivalent.
Woodgrove is an ASP 1.x site, and it used some Web controls to provide a similar look and feel for all pages in the site. Most of these elements are already in the master page, so the migration is just a matter of arranging the field controls in the same way as they are arranged in the MCMS templates.
To locate your migrated templates
-
Open Office SharePoint Designer 2007.
-
On the File menu, select Open Site.
-
In the Open Site dialog box, type the URL for the Woodgrove site in Office SharePoint Server, and then click Open.
-
In the Web Site pane on the left, double-click _catalogs.
-
Double-click masterpage.
-
Double-click WoodgroveNet.
Figure 33. Galleries for the site page layouts
-
The Office SharePoint Server migration tool creates an equivalent folder structure to the template galleries in MCMS. Browse the folder and edit the page layouts.
Note: |
|---|
|
In Office SharePoint Server, page layouts are versioned. Before editing a page layout you must right-click the item in the Web site pane, and then select Check Out. When you finished, right-click the item and then click Check In; when prompted, publish it as a major version.
|
JobPosting.aspx
Figure 34. MCMS Woodgrove Job Posting.aspx
The migrated form shows the field controls.
<PublishingWebControls:RichHtmlField id="_migidTitle1" FieldName="Title1" runat="server"/><br>
<PublishingWebControls:RichHtmlField id="_migidApplicationInstructions" FieldName="ApplicationInstructions" runat="server"/><br>
<PublishingWebControls:RichHtmlField id="_migidJobDescription" FieldName="JobDescription" runat="server"/><br>
<PublishingWebControls:RichHtmlField id="_migidQualifications" FieldName="Qualifications" runat="server"/><br>
The field controls should be inside a table to maintain a similar look and feel with the Woodgrove template, and they must keep the following order: Title1, Job Description, Qualifications, Application Instructions.
<tr><td><h2>Job Title</h2><PublishingWebControls:RichHtmlField id="_migidTitle1" FieldName="Title1" runat="server"/></td></tr>
<tr><td><h2>Job Description</h2><PublishingWebControls:RichHtmlField
id="_migidJobDescription" FieldName="JobDescription"
runat="server"/></td></tr>
<tr><td><h2>Qualifications</h2><PublishingWebControls:RichHtmlField
id="_migidQualifications" FieldName="Qualifications"
runat="server"/></td></tr>
<tr><td><h2>Application Instructions</h2><PublishingWebControls:RichHtmlField
id="_migidApplicationInstructions" FieldName="ApplicationInstructions" runat="server"/></td></tr>
Figure 35. Job Posting ASPX page layout updated for Office SharePoint Server
Case Studies.aspx
Figure 36. MCMS Case Studies.aspx
The migrated page layout shows the target fields.
<PublishingWebControls:RichHtmlField id="_migidTitle1" FieldName="Title1" runat="server"/><br>
<PublishingWebControls:RichImageField id="_migidCaseImage" FieldName="CaseImage" runat="server"/><br>
<PublishingWebControls:RichHtmlField id="_migidCustomerSolution" FieldName="CustomerSolution" runat="server"/><br>
<SharePoint:NoteField id="_migidXmlContent" FieldName="XmlContent" runat="server"/><br>
<PublishingWebControls:RichHtmlField id="_migidCustomerDescription" FieldName="CustomerDescription" runat="server"/><br>
The field controls should be inside a table to maintain a similar look and feel with the Woodgrove template, and they must keep the following order: Title1, CaseImage CustomerDescription, CustomerSolution, XmlContent.
<tr><td colspan="3"><PublishingWebControls:RichHtmlField id="_migidTitle1" FieldName="Title1" runat="server"/></td></tr>
<tr><td><PublishingWebControls:RichImageField id="_migidCaseImage" FieldName="CaseImage" runat="server"/></td>
<td><h2>Customer Description</h2>
<PublishingWebControls:RichHtmlField id="_migidCustomerDescription" FieldName="CustomerDescription" runat="server"/>
</td></tr>
<tr><td colspan="2"><h2>Customer Solution</h2>
<PublishingWebControls:RichHtmlField id="_migidCustomerSolution" FieldName="CustomerSolution" runat="server"/>
</td></tr>
<tr><td colspan="2"><h2>Details of Solution</h2>
<SharePoint:NoteField id="_migidXmlContent" FieldName="XmlContent" runat="server"/>
</td></tr>
This template used a custom control for XmlContent. You can use the XML Web Part to replace XmlContent. On the Insert menu, click SharePoint controls, and then click WebPart.
Figure 37. Inserting a Web Part
A Web Parts pane is populated. Select XML Web Part and drag it to the position of the XmlContent field.
Figure 38. Web Parts pane
Figure 39. Case Studies ASPX page layout updated for Office SharePoint Server
Home.aspx
The default page layout has the field in the right order, as shown in the following figure.
Figure 40. Home ASPX page layout updated in Office SharePoint Server
This page uses the Latest Press control. This control is replaced by a Content By Query Web Part. For information about changing this control in Office SharePoint Server, see Summary Controls later in this article.
Legal Disclaimer.aspx and DefaultChannelPage.aspx
These pages have only one placeholder, so no changes need to be made.
Services.aspx
All you have to do with this page layout is open the page layout in the code view, then edit the page layout code to the following.
<tr><td><PublishingWebControls:RichLinkField id="_migidOCAttachment" FieldName="OCAttachment" runat="server"/></tr>
<tr><td>More Information:<PublishingWebControls:RichHtmlField id="_migidOCHTMLEdit" FieldName="OCHTMLEdit" runat="server"/></td></tr>
<tr><td><PublishingWebControls:RichHtmlField id="_migidPartnersPH" FieldName="PartnersPH" runat="server"/></td></tr>
Figure 41. Services ASPX page layout updated in Office SharePoint Server
This template is used for authoring from Microsoft Office Word. For more information about using Content Converters for providing this functionality, see Publishing Directly from Office Applications.
PressRelease.aspx
To make the page layout look as the original template switch to code view and arrange the fields in the page layout so they have the following order:
Summary Controls
LatestPress.ascx
This control highlights a group of press postings on the default page of the Press Channel of a site. It builds a table containing HtmlAnchor elements for the postings.
Figure 42. MCMS LatestPress.ascx
However, Office SharePoint Server provides a very useful Web Part, called the Summary Link Web Part. This Web Part is not inserted in a Web Part zone because the original MCMS page layouts did not allow users to move things at run time.
To insert this Web Part
-
Open your page layout or master page.
-
In SharePoint Designer, on the Insert menu, click SharePoint Controls.
-
Click WebParts. The WebParts pane is populated, and you can now browse through the WebParts list.
Figure 43. Choosing the Summary Link Web Part in the Web Part pane
-
Drag the Summary Link Web Part onto your page layout.
In the Summary Link Web Part, you can specify from which site you want to take the content and which content type these pages should have. You can also specify how they are sorted and grouped, and even limit how many elements to display.
Figure 44. Options pane for Summary Link Web Part
For Woodgrove, we use only pages with the Press Release ASPX content type and sort order them by Modified, and limit the number of items to display to 3. To make this look more like Woodgrove, we disable all advanced settings, such as minimize and others.
McmsSummary
This control is used as the default page in a Channel to display a summary of the contents of the Channel
Figure 45. McmsSummary server control
The McmsSummary server control is used in the Summary Page template file. We just add a Web Part reference in the page layout for the Summary Page, and reuse the Content By Query Web Part. This Web Part lists pages with the Case Studies ASPX content type.