Creating and Deploying Outlook Web Access Themes

Artigo
07/14/2011

Tópico modificado em: 2005-03-22

This topic provides information intended to help Exchange administrators in the design and modification of Microsoft® Office Outlook® Web Access for Exchange Server 2003 themes.

Outlook Web Access Themes

When designing the Microsoft Exchange Server 2003 release of Outlook Web Access, Microsoft decided to unify the use of style sheets. This decision kept the appearance of the Outlook Web Access client similar to that of Microsoft Office Outlook 2003. In the course of this work, a few highly enthusiastic folks on the Outlook Web Access team realized that it would be relatively easy to offer a “skin” or “theme” capability to the release. Because of these efforts, you can create your own Outlook Web Access themes. This topic covers the basics of creating and deploying a theme in Outlook Web Access.

By the end of this topic, you should understand enough of the theme architecture in Outlook Web Access to produce your own customized theme like the Microsoft Xbox® theme shown in the following figure.

Tema XBOX para UI do OWA

Cascading Style Sheets

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

Dica

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.

About Premium and Basic Clients

Outlook Web Access is optimized for Microsoft Internet Explorer 6 and later. These clients are known as premium clients. Outlook Web Access also provides a basic e-mail experience for other browsers including Internet Explorer 5.01 and Netscape 4.8 and later. Unfortunately, not all basic clients fully support cascading style sheets, so for these clients you will not be able to provide rich theme support

Where Does Outlook Web Access Get Theme Data

As previously mentioned, Outlook Web Access looks in one of the subdirectories in your Exchange 2003 server installation to find its theme information. Specifically, it starts at the ..\exchsrvr\exchweb\themes directory. Inside this directory are a number of subdirectories. There is one subdirectory corresponding with each theme installed for this Outlook Web Access instance.

The following figure shows the default themes structure.

Local dos arquivos relacionados ao Tema

A new Exchange Server 2003 installation has five subdirectories. One directory corresponds to each of the five default themes in the product.

In each of the subdirectories, you will see a master cascading style sheet file and several image files associated with the theme.

The following table describes what each images correspond to.

Image	File	Description
	Logo2.gif	Main logo. This is the 179x36 pixel branding logo. To minimize the amount of work needed, you should try replacing this with an image of approximately the same size. Also, the logo background color should be the same as the application background.
	Nb-bkgd.gif	Navigation bar background (it is repeated). This is a 1x26 pixel strip that is used as the background color for the navigation bar on the left side of the Outlook Web Access window. The default image uses a gradient color fill.
	Nb-hide-ql.gif	Navigation bar “hide” image. This 50x8 pixel image is used in the left navigation window that is used to hide or expand the navigation bar.
	Nb-ql-tgl.gif	Navigation bar “hide” background. This image appears behind the hb-hide-ql.gif and hb-show-ql.gif files. It is typically a gradient fill and is of a color that does not clash with the images it is behind.
	Nb-sel-bkgd.gif	Navigation bar selected. This 1x26 pixel image is used as the background highlight in the navigation bar.
	Nb-show-ql.gif	Navigation bar “show” image. This image is the same size as nb-hide-ql.gif. It is displayed when the navigation bar options (Calendar, Options, Inbox) are hidden.
	Nin-bg.gif	Pop-up notification “toast” background. This 130x126 pixel image is the background for the Outlook Web Access pop-up notification. You can modify this image with a watermark of any image you want to use, but make sure that the text that appears on top is still readable.
	Resize-dot.gif	A 1x1 pixel image used internally by Outlook Web Access.
	Tool-bkgd.gif	Toolbar background. This 1x32 pixel image is the background image used for the toolbar at the top of the Outlook Web Access window. It is also the background image for unselected buttons in the navigation bar.

Basic Theme Change in Outlook Web Access

With your basic understanding of cascading style sheets and the different client versions of Outlook Web Access available, you can create a new theme called “Orange” based on the standard “Blue” theme.

The following figure show Outlook Web Access with the default blue theme.

Tema azul padrão para a UI do OWA

The theme modification process consists of the following steps:

Create a new space on your Outlook Web Access server for your theme.
Update the server’s registry so Outlook Web Access can find the theme.
Modify the theme style sheet.
Update the theme images.

Creating a New Space for Your Theme

The easiest way to create a theme is to modify the default theme. To create a new theme called "Florida," copy the files from the default theme.

Dica

In general, most organizations deploy Outlook Web Access in a front-end and back-end server scenario. The instructions in this topic assume this scenario. If you are prototyping on a stand-alone server, you can apply all of the settings to a single computer.

To create a new space for your theme

On your front-end server, go to the program files\exchsrvr\exchweb\themes\0\ directory.
Make a copy of that folder, and name the copy program files\exchsrvr\exchweb\themes\orange\.

Updating the Outlook Web Access Registry

Aviso

Incorrectly editing the registry can cause serious problems that may require you to reinstall your operating system. Problems resulting from editing the registry incorrectly may not be able to be resolved. Before editing the registry, back up any valuable data.

To update the registry to use the new theme

On your back-end server, run Registry Editor and go t the following key:

HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\MSExchangeWeb\OWA
If the subkey does not exist, create a new subkey named Themes.
Under the Themes subkey, create a new String value (REG_SZ) named “FloridaTheme. This value is not displayed to the user.
As shown in the following figure, set this value to:

id=0x1;path=orange;title=Florida;bgcolor=#b26d0a

ID: The theme identifier must be unique among your themes. It may be specified as either a decimal or hexadecimal number and must be smaller than 0x80000000. Also note that, if you specify the ID in hexadecimal, you must make sure that the first numeral is zero.

Built-in themes do not have the first bit set to 1. Custom themes do. This is why you cannot set a custom theme ID with the first bit set. After you specify the ID in the registry, you will OR the value with 0x80000000 and that value will be the final ID that persists in user mailboxes.

Path: Specifies the path below the exchweb\themes directory where you located your theme files.

Title: The Outlook Web Access display name for your theme. This value must not be empty and must be fewerr than 512 characters.

Bgcolor: Specifies the default background color for your theme’s frameset. This value must be specified outside of the owacolors.css file because the background color of a frameset cannot be specified in a cascading style sheet file. This setting is listed as the frame background color in the Simplified Color Palette section. If you modify the frame background color again, you must update this value. You should also make sure that your logo background color matches this value. The value must be specified in the format #RRGGBB (you cannot use browser default names such as black or white).

After 30 to 60 seconds, your new theme should be available on the Outlook Web Access options page.

Dica

Make sure that you copy your theme files to all of your front-end servers and update the registry settings on all of your back-end servers. If Outlook Web Access determines that the registry value is incorrect, it will ignore the theme.

Modifying Your Theme’s Cascading Style Sheet File

Now that you’ve set up your server, the real work begins.

To modify your cascading style sheet

Locate your cascading style sheet file.
Use a text editor such as Notepad to search and replace all occurrences of themes\0 with themes\orange.
Save your updated file.

With the style sheet updated, you can change the colors in your theme.

About Color

One of the most difficult things to do in designing your theme is to come up with a good set of complementary colors. One way to keep from getting into too much trouble is to pick a main color that you want your theme to be based on and make minor adjustments to this color for your other elements in the theme. These adjustments are easier if your paint program supports working in a Hue, Saturation, and Brightness mode.

An in-depth discussion of proper color selection is beyond the scope of this paper. But, in a few words, most color selection is based off of color wheel theory. In color theory, there are some fairly mechanical tools you can use to come up with complementary colors. For cases where you want contrasting colors, the basic approach is to pick colors that are exactly opposite each other on the color wheel. This approach should produce a color pair that is complementary. The simplest approach to selecting your theme colors is to use what is called a monochromatic color scheme in which all colors are variations in lightness and saturation of a single color. This scheme is visually pleasant and easy to design. While easy to use, this scheme does not necessarily offer the best contrast.

If your team includes a Web designer, he or she should be able to help in developing a nice color scheme for your custom theme. In this topic a programmatic color wheel tool such as Color Wheel Pro was used to generate a palette of complementary colors for use in the theme. This theme uses a split complimentary scheme based off of warm orange. The palette created contained several lightness and color saturation steps, but a single color hue.

The following figure shows the Florida palette and its complementary opposite palette.

Paleta de cores azul e laranja para o tema Florida

In Outlook Web Access and the owacolors.css style sheet, there are over 60 colors specified in a standard theme, over 900 lines of CSS file to sift through, and over 200 classes identified. The Default Template Color Use section documents the colors in the default theme. Fortunately, only about 30 major colors need to be modify to come up with a theme.

Simplified Color Palette

The following figure shows the palette used in this theme and the substitution colors. For detailed information about the default color palette, see Default Template Color Use later in this topic.

Corresponds to
1. Dialog and note background
2. Frame background
3. Toolbar background
4. Navbar, label background, Toolbar divider color
5. Menu background
6. 3D Border color: dark
7. 3D Border color: normal, View header gradient (second line -- should be slightly darter than 15)
8. Infobar background
9. Infobar text
10. S/MIME progress indicator background
11. Tab unselected background (should be slightly darker than 1)
12. Tab background (should be slightly darker than 11)
13. Sort column in view headers
14. View header background, selected row in view (shadow)
15. View header gradient (first line -- should be slightly darker than 14)
16. Preview pane background
17. Selected item
18. Fieldset border (should be darker than 1)
19. Context menu left side bar background color
20. Button hover background
21. Button pressed
22. Navbar label border color
23. Tree control border color
24. Calendar header background
25. Calendar header border (should be slightly brighter than 23)
26. Free/busy control background
27. Free/busy control background (recipients)
28. Tree control border
29. Preview pane background (no items)

The following figure shows a the main Outlook Web Access page with most of these colors numbered and identified to correspond with the palette file.

Textos explicativos na UI do OWA mostrando onde as cores são exibidas

Most of the colors are variations of blue. In designing a new theme, you can take the simplified palette shown above and start substituting your new theme’s colors. Try using colors of similar saturation and lightness. For some of the contrasting colors, you can choose either darker colors or go with complementary colors for better contrast. Two examples would be for the button hover background and the button pressed colors.

To substitute colors in your palette

Open the cascading style sheet file and modify the color palette using the simplified color palette in a paint program such as Adobe Photoshop or Jasc Paint Shop Pro.
Use the eyedropper (or similar tool) and the default palette file in conjunction with the color palette created above to find the new hexadecimal value.

Dica

Make sure that you are running your computer in 32-bit color mode. If you do not run in 32-bit color mode, the values that your paint program reports for the default palette may be a little different than those shown in this topic.
Record each hexadecimal color substitution so you can update your owacolors.css file with the new colors.
Open the owacolors.css file in Notepad and find and replace each old hexadecimal color value with the new value.
After you modify the owacolors.css file, copy your new owacolors.css file to your server, log on to Outlook Web Access, and inspect the results thus far. Remember, these changes affect only the colors, not the images. After you finish adjusting your color palette, you can start changing the images.

Updating Your Image Files

The last step in creating your custom theme to modify the default images.

To update the images

For each image, open it in your paint program and temporarily convert it to 24-bit or 32-bit color images.
Apply gradient colors to the image that corresponds to the colors in your new palette.

Dica

You should save your updated images as .gif files in either 16 or 256 colors. The tool-bkgd.gif and nin-bg.gif files should be saved in 256 colors. The other images can be saved in 16 colors.

The following table shows the updated images for this example theme.

Image	File	Description
	Logo2.gif	Main logo. For this image, replace the background color with the new “Frame background” or replace the image with your own custom image.
	Nb-bkgd.gif	Navigation bar background (it is repeated). This is a 1x26 pixel strip that is used as the background color for the navigation bar on the left side of the Outlook Web Access window. The default image uses a gradient color fill.
	Nb-hide-ql.gif	Navigation bar “hide” image. This 50x8 pixel image is used in the left-hand navigation window that is used to hide or expand the navigation bar.
	Nb-ql-tgl.gif	Navigation bar “hide” background. This image appears behind the hb-hide-ql.gif and hb-show-ql.gif files. It is typically a gradient fill and is of a color that does not clash with the images it is behind.
	Nb-sel-bkgd.gif	Navigation bar selected. This 1x26 pixel image is used as the background highlight in the navigation bar.
	Nb-show-ql.gif	Navigation bar “show” image. This image is the same size as nb-hide-ql.gif. It is displayed when the navigation bar options (Calendar, Options, Inbox) are hidden.
	Nin-bg.gif	Pop-up notification “toast” background. This 130x126 pixel image is the background for the Outlook Web Access pop-up notification. You can modify this image with a watermark of any image you want to use, but make sure that the text that appears on top is still readable.
	Resize-dot.gif	A 1x1 pixel image used internally by Outlook Web Access.
	Tool-bkgd.gif	Toolbar background This 1x32 pixel image is the background image used for the toolbar at the top of the Outlook Web Access window. It is also the background image for unselected buttons in the navigation bar. This image should be saved in 256 colors.

The following image shows Outlook Web Access with the new theme.

Exemplo do tema Florida aplicado à UI do OWA

Hints for Building Outlook Web Access Themes

The following sections give additional information that may be useful when you create your theme.

Full Color Palette Tool

Available in the optional download for this topic is an HTML file called owatheme.htm. This file, when placed in a directory with an owacolors.css style sheet, displays a list of all colors used in the sheet along with the associated Outlook Web Access classes. For an example of this list, see Default Template Color Use later in this topic.

Changing Colors

Generally, if you see a color in the Outlook Web Access user interface that you want to change, take a screenshot of it, open it in your paint program, find the color’s Web value, and then search for it in the owacolors.css style sheet.

Background Images

Virtually all Outlook Web Access objects have a style class associated with them. Some of them will be more obvious than others when you view the owacolors.css file. It may take some experimentation to figure out which class name you want to add a background to.

Generally, the cascading style sheet syntax to add a background image is similar to the following example.

Classname
{
     Background-image:url(/exchweb/themes/yourtheme/imagename.gif)
}

For example, to add a palm tree image to the background of the Outlook Web Access page in the custom theme, modify the rule for the msgViewer, msgViewerCont, and msgViewerGroupCont classes. The following example shows the modification.

.msgViewer, .msgViewerCont, .msgViewerGroupCont
{
     Background-image:url(/exchweb/themes/orange/viewpalm.gif)
}

The following figure shows the results of this modification.

Tema Florida para a UI do OWA com uma palmeira como plano de fundo

Common Classes

Although there are over 200 classes to choose from, there are only a few that you will probably be interested in changing the background image on. The following table shows these classes.

Class names	Description
.notebody	All item types (message, meeting request, task).
.treefolder, .nbTreeProgress	Folder tree control.
.dlgBody	Several generic dialog boxes including: move, copy, new folder, address name resolution, message options.
.previewBody, .vwPrvwTD	Preview pane body and background.
.bdyOptions	Outlook Web Access options page.
.bdySpell	Spelling checker feature dialog boxes
.bdyRules	Rules option and editor.
.msgViewer, .msgViewerCont, .msgViewerGroupCont	Outlook Web Access item view list.

Other Images

This topic discusses the default theme images. Changing images outside of the themes directories affects all themes. Outlook Web Access uses over 500 different images in Exchange Server 2003. The Outlook Web Access default themes use only a few specific images. If you decide to change the core images, avoid changing image sizes (pixels height and width).

Other Outlook Web Access Style Sheets

Although this topic only discusses style changes in owacolors.css, there are also additional internally-used style sheets located in the ..exchweb/versionnumber/controls directory including OWAStyle.css. Generally, although the class definitions in these files may overlap, the elements defined in OWAStyle.css do not appear in owacolors.css. If you attempt to redefine one of these elements in your theme style sheet, you will not see any affect because the last element definition wins and OWAStyle.css is referenced last in the HTML that your browser sees.

Administrative Options for Themes

After you add your theme, there are several other options available to the way it is used in your organization.

Forcing a Default Theme

By default, when you follow the instructions in this topic, your theme will be available to all users. Some organizations may want to standardize their Outlook Web Access installation and specify the custom theme that all users see. You can set the default theme by adding DefaultTheme to your Outlook Web Access registry settings and defining its value to be that of the custom theme that you have created.

To set the DefaultTheme

On your back-end server, run Registry Editor.
Go to the following key:

\HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\MSExchangeWeb\OWA\Themes
Under the Themes subkey, create a new DWord value named DefaultTheme.
Specify the DefaultTheme value as the theme ID for the theme that you want to set as the default.

Dica

When DefaultTheme is specified, all users see the same theme and cannot specify a different theme. To allow users to select their own themes, delete the DefaultTheme value.

For More Information

The following resources offer additional information to help you create new Outlook Web Access themes.

Cascading Style Sheets

Color

Class Tool

The OWATheme.htm file generates a list of all colors and classes used in a theme. To use this file, copy the theme owacolors.css file that you are interested in reviewing into the same directory as OWATheme.htm. When you open OWATheme.htm, it reads the owacolors.css file and generates a table of colors and classes for your theme.

The OWATheme.htm file is included in the optional downloadable file available for this topic.

Palette

The default simplified Outlook Web Access palette is included in the optional downloadable file.

Xbox Theme

In conjunction with the Xbox team, an Xbox theme has been created for Outlook Web Access.

To use the Xbox theme

Download the optional file for the theme.
Unzip the contents of the file and copy them to a themes\xbox directory.
Run Registry Editor and go to the following key:

\HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\MSExchangeWeb\OWA\Themes
Under your Themes subkey, add the value xbox.
Set this value to:

Id=100;path=xbox;title=Xbox;bgcolor=#000000

Dica

You may need to change the ID to be compatible with your server.

Default Template Color

The following table lists all colors used in the default theme. Each entry contains a color swatch, the Web-equivalent code, the RGB code, and all of the Outlook Web Access classes that use the color in the owacolor.css file.

	dlgBody noteBody bdyOptions bdySpell bdyRules bdyFontEdit bdyDatePkr bdyView tabselected tabdiv srchBody notification galBody galInputArea galButtons gallBody gallClsTable gallClsTextField enBody enClsTable rmndrBODY rmndrICell btnSig btnSig btnSig btnSig btnEnc btnEnc btnEnc btnEnc
	mainBody cbToolbar fldrTitleBar vwTbl THeader nbTableMain dailyAllDayCell dailyAllDayContainer
	msgViewer msgViewerCont msgViewerGroupCont recipWell recipBox tbButtonDown:hover cbSubmenu cbSubmenu cbSubmenu cbSubmenu viewBody tblMsgBody txtBody grpLEFT grpRIGHT grpTop grpBottom tabselected tabselected tabselected tabsunselected tabsunselected tabsnone tabdiv tabdiv vwHdrTD vwHdrTD vwHdr vwHdr vwHdrSrtd vwHdrSrtd vwHdrSrtd attachList divCtxtMenu divCtxtMenu previewBody rulesHeader rulesHeader selRow trSelItem nbDropMenu nbDropMenu treeFolder nbTreeProgress dlgTree dlgTree dlgTree rowselected divgaltable rmndrRowSel groupHdr groupHdr ctxtMenu ctxtMenu ctxtMenu ctxtMenu cpMainTable dailyAppt weeklyMainTable weeklyAlldayAppointment weeklySelectedDateHeader monthlyNextPrevDateHeader monthlySelectedDateHeader monthlyDateBody monthlyNextPrevDateBody monthlyAlldayAppointment fbbodyLTR fbbodyLTR fbbodyLTR fbbodyLTR fbbodyRTL fbbodyRTL fbbodyRTL fbbodyRTL recip hrdivbottom btnSigPreview btnSigPreview btnSigPreview btnSigPreview btnEncPreview btnEncPreview btnEncPreview btnEncPreview btnSigHover btnSigHover btnSigDown btnSigDown
	msgHeader previewHdr rnSecBar fldDisabled unselRow trUnselItem rowunselected UNKNOWN fb_splitter_behavior fb_span_div fbtable fbbodyLTR fbbodyRTL tr sigInfoInput sigInfoTable
	recipWell ipFlat ipFlat ipFlat ipFlat recipBox recipBox recipBox recipBox MSGBODY MSGBODY MSGBODY MSGBODY txtBody txtBody txtBody txtBody attachList attachList attachList attachList
	cbToolbar FORMATBAR nbTglTD nbTglQLTD
	tbDivider tbDivider tbDivider tbDivider apptTdDatePicker apptTdDatePicker nbLabel
	tbButton tbButtonDown tbButtonRaise cbSubmenuItem cbSubmenu rnProgressBar divRcpResRIn divRcpResROut divRcpResCIn divRcpResCOut divRcpResC unselRow shdwRow ctxmnuMnu trUnselItem nbHref treeFolder nbTreeProgress fldName rowunselected divgaltable divgaltable divgaltable divgaltable rmndrCol1hd rmndrCol1hd crdHeader groupHdr cpMainTable cpMainTable cpMainTable cpMainTable cpTopRow cpActiveDateCell cpSelectedDateCell cpKeyNavCell1 cpKeyNavCell1 cpKeyNavCell1 cpKeyNavCell1 cpKeyNavCell1 dailyViewCell dailyAllDayAppointment dailyAllDayAppointment dailyAllDayAppointment dailyAllDayAppointment dailySelectedAllDayAppointment dailySelectedAllDayAppointment dailySelectedAllDayAppointment dailySelectedAllDayAppointment dailySelectedAllDayAppointment dailyContainer1 dailyContainer1 dailyContainer1 dailyContainer1 dailyContainer2 dailyContainer2 dailyContainer2 dailyContainer2 dailyContainer3 dailyContainer3 dailyContainer3 dailyContainer3 dailyContainer4 dailyContainer4 dailyContainer4 dailyContainer4 dailyContainer5 dailyContainer5 dailyContainer5 dailyContainer5 dailyContainer6 dailyContainer6 dailyContainer6 dailyContainer6 dailyContainer7 dailyContainer7 dailyContainer7 dailyContainer7 dailyAppt dailyAppt dailyAppt dailyAppt weeklyMainTable weeklyMainTable weeklyMainTable weeklyMainTable weeklyDateCell weeklyDateCell weeklyDateCell weeklyDateCell weeklyWeekendDateCell weeklyWeekendDateCell weeklyWeekendDateCell weeklyWeekendDateCell weeklySelectedAppointment weeklySelectedAlldayAppointment weeklyAlldayAppointment weeklyAlldayAppointment weeklyAlldayAppointment weeklyAlldayAppointment weeklyAlldayAppointment weeklyDateHeader weeklySelectedDateHeader monthlyDateHeader monthlySelectedDateHeader monthlyNextPrevDateHeader monthlyDayTitlesCell monthlyDayTitlesCell monthlyDayTitlesCell monthlyDayTitlesCell monthlySelectedAppointment monthlySelectedAlldayAppointment monthlyAlldayAppointment monthlyAlldayAppointment monthlyAlldayAppointment monthlyAlldayAppointment
	tbButtonDown tbButtonRaise tbButtonRaise tbButton A:hover tbButton:hover cbSubmenuItem A:hover cbSubmenuItem:hover
	tbButtonDown:hover
	cbSubmenuItem cbSubmenuItem cbSubmenuItem cbSubmenuItem fbButton fbButton fbButton fbButton cbSubmenu divContextMenu divCtxtMenu ctxmnuBar nbDropMenu ctxtMenu dailyRow monthlyDayHeader
	tblMsgBody tblMsgBody vwHdrSrtd vwHdrSrtd vwHdrBrdr3 divCtxtMenu nbDropMenu dlgTree dlgTree btnSigHover btnSigHover btnSigDown btnSigDown
	tblMsgBody tblMsgBody tabselected tabsunselected tabsunselected tabdiv tabdiv vwHdrTD vwHdrTD vwHdr vwHdr vwHdrBrdr2 divCtxtMenu rulesTableContainer rulesTableContainer rulesHeader rulesHeader nbDropMenu groupHdr groupHdr
	rnStatusBar
	rnStatusBar
	rnProgressBar
	tabsunselected
	tabBkgd
	vwHdrSrtd
	vwHdrTR vwHdr tblHdr rulesHeader shdwRow gallistheading crdHeader groupHdr cpTopRow cpSelectedDateCell calDateHeadingCell dailyAllDayCell dailyAllDayAppointment dailySelectedAllDayAppointment calDateHeadingText1 calDateHeadingText2 calDateHeadingText3 calDateHeadingText4 calDateHeadingText5 calDateHeadingText6 calDateHeadingText7 dailyHoursCell dailyMinsCell
	vwHdrBrdr1
	divRcpUnresRIn divRcpUnresROut divRcpUnresCIn divRcpUnresCOut divRcpUnresC ruleBroken cpTodaysDateCell cpTodaysDateCell cpTodaysDateCell cpTodaysDateCell cpTodaysDateCell tblSigInvalid tblSigInvalid
	purpleFlg
	orangeFlg
	greenFlg
	yellowFlg
	blueFlg
	redFlg
	completeFlg vwFldrTtl vwName THeader rulesTableContainer
	noFlg
	previewBody previewBody previewBody previewBody
	vwSortCol
	vwPrvwTD
	vwItemSep
	ruleNotSupported
	DLCertMissing tr tr tr tr
	selRow trSelItem rowselected rmndrRowSel ctxtMenu cpDayLettersCell cpWeekNumberCell dailySelectedAllDayAppointment weeklySelectedAppointment weeklySelectedAlldayAppointment weeklySelectedDateHeader monthlySelectedDateHeader monthlySelectedAppointment monthlySelectedAlldayAppointment
	fldset
	ctxmnuBar
	ctxmnuMnu nbHref:hover nbTglHref:hover aQL:hover aFU:hover
	nbLabel nbLabel nbLabel nbLabel
	nbTglTD nbTglTD nbTglTD nbTglTD nbTglQLTD nbTglQLTD nbTglQLTD nbTglQLTD
	treeFolder treeFolder treeFolder treeFolder nbTreeProgress nbTreeProgress nbTreeProgress nbTreeProgress
	fldUrdCt
	fldCntCt divMins divMins divMins divMins
	rmndrWarning
	cpInactiveDateCell colorFree row
	dailyViewCell dailyBackgroundTable colAM
	dailyBackgroundTable dailyBackgroundTable dailyBackgroundTable dailyBackgroundTable dailyHoursCell dailyHoursCell dailyHoursCell dailyHoursCell dailyMinsCell dailyMinsCell dailyMinsCell dailyMinsCell dailyApptCell dailyApptCell dailyApptCell dailyApptCell dailyCellEven
	dailyCellWorking colPM
	colorBusy
	colorTentative
	colorOOF
	weeklyDateHeader weeklySelectedDateHeader monthlyDateHeader monthlySelectedDateHeader monthlyDayTitlesCell
	weeklyDateHeader weeklyDateHeader weeklyDateHeader weeklyDateHeader weeklySelectedDateHeader weeklySelectedDateHeader weeklySelectedDateHeader weeklySelectedDateHeader monthlyDateHeader monthlyDateHeader monthlyDateHeader monthlyDateHeader monthlySelectedDateHeader monthlySelectedDateHeader monthlySelectedDateHeader monthlySelectedDateHeader monthlyDateCell monthlyDateCell monthlyDateCell monthlyDateCell monthlyWeekendDateCell monthlyWeekendDateCell monthlyWeekendDateCell monthlyWeekendDateCell
	monthlyNextPrevDateBody
	monthlyWeekendDateCell
	fbtime tdUsrBkgd
	fb_color_div
	recipBg dvAllAttend
	busy busyClr
	tent tentClr
	oof oofClr
	unknownClr
	tblSigWarning tblSigWarning

Inline Table-Based Simple Palette

The following table lists the colors, their hexadecimal values, and where those colors are used in the simple palette.

Color and hexadecimal value	Corresponds to
	1. Dialog and note background
	2. Frame background
	3. Toolbar background
	4. Navbar, label background, Toolbar divider color
	5. Menu background
	6. 3D Border color: dark
	7. 3D Border color: normal, View header gradient (second line -- should be slightly darter than 15)
	8. Infobar background
	9. Infobar text
	10. S/MIME progress indicator background
	11. Tab unselected background (should be slightly darker than 1)
	12. Tab background (should be slightly darker than 11)
	13. Sort column in view headers
	14. View header background, selected row in view (shadow)
	15. View header gradient (first line -- should be slightly darker than 14)
	16. Preview pane background
	17. Selected item
	18. Fieldset border (should be darker than 1)
	19. Context menu left side bar background color
	20. Button hover background
	21. Button pressed
	22. Navbar label border color
	23. Tree control border color
	24. Calendar header background
	25. Calendar header border (should be slightly brighter than 23)
	26. Free/busy control background
	27. Free/busy control background (recipients)
	28. Tree control border
	29. Preview pane background (no items)