Customizing the Look and Feel of a WCM Site

While the tools of Web Content Management in SharePoint 2007 are quite powerful, you’ll probably want to customize the look and feel of your site so that it is more in tune with your organization’s unique identity. Fortunately, SharePoint 2007 gives you some great options:

• Master pages:   Master pages control the UI or “chrome” elements of a website which are usually shared across all pages - items such as a company logo, navigation menu, or footer. Making a change to the master page subsequently changes all pages that inherit it. This option is commonly used when you want to customize the entire layout of your site.

• Page layout:   This standardizes what and where content displays on a page. A page layout is to the content as the master page is to the UI. You often use page layout to create specific types of content for your site, such as a Newsletter.

• Document conversion:   This basically involves taking a document, such as a Word file or an InfoPath form, and converting it to a web page for display in the browser. You often use this to create browser-based forms from InfoPath.

The real magic of WCM is that content is separate from the pieces you use to change the look of the page. Therefore, you can swap out content, and not change the page appearance or change a site’s look and feel without too many extra steps. This section explores each of these options in greater detail so that you know exactly what you’re changing and how best to place content to make your business run efficiently.

Master Pages

SharePoint 2007 makes good use of the ASP.NET 2.0 master pages functionality, allowing users to customize the look feel of the portions of a website, such as the navigation menus, headers, and footers that are shared across all pages within a site. The master pages allow you to customize a single file and have your changes automatically applied to other pages, called content pages, which inherit that master page. The master page and content page are merged to form a single rendered page, which is then presented to the user. This process happens in the background and is seamless to the user.

You can change the master page applied to your WCM websites from the browser quite easily using SharePoint’s Master Page Gallery. Although this gallery has several options available, your organization may need something more specific to ensure that your website adheres to a strict corporate brand. In these situations, you can create a custom master page and then upload it to the gallery where it can be applied to content pages. The next two Try It Outs show you how to apply and customize a master page.

Tip 

Because creating a custom master page requires basic knowledge of both SharePoint Designer 2007 and ASP.NET 2.0, it’s recommended that only trained professionals attempt this type of customization work.

Try It Out-Apply a New Master Page

In this example, you apply a master page. Basically, you select the master page from the Master Page Gallery, and SharePoint changes the content pages to inherit from this new page and the updated page displays, complete with the look and feel from your selected master page. It is important to note that the form and view pages can inherit a different master page, which you see in this example. For this example, you’ll use the Ski Company English site created in the previous section.

1. From your Ski Company English site, select Site Actions Site Settings Modify All Site Settings.

2. Select Go to Top-Level Site Settings.

3. From the Look and Feel section, select Master Page. The Site Master Page Settings window appears, as shown in Figure 13-17.

   
   Figure 13-17

4. From the Site Master Page section, select a master page from the drop-down menu. For this example, select BlackBand.master.

5. If you want all subsites to reset to use this master page, you can select the check box. For this exercise, you can leave it unchecked.

6. From the System Master Page section, select a master page from the drop-down menu (see Figure 13-18). In this example, select Black Band.master. The System master page changes the form and view pages in the site.

   
   Figure 13-18

7. Select the Reset Subsites option for this exercise.

8. For even further customization of the look and feel, you can specify an alternate CSS file to overwrite the default out-of-the-box styles, changing the basic colors, backgrounds, and fonts. For this exercise, you can leave the default Windows SharePoint Services default style sheet option selected.

9. Leave the Reset Subsites check box unselected for this example.

10. Click the OK button. Your site reflects the applied master page and has a slightly different look and feel.

Try It Out-Customize a Master Page

Master pages are an ASP.NET 2.0 technology that allows you to separate the presentation and common elements from the content. You can define the common elements, such as navigation menus, headers, and footers in the master page, and then create the content for your site using content pages, which inherit the elements defined in the master page.

Tip 

As previously noted, creating a custom master page requires basic knowledge of both SharePoint Designer 2007 and ASP.NET 2.0. It’s recommended that only trained professionals attempt this type of customization work.

In the following example, you add a message to the BlackBand.master that you applied in the last Try It Out. You add this simple message in the header to welcome the user to your ski company. This message then displays on all content pages to which the master is applied. You can also change or add things such as a company logo or slogan, header graphic, or styling buttons. Note that this exercise requires you to check the master page out and back in again. Also, by default the master page document has content approval workflow enabled.

Tip 

For more on checking a document in and out, see Chapter 3. For more on workflows, see Chapter 5.

1. Open SharePoint Designer and select File Open Site from the menu. The Open Site dialog box appears as shown in Figure 13-19.

   
   Figure 13-19

2. For the Site Name field, type the URL of the SharePoint site for which you want to customize a master page.

3. Navigate to the Master Page Gallery. You access this from SharePoint Designer by expanding the _catalogs/master page folder in the left window. See Figure 13-20.

   
   Figure 13-20

   Tip 

   In the previous Try It Out, you changed the Ski Company site to use the BlackBand.master page; therefore, this is the page you’ll want to edit.

4. Double-click the BlackBand.master page. By default, pages in this library are under source control, so a window appears for you to check out the page. Select Yes for check out and click OK.

5. Switch to Code view by clicking the Code tab at the bottom of the editing area and scrolling down until you see the Table, which has the class MasterContent applied to it.

6. You want the message to display at the very top, so add a table row and column to the top of the table. Copy and paste the following into the top of the table:

     <tr><td width="100%" colspan="2">Welcome to Ski Company</td></tr> 

7. Select File Save As to save the page. You receive a message telling you that you are about to customize a definition page. This is because all sites start their life cycle from the same master page, which is specified in the site definition. When the site is created, this master page is copied from the file server to the Master Page Gallery to allow you to further customize it at the site level.

8. Click Yes. Notice that an icon appears next to the file in the left menu. This is true of any customized pages.

9. Check the page back in by right-clicking the BlackBand.master page and then selecting Check In.

10. The changes to the master page must be approved by someone with appropriate permissions before going live to the general public. Select Publish a Major Version from Options and click OK. A second prompt displays informing you that this content must be approved. Select Yes to modify the approval. You are transferred to the Master Page Gallery where you can check in and approve newly published items.

11. Notice that the Approval Status Column for the BlackBand.master is in a reading Pending. This means it’s waiting to be approved. Hover your mouse over the BlackBand.master file exposing its contextual menu. Select Approve/reject from the list of options. See Figure 13-21.

    
    Figure 13-21

12. Ensure that Approved is selected and click OK. The status changes to show the page is approved.

13. Return to the home page.

How It Works

The message you added now displays across the top of the screen as you wanted. The true power of master pages is visible during site maintenance and updates. If you have dozens of content pages in your site and need to make a sweeping change to the navigation menu of these pages, edits to the master page would ripple down through, updating all pages that inherit it.

Page Layouts and Content Types

Page layouts control the type of content that can be created on a page as well as where and how that content displays. Page layouts are built on content types, which were discussed in Chapter 2. A content type has one or more metadata columns associated with it, and these metadata columns ultimately control the type of content associated with that particular content type, things such as rich HTML fields or images. You can also place Web Part zones on the page to allow for Web Part placement.

You define page layouts either through SharePoint Designer or via the browser. By default, when you use the browser method, which is described in the first Try It Out in this section, the controls are all added to the page top down, stacked one after another with little control over how the various controls on the page are presented or positioned.

When you require full control over the layout of the page, you can use SharePoint Designer to create the page layout. If you are comfortable editing a page in SharePoint Designer, you can get started by follow-ing the steps in the second Try It Out in this section.

Tip 

Because SharePoint Designer 2007 is required, it’s recommended that only trained professionals attempt this type of customization.

In the final Try It Out, you learn how to create a custom page layout.

Try It Out-Create a Page Layout Based on a Content Type

In this example, you have a content type for Marketing Newsletters, which includes columns such as a Title, Date, or Body Text. You create a Marketing Newsletter page layout based on this content type.

1. Select Site Actions Site Settings Modify All Site Settings.

2. From the Galleries section, select Master Pages and Page Layouts.

3. Select New Page Layout, as shown in Figure 13-22.

   
   Figure 13-22

4. You must first associate your page layout with a content type. The columns defined in your content type become the content allowed on the page. In the Associated Content Type group, select Page Layout Content Types. Any custom content type groups you may have created become accessible in the menu.

5. Select Content Type Name Welcome Page.

6. In the Page Layout Title and Description section, type Marketing in the URL Name field.

7. In the Title field, type Marketing Welcome Page.

8. In the Description field, type Marketing Division Welcome Page.

9. Select EN and FR, and click the Add button for the Variations Labels field.

10. Click the OK button.

How It Works

Once you have created a page layout, it becomes visible in the list of Layouts on the Create Page window. You can view this list by clicking Site Actions Create Page. The Create Page is shown in Figure 13-23.

Figure 13-23

Try It Out-Create a Page Layout Using SharePoint Designer 2007

Page layouts set the stage for the type of content you want to allow on a particular page. For example, you might allow someone to place an image and description on a page. These pieces of content are actually columns in the content type on which you built your page layout. These columns are accessible in SharePoint Designer 2007 as content controls in the SharePoint Controls section of the Toolbox.

If the Toolbox is not visible on the right, you can turn it on by selecting Task Panes Toolbox in the SharePoint Designer toolbar. Using SharePoint Designer, you can place content controls on the page by dragging them from the Toolbox on to the page where you want to display them. It is important to note that the content controls should be placed inside the placeholder labeled “PlaceHolderMain.”

1. In SharePoint Designer, select File New SharePoint Content tab as shown in Figure 13-24.

   
   Figure 13-24

2. From the list of available options, select SharePoint Publishing to expose the Page Layout options.

3. For organization reasons, content types are stored in intuitive groups. From the Content Type group, select Page Layout Content Types.

4. From the Content Type Name, select Welcome Page.

5. In the URL Name field, type skiwelcome.

6. In the Title field, type Ski Company Welcome Page.

7. Click the OK button.

8. Your page layout should open for editing. If not, refresh (F5) and open the Welcome.aspx page. What you have just done is create a blank page layout ready for customization.

9. Enter code view by selecting code at the bottom of the editing window, locate the PlaceHolderMain tag. This is the main content area of the page where you want to make any layout changes as well as accept particular types of content.

10. Add the following table code between the PlaceHolderMain tags. This is the area where you allow content to be created.

      <table width="100%"> <tr> <td valign="top"></td> </tr> <tr> <td valign="top"></td> </tr> </table> 

11. When you create a content type, you attach metadata columns to the content type. These columns are the content you place in your page layout that ultimately becomes the content that the users will add to the page. These columns are visible in the Toolbox under SharePoint Controls, Content Fields.

12. Switch to Design mode by selecting the Design tab at the bottom of the editing window. Select the first row in the table you created. From the Toolbox, locate Page Fields, right-click the Contact Name field, and select Insert to add it to the selected cell of the table.

13. Select the second row in the table you created. From the Toolbox, locate Content Fields, right-click the Page Content field, and select Insert to add it to the selected cell of the table, as shown in Figure 13-25.

    
    Figure 13-25

14. Save the page.

15. Pages in the Master Page library are under source control, and you need to check them out for editing, and check them in and publish them when they are final. Right-click skiwelcome.aspx and choose Check In.

16. Select Publish a Major Version and click OK. Select Yes for Content Approval When Prompted.

17. Hover your mouse over the Welcome.aspx file that is currently pending, and select Approve from the Content menu.

18. Select Approved, and then click the OK button.

How It Works

You can now put your page layouts to work by selecting Site Actions Create Page. To create a new page, you must specify a page layout. By selecting the Ski Company Welcome Page that you just created, you generate a page to which you can add a title and page content, just as you specified in the page layout. See Figure 13-26.

Figure 13-26

Tip 

Notice that because the page layout also inherits from BlackBand.master, you see the welcome message at the top of the page, which you added in the “Customize a Master Page” Try It Out earlier in the chapter.

Try It Out-Create a Custom Page

In this example, you select a page layout from which you create a custom page. Based on the page layout and master page that it inherits, a page is presented to the user.

1. Select Site Actions Create Page as shown in Figure 13-27. The Create Page window appears as shown in Figure 13-28.

   
   Figure 13-27

   
   Figure 13-28

2. In the Page Title and Description section, type a title for your page. For this example, type WelcomeSkiCompany.

3. Type a description for your page. For this example, type Ski Company Welcome Page. SharePoint fills in the URL Name field automatically. In this case, it fills in welcomeskicompany. You can change this if you want, but for this example leave it as is.

5. In the Page Layout section, locate and select (Welcome Page) Ski Company Welcome Page, which you created in the previous section.

6. Click Create. SharePoint creates a custom page based on the Ski Company Welcome Page Layout.

Understanding Document Conversion

Many organizations store a great deal of information in popular file formats, such as Word or InfoPath. Because the information already exists in a format with which users are familiar, it does not always make sense to repeat the authoring process when this content needs to go on a website. Instead, it’s faster to create web content directly from these files. Further, if you present this content within the corporate website, you would want to maintain the corporate look and feel. SharePoint 2007 supports a document conversion feature that allows users to create web pages of content directly from specific file types. SharePoint supports document conversion for the following formats:

• An InfoPath form to a web page

• A Word document to a web page

• A Word document with macros to a web page

• An XML document to a web page

In addition, developers can write their own converters and install them. This becomes relevant only if you have a large amount of data in files on your SharePoint server that you want to make available as web content while avoiding the publishing or duplication processes.

Before you can convert a document, which you do directly from the document libraries, you must first configure and then enable the feature via the Central Administration site, which is the subject of the first and second Try It Outs in this section. In the third Try It Out, you learn how to convert a document into a web page.

Try It Out-Configure Document Conversion

In this example, you learn how a server farm administrator enables document conversion. You start this process by visiting the Operations Management area of the Central Administration site to ensure that the Load Balancer and Launcher services for document conversions are enabled on the server. You then visit the Document Conversion Configuration page and select the settings required to enable the service. These settings control which server acts as the load balancer server and the interval by which the document conversion timer job runs. In this example, four document converters have been installed on the system, and you can configure each of these to define maximum file size, time-out length, and maximum retries.

1. From the Central Administration site of your SharePoint environment, select the Operations tab.

2. Select Services on Server link from the Topology and Services group.

3. If the Document Conversion Services does not have a status of Started, click the Start link for the Document Conversions Load Balancer Service.

4. Click the Start link for the Document Conversions Launcher Service.

5. Select the server you want to use for the launch server as well as the load balancer server, and click the OK button. The Configure Document Conversions window appears, as shown in Figure 13-29.

   
   Figure 13-29

Tip 

If your server is running in a stand-alone configuration, these services may already be running, in which case no action is needed.

6. Select the Application Management tab.

7. From the External Service Connections section, select Document Conversions.

8. Select the appropriate web application from the list. In many cases, the web application you will be working with will be hosted on port 80. Confirm with your server administrator if you are unsure.

9. Select Yes for Enable Document Conversions for This Site.

10. Select the server that will act as the load balancer server. If your server farm is a stand-alone server, the server name may be already populated in the drop-down box.

11. Specify an appropriate interval for the document conversion process to run. Depending on your requirements, your selection here may vary. For an environment that anticipates many documents being converted on a regular basis, the interval may be more frequent. For an environment with few documents and a requirement to ensure optimal performance, the timer job may run less frequently and perhaps be scheduled on a daily basis for when the server does not anticipate a great deal of load.

12. Select the hyperlink for the From Word Document to Web Page.

13. Check the timeout length to 240 seconds.

14. Click the OK button.

15. Click the Apply button.

16. Click the OK button.

How It Works

Once you configure the service on the server, you can enable it on specific content types so that it’s available to users in document libraries as an action on the Send to Menu of a document, as shown in Figure 13-30.

Figure 13-30

Try It Out-Enable Document Conversion on a Content Type

In this example, you configure document conversion on a content type so that users can convert a Word document for your ski company to a web page. The users have a Word document template that they’ve been using for years to fill out on the company’s various products, and it keeps information current. These users have exceptional skills with Word, but very little web publishing or coding skills. By converting the Word document to web content, you allow them keep their familiar tool while converting content to the company’s unique look and feel for the web.

1. From your Ski Company site select Site Actions Site Settings Modify All Site Settings.

2. If you are not at the top level of your site collection, select Top-Level Site Settings.

3. From the Galleries group, select the Site Content Types.

4. Click the Create button from the toolbar. The New Site Content Type window appears as shown in Figure 13-31.

   
   Figure 13-31

5. Type a name for the content type. For this example, enter Product Details.

6. Select Document as the parent content type.

7. Enter a group name for the content type. This group name helps organize your content types. For this example, enter Product Information.

8. Click the OK button. You are returned to the Site Content Type administration page.

9. Click the Advanced Settings link.

10. Select upload a new document template, and click Browse to locate the file “ski product infor-mation.docx” from the resources outlined for this chapter.

11. Click the OK button. You are returned to the Site Content Type administration page.

12. Select Manage Document Conversion for This Content Type. The Manage Document Conversion for Product Details window appears as shown in Figure 13-32.

    
    Figure 13-32

13. Unselect all check boxes except the one for the conversion of a Word Document to a WebPage.

14. Click the Apply button.

15. Click the Configure link to the right of the Word Document to a Web Page item.

16. Select Define Unique Settings for This Content Type.

17. Select the Article page with image on right page layout from the page layout drop-down menu.

18. For field for Converted Document Contents, select Page Content.

19. For the Location section, select the check box to set a default site for creating pages. Because the content you are creating is related to the products site, you need to create all pages there. Click the Browse button to open the Choose Site – Webpage Dialog, as shown in Figure 13-33, and then click the Products site and click the OK button.

    
    Figure 13-33

20. Keep the default setting for processing, which is Create Pages One at a Time, and Take Users to the Page Once It Is Created.

21. Click the OK button.

22. Select Site Actions View All Site Content.

23. Select the Site Collection Documents library.

24. Select Settings Document Library Settings from the toolbar.

25. Select Advanced Settings.

26. Select Yes to allow management of content types.

27. Click the OK button.

28. Select the Add from Existing Site Content Types.

29. Select Product Information from the Groups drop-down menu.

30. Click the Add button to add your content type to the library.

31. Click the OK button.

How It Works

In Step 19, you specified that the newly created web pages should be published to the Products Site Pages library regardless of where the documents themselves exist. This means users can create their content in a collaborative area or other area where they have access, and have the pages automatically go to the appropriate site. Because you define the document conversion process at the content-type level, it’s convenient for a site administrator to determine the publishing location based on the type of content that is being created; the users creating the content don’t have to be concerned with this.

Try It Out-Convert a Document to a Web Page

This example shows you how to convert a document to a web page. This involves creating a document from a document library based on a content type, following the same procedure covered in Chapter 6. Once the content is created, you then convert it to a web page that you can publish to a site.

1. From the main page of your Ski Company site, select Site Actions View All Site Content.

2. Select the Site Collections Documents library.

3. Select New Product Details Document from the toolbar.

4. Fill in the details for your new product as follows:

   Open table as spreadsheet

   Document Section	Details
   Product Name APJ	Bamboo Skis.
   Product Description	These revolutionary new skis are the latest innovation in cross-country and downhill skiing. Using these skis, you will be able to cover miles of trail without feeling like you left the comfort of your living room.
   Price	$1999 USD.

5. Save the file as APJ Bamboo Skis.docx and close the document.

6. Close the document, and check it in as a major version of the document using the process reviewed in Chapter 3.

7. Return to the document library. Hover your mouse over the document to expose the menu.

8. Select Send To Convert Document From Word Document to Web Page. The Document Conversion window appears as shown in Figure 13-34.

   
   Figure 13-34

9. Enter a title for the web page. For this example, enter APJ Bamboo Skis.

10. Select the Create This Page for Me Now, and Take Me to the Page When It Is Created option.

11. Click the Create button.

How It Works

Figure 13-35 shows how the Word document looks when converted to a web page. Notice how the page automatically appears in the navigation control of the site, and how the URL illustrates how the page is stored in the Pages library of the Products site, even though the original document is located at the top level of the site collection in the Site Collection Documents library.

Figure 13-35