SharePoint 2007 Style Guidelines

Copyright © 2007, Jeff Webb http://www.essentialsharepoint.com/. You are free to copy, use, or modify this document as long as you retain this attribution.

SharePoint provides many ways to customize sites, lists, and libraries. These guidelines are meant to provide a consistent look and feel across all of the company’s sites so users will find it easier to find what they are looking for and not be distracted by visual differences.

Screen Size

When adding web parts to a page or create list views, try to design the page so it fits on a 1024x768 screen without scrolling horizontally. If your monitor is larger than that, try setting it to the 1024x768 resolution before you publish the page.

Themes

Sites should use the <Belltown> theme. It is consistent with the company logo and is easy to read. To set the theme of a site:

1. Click Site Actions>Site Settings>Site Theme.

2. Select the theme and click Apply.

(Note others: change <Belltown> to the theme that looks best with your company logo.)

When creating a site template, apply the theme to the site before creating the template. Then, the new theme is applied automatically whenever someone creates a new site based on the custom template.

Navigation

The top-level site in the portal is called Home. Department sites and all other site collections are attached to the top-level site so that the breadcrumb web part at the page looks like this:

Home > IT Projects > SharePoint 2007

Users can easily navigate up one or more levels by clicking on any of those links. The top-level page of a site (default.aspx) is also called Home, but the site title is what appears in the breadcrumb web part so that’s not too confusing: each site has a Home page, and each portal has a Home site.

To attach your department site collection to the portal:

· Navigate to the top level site in your department site and click Site Actions>Site Settings>Portal Site Connection.

Within each department site, sub sites should inherit their top link bar from the parent site. You can select that when you create a sub-site, but if you forget you can add that later by following these steps:

1. Navigate to the sub-site and click Site Actions>Site Settings>Top link bar.

2. Click Use Links from Parent and click OK.

Area on the left-side of each page contains links to View All Site Content and a Recycle Bin. Between those links the page may display a Quick Launch web part, a Tree View web part, or both (see figure).

The Quick Launch can be edited to show links to specific lists, libraries, and other links. The Tree View displays all the site content hierarchically. In general, use the Tree View when there are a lot of sub-sites to display (such as the project sites in IT or Program Management). Use the Quick Launch for sites that mainly contain libraries (such as Purchasing or Doc Control).

To display the Quick Launch or Tree View:

1. Click Site Actions>Tree view.

2. Select the Enable Quick Launch and/or Enable Tree View check boxes and click OK.

To edit the links on Quick Launch:

1. Go back to Site Settings and click Quick Launch.

2. Use the toolbar to create new headings and links, or click the edit box to change an existing heading/link.

Lists

Lists that contain many items should page or scroll vertically, not both. The number of items shown on each page of a list view is set by the Item Limit property of the view.

To change the Item Limit setting:

1. Navigate to the list and click Settings>List Settings on the list toolbar.

2. Scroll to the bottom of the page, and click the view to edit (for example, All Items).

3. Scroll to the bottom of the page and expand the Item Limit group.

4. Change the Number of items to display and click OK.

About 20 will fit on a page at one time (no scrolling). To avoid paging, use a high number like 10000. If your list has thousands of items, the page will load slowly however.

List views control how items are sorted, filtered, and grouped as well as what type of view is used. Standard views are the most common type. Datasheet views are used to edit list items in bulk, Calendar views are used for date-oriented lists, Gantt-chart views are used for Project tracking lists, and Access Views are used to analyze list data with Microsoft Access 2007.

Standard list views can use different styles to change how items are arranged on the page. For lists with a lot of items, the Shaded style is the easiest to read. To set the style of a standard view:

1. Navigate to the list and click Settings>List Settings on the list toolbar.

2. Scroll to the bottom of the page, and click the view to edit (for example, All Items).

3. Scroll to the bottom of the page and expand the Style group.

4. Select the Shaded view style and click OK.

Libraries

Much of what applies to lists also applies to libraries. You can create different views of the libraries, control paging, and so on. Unlike lists, however, libraries are often organized using folders. Folders make it easy to copy documents between SharePoint and your desktop, since you can use the Windows Explorer to drag entire folders to or from SharePoint.

To use the Windows Explorer with a library:

1. Navigate to the library and click Actions>Open with Windows Explorer on the library toolbar.

2. Drag files to or from the new Explorer window or use cut and paste to copy files.

Folders are awkward to navigate when a library is displayed as a web part on another page, so for libraries that will be featured that way, consider using a custom view to group the files based on columns added to in the library. For example, you might add a Department column, then create a custom view that groups files by department.

Common Custom Elements

All images, HTML, and other items that are used across all sites are stored in a top-level library named /includes. That library allows all users read-access and provides a central location where the portal administrator can maintain shared elements such as logos and special coding used in Content Editor web parts.

To link a Content Editor web part to a shared piece of HTML or CSS:

1. Create a new web part on the page.

2. Enter the address of the HTML in the Content Editor web part’s Content Link property.

3. Click Test Link to verify the address.

4. Click OK to save the change.