Microsoft SharePoint 2007 Technologies

14.4 Customizing the Color Scheme 407

Chapter 14

igation automatically or manually, and finally you can modify the actual

entries in the navigational structure. Using the Add Heading functionality,

you can add specific headings in your navigational structure and choose

whether the headings actually link you to a page. Additionally, you can add

your own custom links to the navigational hierarchy.

The Look and Feel menu on the Site Settings page also includes a link to

the Tree View Settings page, which allows you to enable and disable both the

Quick Launch menu and the Tree View menu. The Quick Launch menu is

the vertical menu, or current navigation, that appears on the left hand side of

an uncustomized SharePoint site. Figure 14.23 shows the home page of a reg-

ular collaboration portal with the Tree View setting enabled and the Quick

Launch setting disabled.

14.4 Customizing the Color Scheme

As with previous versions, SharePoint Server 2007 and WSS 3.0 make exten-

sive use of cascading style sheets (.css) to define the color scheme and layout

of their pages. Cascading style sheets allow you to assign several properties at

once to all of the elements on an HTML page marked with a particular tag.

The term cascading style sheets implies that two or more style sheets can cas-

cade together to produce the final look of the page. The language used for

creating cascading style sheets is CSS, a simple declarative language that

allows you to apply stylistic information, such as the font and color, to docu-

ments written in HTML or XML. Elements on the page are associated with

Figure 14.23

Collaboration

portal with Tree

View enabled.

408 14.4 Customizing the Color Scheme

properties and values in the style sheet. For example, Figure 14.24 declares

that BODY elements are 10-point blue text.

The main style sheet that controls the color scheme and layout for

SharePoint Server 2007 and WSS 3.0 is core.css, which can be found in the:

\Program Files\Common Files\Microsoft Shared\Web server exten-

sions\12\TEMPLATE\LAYOUTS\<localid>\STYLES

directory. Core.css con-

tains numerous classes that are used to define specific elements on a page. For

example, the

ms-bannerframe class controls the background color of the

navigation bar that appears at the top of the page. How do you know which

class controls which element on the page? The WSS 3.0 SDK provides a table

that describes each class defined in core.css. The SDK also provides sample

code (Figure 14.25) that you can add to a page, which applies a tool tip to

each element, describing the class that controls that element.

Figure 14.24

Sample CSS Code

Figure 14.25

Script code to

identify CSS

classes.

14.4 Customizing the Color Scheme 409

Chapter 14

The code can be inserted into a content editor Web Part to show the

classes specific to that page. Alternatively, you can include the code within

the

BODY element of your master page, which will allow you to see the classes

across all the pages that inherit that master page. The code basically adds an

area on your page that displays the title of the class applied to the region over

which your mouse is hovering (Figure 14.26). Notice that the mouse pointer

is hovering over the title area of the page, and the style that is being used by

the title area is

ms-sitetitle.

An excellent tool for anyone customizing the look and feel of SharePoint

is the Internet Explorer Developer Toolbar, which is available as a free down-

load on the Microsoft Web site. Once installed, it provides tools that allow

you to explore the document object model (DOM) of a Web page, view the

source of HTML and CSS, and view HTML object class names and IDs.

14.4.1 Creating Custom Style Sheets

You should not customize core.css directly; instead, you should create a cus-

tom style sheet that contains all the classes that you would like to override.

You could then store this file in the same directory as core.css (

\Program

Files\Common Files\Microsoft Shared\Web server extensions\12\

TEMPLATE\LAYOUTS\<localid>\STYLES)

and reference your new custom

style sheet. Alternatively, if you wanted to take advantage of the enterprise

content management capabilities of SharePoint Server 2007, instead of stor-

ing the file directly on the file system you would upload your custom style

sheet to a library such as the style library, and benefit from the version con-

trol and publishing model.

There are several options when it comes to referencing custom style

sheets in SharePoint, and the option you select depends on what you want to

Figure 14.26

Home page with

CSS script applied

to master page.