Section 3.9. Applying Style Sheets | Essential SharePoint 2007: A Practical Guide for Users, Administrators and Developers

3.9. Applying Style Sheets

SharePoint uses cascading style sheets (. css ) to control the fonts and the background and foreground colors used by the sites on the SharePoint server. The default style sheet is OWS.css which is found in C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\60\TEMPLATE\LAYOUTS\1033\STYLES .

Changes to OWS.css affect all SharePoint sites on the server. For example, making the following change turns all of the body text on the server red:

 body {         font-family: verdana, arial, helvetica, sans-serif;         background: white;         color:  red  ;     }

Sites using themes are also affected by THEME.css found in the .\TEMPLATES\THEMES\* folders. You can edit THEME.css to change the styles applied by a specific theme. For example, the following change to THEME.css in the NewTheme folder changes the page title font color for the theme created in the preceding section:

 .ms-pagetitle{     color:  black  ;     font-family:Verdana,Arial,Helvetica,sans-serif;     font-weight:bold;     }

Changing styles in a theme doesn't immediately change existing sites based on that theme, because style sheets are cached on the client. If you don't see the changes you've made, force a full refresh of the page by pressing Ctrl+F5.

Identifying the class name of styles that SharePoint uses on a page can be difficult. One way to determine the class name of the items on a page is to change the body element of default.aspx (or any other SharePoint page) to include the following event procedure:

 <body marginwidth="0" marginheight="0" scroll="yes"  onmouseover="window.status = window.event.srcElement.className"  >

Now, when you move the mouse over an item on the page, the status bar displays the class name for that item, as shown in Figure 3-16.

The SharePoint SDK contains a table of the class names in the "CSS Class Definitions" topic.

When changing default.aspx , or any SharePoint page, you need to know whether or not that page is ghosted. Ghosted pages are shared among all sites and can be

animal 3-16. Finding an item's class name

changed by editing the . aspx file directly in the site definition. Pages that are not ghosted are stored in the site's content database and can be edited by opening the site using FrontPage.