Customizing a Web Site

Why would you want to customize a SharePoint site? Your reasons probably include the following: for visual differentiation reasons, for branding reasons, or you might want to build an entire and custom Web application altogether. There are three options for customizing a SharePoint site: via the browser, by editing a site definition, or by using SharePoint Designer 2007.

The main customization features of SharePoint Designer 2007 are the following:

• The ability to create and edit master pages

• The ability to modify default style sheets

• Deep support for ASP.NET controls

• The ability to create and edit publishing page layouts on Office SharePoint Server

• A built-in safety net that allows you to always revert a customized page or style sheet

In this section, we will discuss the SharePoint Designer 2007 features for customizing a site. We will look at customizing CSS pages, how to use SharePoint Designer 2007 to create the basic formatting of a page, and the Revert To Template feature.

Cascading Style Sheets, WYSIWYG, and Tools

Because SharePoint Designer 2007 is able to render CSS, CSS pages are shown in what-you-see-is-what-you-get (WYSIWYG) mode within SharePoint Designer 2007. SharePoint Designer 2007 includes several features to make creating styles a lot easier:

• CSS design time preferences Determine how CSS code is generated

• CSS high fidelity rendering Reproduces the end result of a page as displayed in a browser

• CSS layout tools Lets you choose between various page layouts

• CSS property grid Provides an overview of all CSS properties within a page or a specific style

• CSS styles task pane Allows you to apply and manage styles.

• CSS reports Allows you to generate reports that contain information about the styles used within a page or a set of pages.

With the CSS design-time preferences, you can set preferences that determine exactly how the CSS code is generated throughout an application to have complete control over SharePoint Designer 2007 code generation. To do this, from the Tools menu, click Page Editor Options to open the Page Editor Options window. Click the CSS tab, and you will see the window shown in Figure 27-19.

Figure 27-19: The CSS tab in the Page Editor Options window

On the CSS tab, you can select which CSS technology you want to use for a couple of properties. You can choose between inline CSS or styles in a page.

The CSS high fidelity rendering functionality in SharePoint Designer 2007 is able to produce a faithful representation of the look of the final browser-rendered page by making use of a powerful CSS rendering engine.

Auto Style Mode

In this section, you will see how to use SharePoint Designer 2007 to create the basic formatting of a page with the help of automatically generated CSS. This is called the Auto Style Mode.

SharePoint Designer 2007 makes it very easy to style a newly created page. To illustrate this, we will create a new HTML page by clicking the File menu, selecting New, and then choosing Page. Doing this opens the File New dialog box. Here you can choose a blank HTML page and click OK. Double-click the page to open it. Add a title, subtitle, and section with text to it while the page is in Design View by typing in three lines containing some words. This causes the creation of three paragraphs on the page. You can select one of those paragraphs-for example, the title paragraph-and change the size by using the Common toolbar. The Common toolbar also allows you to change the color of the paragraph. In this example (shown in Figure 27-19), we have changed the size of the title, changed the size of the subtitle, and made the color of the text block red and the title blue. While you are changing the formatting of the text, new CSS styles are created on the fly. Therefore, while you are busy applying basic formatting to your page in design view, you are also busy creating new CSS styles. If you want, these CSS styles can be reused within other pages.

If you change the title again-say, for example, that you make it bold this time-a new style is created. If you create a style that already exists, the old style is reused. The design surface is very efficient in reusing styles that are already generated in the page. Figure 27-20 shows what the page looks like.

Figure 27-20: A new HTML page in SharePoint Designer 2007

When you go to the Code View of the HTML page, you will notice that the styles are included inline in the page as a style block. This appearance conforms with the design-time preferences that we set up in the Page Options dialog box. The following code block shows the code of the sample HTML page:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>   <meta http-equiv="Content-Language" content="en-us" />   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <title>Untitled 1</title>   <style type="text/css">     .style1     {       font-size: x-large;       color: #0000FF;     }     .style2     {       color: #FF0000;     }     .style3     {       font-size: large;     }     </style> </head> <body> <p ><strong>Title</strong></p> <p >Sub Title</p> <p >Paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph </p> </body> </html> 

The Apply Styles and Manage Styles task panes in SharePoint Designer 2007 show the styles that we have created. At this point, there are three styles present. (See Figure 27-21.)

Figure 27-21: The Apply Styles task pane

This way of working is called the Auto Style Mode because you are automatically generating styles as you work. For example, when you are changing the color of a text, a style is generated to reflect this change. You can access and edit the styles directly.

Within the CSS Properties task pane, you can edit the CSS properties of a selected style. You can select a style and click on the Color property to select a new color for your style. Once you have selected a new color, the style changes immediately, which is also reflected in Design View.

The CSS Properties task pane is also useful when you create a new style. You can create a new style by using the Manage Styles tab in the Apply Styles task pane. Click the New Style link to open the New Style window. In the example shown in Figure 27-22, we have created an implicit CSS style for the HTML body element and have set its font-family to Broadway style.

Figure 27-22: The New Style window

Because we have changed the font-family for the HTML body element, all items in the HTML page that inherit from the <body> element will have their font family changed accordingly. The CSS Properties task pane shows both the style and the body attributes of the selected paragraph. With this task pane, you can see exactly which attributes are set for each class.

A very cool feature of the CSS Properties task pane is the Summary button, which lets you roll up an overview of the properties that are changed. If you modify the body style and change the color, those changes are displayed in the CSS Properties task pane. First, you can see that two instances of the body style color property show up in the CSS Properties task pane. Then you should notice that one of those body styles is striked-out, signifying that this is the old body style that is replaced by the other, active body style. The active body style is the style that is applied to the body of the page. (See Figure 27-23.)

Figure 27-23: The CSS Properties task pane

Typically, you want to reuse a CSS style elsewhere. You can do this by moving CSS styles to an external file. You can create a new CSS file by clicking the File menu, selecting New, and choosing CSS. Save the new style sheet on the file system and name it Mystyles.css. Then go back to the Design View of our page, and look at the Manage Styles task pane that contains an option to attach a style sheet to the page by clicking the link Attach Style Sheet. Doing this opens the Attach Style Sheet dialog box, which lets you browse to your new style sheet.

After the style sheet is attached, you can see that the mystyles.css style sheet shows up in the Manage Styles task pane. Now you can move styles that were created earlier to the external style sheet by selecting them, and dragging and dropping them onto the external style sheet. The styles have now become part of the external style sheet, and our page is updated automatically so that it contains the following link to the mystyles.css style sheet:

 <link rel="stylesheet" type="text/css" href="mystyles.css" /> 

As soon as you double-click a style in the Manage Styles task pane, you jump to the code definition of the style. When you click a style in the Manage Styles task pane, you are shown a preview of the selected style. (See Figure 27-24.)

Figure 27-24: The Manage Styles task pane

Manual Style Mode

You can also manipulate the layout in the CSS manually, which is known as Manual Style Mode. You can do this using the Style Application toolbar. The Styles Application toolbar includes the functions listed in Table 27-4.

Table 27-4: Style Application Toolbar Functions
Open table as spreadsheet

Image	Description
	This drop-down list lets you choose between the two style modes: auto and manual. When you choose auto mode, all other functions of the toolbar are not available.
	This drop-down list shows the target rule you have selected. It also gives you the chance to create a new target rule by making use of the style builder.
	Click to reuse exiting properties in the page.
	Click to show the overlay in the page.

If you use SharePoint Designer 2007 to click on several areas on a page that use different styles, you can see that the target rule shown in the Style Application toolbar changes to reflect the rule that is applied to the selected area. You can also create a new style rule and choose whether you want to create a new inline style rule or a style rule that is a part of a new style class altogether.

Note 

For reuse purposes, it is advisable to use external style sheets. Inline style sheets cannot be reused in other pages (unless you consider copy-and-paste reuse a form of reuse). In contrast, multiple pages are able to refer to a single external style sheet. This makes managing a single style much more convenient.

When you view a newly created HTML page in Split View and click the style of the paragraph, a highlighted square shows up around the edges of the style. (See Figure 27-25.)

Figure 27-25: Square around the edges of a selected style

You can click the margin on the left and move it to the right to indent the text. The same can be done for the other margins to apply a change to a paragraph's margin. You can also make positional changes, including margins and padding, in Design View-a new feature in SharePoint Designer 2007. Padding refers to the ability to insert spaces between a page and its content or to the space between content elements.

CSS IntelliSense

If you are using SharePoint Designer 2007 for creating or editing styles, you reap the benefits of the new CSS IntelliSense feature. CSS IntelliSense can be used in Code View and gives you a much easier experience for designing a style. When you edit a style using CSS IntelliSense, the change is reflected immediately in the Design View of the page.

Note 

IntelliSense has been around for a long time in advanced development environments such as Microsoft Visual Studio. CSS IntelliSense makes it much easier to create CSS styles.

Figure 27-26 shows how to use CSS IntelliSense to set the background color for a style.

Figure 27-26: CSS IntelliSense in SharePoint Designer 2007

When you click the Tools menu and choose Page Editor Options, the Page Editor Options window opens. On the Authoring tab of this window, you can select which schema you want to use. This choice determines what is available in CSS IntelliSense. From a dropdown list, you can choose between the following options:

• CSS 1.0

• CSS 2.0

• CSS 2.1

• CSS IE6

CSS Link Server Control

The CSS Link server control is used in master pages and inserts a <link> element into the resulting HTML page to apply an external style sheet. Design View in SharePoint Designer 2007 recognizes the style sheets that are generated by this control. In code (which can be found in the master page), the CSS Link server control looks like this:

 <SharePoint:CssLink runat="server"/> 

You can find the style sheets that are used by the master page in the following location: [drive letter]:\Program Files\Common Files\Microsoft Shared\Web server extensions \12\TEMPLATE\LAYOUTS\1033\STYLES. The easiest way to create a new style sheet that is used by a master page is to create a copy of an existing style sheet.

CSS Layouts

SharePoint Designer 2007 is able to provide a preview of the way that a style will appear. You can have more than one layout per content type. You can create a page layout by clicking on the File menu and choosing New, which opens the New window. Then select Page and CSS Layouts. Here you can choose between the different layout options. For example, you can choose a page layout that contains only two columns or a page layout that contains a header, a logo, two columns, and a footer.

When you click each template in the New window, pay attention to the Description section at the top right of the window. Below this description, a preview of the page is shown. (See Figure 27-27.)

Figure 27-27: Page tab in the New window

Site Definition

A site definition is used to define a unique type of SharePoint site. Following is a list of the site definitions that are a part of a default Windows SharePoint Services installation:

• Team site Team sites help to create, organize, and share information quickly and easily.

• Blank site Blank sites are empty SharePoint sites.

• Document workspace Document workspaces allow team members to work together on documents.

• Basic meeting workspace Basic meeting workspaces contain the basic features that allow users to plan, organize, and track meetings.

• Blank meeting workspace Blank meeting workspaces are empty sites that are dedicated to managing team meetings. Such sites always need to be customized according to the specific requirements within a team.

• Decision meeting workspace Decision meeting workspaces are meeting workspaces that allow users to review relevant documents and keep track of decisions being made.

• Social meeting workspace Social meeting workspaces are planning tools for social occasions.

• Multipage meeting workspace Multipage meeting workspaces are identical to basic meeting workspaces in that they allow users to plan, organize, and track meetings. The difference is that a multipage meeting workspace, by default, consists of multiple pages.

• Central admin template for central administration sites Central administration sites allow power users to manage SharePoint.

• Wiki template for Wikis Wiki sites allow users to interact in an informal way. Wiki sites allow users add, edit, and link Web pages.

• Blog template for blogs Blog sites allow users to post information and allow other users to comment on this information.

Each site definition consists of a collection of files that are located within the [drive letter]:\Program Files\Common Files\Microsoft Shared\Web server extensions \12\template\sitetemplates subdirectories of a front-end Web server. Site definition files include .xml, .aspx (ASP.NET pages), .ascx (ASP.NET controls), .master page files, and document template files. Examples of document template files are .dot, .htm, and content files such as .gif and .doc files. You can edit the site templates in SharePoint Designer 2007 by clicking File menu and choosing Open. Browse to the site template you want to edit and click Open.

In SharePoint Designer 2007, you can also create a new SharePoint site based on these site templates. From the File menu, click New. Doing this opens the New dialog box. Click the Web Site tab and SharePoint Templates. Here you can choose which template you want to use. (See Figure 27-28.) The right side of the window contains a description of the template. At the bottom, you can specify the location of the new Web site. Selecting a template opens a new instance of SharePoint Designer 2007 and generates the site, which will take a few moments.

Figure 27-28: Web Site tab showing SharePoint Templates in the New window

Revert To Template

SharePoint Designer 2007 facilitates the configuration and customization of Web Parts. If you have edited a page but are not happy with the results, you can right-click that page in the Folder List task pane and choose Revert To Template Page. Doing this brings up a Site Template Page Warning with the following message: "Reverting to the template page will replace the contents of this page with the contents defined by the page template. A backup copy of the current page is created in the same folder." If you click Yes, the Folder List task pane shows that a backup copy is created. For example, if you revert the  default.aspx page to its default page, the name of the backup copy becomes default_copy(1).aspx.

Note 

This is a much requested feature. A common complaint with SharePoint 2003 was the fact that FrontPage 2003 made it easy to unghost (customize) a page but impossible to ghost it again (uncustomize or revert to template).