Virtually every element in Outlook Web Access -- from the new mail form to the view list and preview pane -- is formatted by using HTML cascading style sheets.
One of the underlying purposes of Standard Generalized Markup Language (SGML) is to provide a way to separate formatting from content. HTML and XML are examples of SGML-based languages. Prior to the use of cascading style sheets, this separation was not possible in HTML and authors would typically include all formatting inline with their content. With cascading style sheets, you can separate this formatting into a separate file and assign identifier tags to the content instead. It is this ability that is the cornerstone to Outlook Web Access themes.
To have a good understanding of Outlook Web Access, themes you should also have a reasonable understanding of the way cascading style sheets work.
Basic Inclusion Syntax
Outlook Web Access themes make use of the concept of linked style sheets. In linked style sheets there is a declaration at the top of every HTML page rendered that indicates which style sheet that page should use.
For example, at the top of each page rendered by Outlook Web Access, you would see header information similar to the following information.
<!--Copyright (c) 2000-2003 Microsoft Corporation. All rights reserved.-->
<HTML xmlns:MSIE DIR=LTR>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="http://myserver.example.com/exchweb/themes/0/owacolors.css">
The <link> directive tells the page where to locate the style sheet that controls the Outlook Web Access theme information.
Style Sheet Rules
The style sheet itself is made up of a number of rules that define how elements on the page will be formatted. These rules can apply to both standard elements, such as headings and paragraph styles, and to those elements identified with classes.
The default Outlook Web Access theme style sheet located at [drive letter]\Program Files\Exchsrvr\exchweb\themes\0\owacolors.css contains more than 900 lines of text. This file defines the rules or style definitions that specify the theme colors that will be used in painting Outlook Web Access pages.
A rule consists of a list of elements or HTML tags followed by a list of cascading style sheet style properties enclosed in braces. Multiple tags can be defined simultaneously by separating them with commas. Each property in the rule is separated by a semicolon, as shown in the following example.
/* DEFAULT (BLUE) */
.dlgBody, .noteBody, .bdyOptions, .bdySpell, .bdyRules, .bdyFontEdit, .bdyDatePkr
{
background-color:#C3DAF9;
}This example from the style sheet shows that several different Outlook Web Access elements share the same background-color of #C3DAF9. This reference of color by number is consistent with the rules for specifying colors in HTML.
Available Properties
Although many properties can be defined in the Outlook Web Access style sheet, the following table shows the ones of greatest interest in this discussion.
|
Outlook Web Access theme cascading style sheet properties of interest
|
| background-image |
| border-bottom-color |
| background-color |
| color |
| border-color |
| border-left-color |
| border-right-color |
| border-top-color |
| border-bottom-color |
.gif) Note: |
|---|
|
Although you can experiment with specifying additional properties, including those defining fonts and positioning, proceed with caution. It is recommended that you back up the original .css file before making any changes.
|
Style Sheet Colors
In HTML, a color is specified as a total of six hexadecimal values. These numbers are further grouped into groups of two with each group defining a shade or hue of red, green, and blue (RGB). The value is specified in cascading style sheet files and Web pages with a leading number sign (#).
In designing your theme, you will find it valuable to have access to either a full-featured graphics package, such as PaintShop Pro or Adobe Photoshop, or a specialty color picking tool, such as one of the many utilities available at various Internet download sites like C|Net's Download.com. These tools can be used to analyze colors and determine their equivalent Web values.
You can also specify most common colors by name. Most browsers understand this shorthand and converts the color to its hexadecimal representation when rendering it.