Export (0) Print
Expand All
Expand Minimize

Creating and Deploying Outlook Web Access Themes

 

Topic Last Modified: 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.

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.

XBOX Theme for OWA UI

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.

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.

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.

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

noteNote:
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.

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.

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

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.

Location of Theme related files

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
OWA Product Logo

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.

OWA theme 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.

OWA theme graphic

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.

OWA theme graphic

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.

OWA theme graphic

Nb-sel-bkgd.gif

Navigation bar selected. This 1x26 pixel image is used as the background highlight in the navigation bar.

OWA theme graphic

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.

OWA theme graphic

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.

OWA theme graphic

Resize-dot.gif

A 1x1 pixel image used internally by Outlook Web Access.

OWA theme graphic

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.

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.

Default blue theme for OWA UI

The theme modification process consists of the following steps:

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

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.

noteNote:
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
  1. On your front-end server, go to the program files\exchsrvr\exchweb\themes\0\ directory.

  2. Make a copy of that folder, and name the copy program files\exchsrvr\exchweb\themes\orange\.

CautionCaution:
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
  1. On your back-end server, run Registry Editor and go t the following key:

    HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\MSExchangeWeb\OWA

  2. If the subkey does not exist, create a new subkey named Themes.

  3. Under the Themes subkey, create a new String value (REG_SZ) named “FloridaTheme. This value is not displayed to the user.

  4. As shown in the following figure, set this value to:

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

    Registry key location for OWA

    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.

    noteNote:
    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.

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

To modify your cascading style sheet
  1. Locate your cascading style sheet file.

  2. Use a text editor such as Notepad to search and replace all occurrences of themes\0 with themes\orange.

  3. Save your updated file.

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

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.

Color palette of blue and orange for Florida theme

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.

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

Table of color substitutions to create new theme

1. Dialog and note background

Table of color substitutions to create new theme

2. Frame background

Table of color substitutions to create new theme

3. Toolbar background

Table of color substitutions to create new theme

4. Navbar, label background, Toolbar divider color

Table of color substitutions to create new theme

5. Menu background

Table of color substitutions to create new theme

6. 3D Border color: dark

Table of color substitutions to create new theme

7. 3D Border color: normal, View header gradient (second line -- should be slightly darter than 15)

Table of color substitutions to create new theme

8. Infobar background

Table of color substitutions to create new theme

9. Infobar text

Table of color substitutions to create new theme

10. S/MIME progress indicator background

Table of color substitutions to create new theme

11. Tab unselected background (should be slightly darker than 1)

Table of color substitutions to create new theme

12. Tab background (should be slightly darker than 11)

Table of color substitutions to create new theme

13. Sort column in view headers

Table of color substitutions to create new theme

14. View header background, selected row in view (shadow)

Table of color substitutions to create new theme

15. View header gradient (first line -- should be slightly darker than 14)

Table of color substitutions to create new theme

16. Preview pane background

Table of color substitutions to create new theme

17. Selected item

Table of color substitutions to create new theme

18. Fieldset border (should be darker than 1)

Table of color substitutions to create new theme

19. Context menu left side bar background color

Table of color substitutions to create new theme

20. Button hover background

Table of color substitutions to create new theme

21. Button pressed

Table of color substitutions to create new theme

22. Navbar label border color

Table of color substitutions to create new theme

23. Tree control border color

Table of color substitutions to create new theme

24. Calendar header background

Table of color substitutions to create new theme

25. Calendar header border (should be slightly brighter than 23)

Table of color substitutions to create new theme

26. Free/busy control background

Table of color substitutions to create new theme

27. Free/busy control background (recipients)

Table of color substitutions to create new theme

28. Tree control border

Table of color substitutions to create new theme

29. Preview pane background (no items)

Table of color substitutions to create new theme

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.

Callouts on OWA UI showing where colors show up

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
  1. 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.

  2. 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.

    noteNote:
    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.
  3. Record each hexadecimal color substitution so you can update your owacolors.css file with the new colors.

  4. Open the owacolors.css file in Notepad and find and replace each old hexadecimal color value with the new value.

  5. 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.

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

To update the images
  1. For each image, open it in your paint program and temporarily convert it to 24-bit or 32-bit color images.

  2. Apply gradient colors to the image that corresponds to the colors in your new palette.

noteNote:
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
Fake OWA logo image

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.

OWA Florida theme graphic

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.

OWA theme graphic

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.

OWA Florida theme graphic

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.

OWA Florida theme graphic

Nb-sel-bkgd.gif

Navigation bar selected. This 1x26 pixel image is used as the background highlight in the navigation bar.

OWA theme graphic

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.

OWA Florida theme graphic

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.

OWA theme graphic

Resize-dot.gif

A 1x1 pixel image used internally by Outlook Web Access.

OWA Florida theme graphic

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.

Example of the Florida theme applied to OWA UI

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

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.

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.

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.

Florida theme for OWA UI palm tree background

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.

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).

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.

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

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
  1. On your back-end server, run Registry Editor.

  2. Go to the following key:

    \HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\MSExchangeWeb\OWA\Themes

  3. Under the Themes subkey, create a new DWord value named DefaultTheme.

  4. Specify the DefaultTheme value as the theme ID for the theme that you want to set as the default.

noteNote:
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.

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

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.

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

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

To use the Xbox theme
  1. Download the optional file for the theme.

  2. Unzip the contents of the file and copy them to a themes\xbox directory.

  3. Run Registry Editor and go to the following key:

    \HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\MSExchangeWeb\OWA\Themes

  4. Under your Themes subkey, add the value xbox.

  5. Set this value to:

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

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

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.

 

Color sample from OWA palette

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

Color sample from OWA palette

mainBody cbToolbar fldrTitleBar vwTbl THeader nbTableMain dailyAllDayCell dailyAllDayContainer

Color sample from OWA palette

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

Color sample from OWA palette

msgHeader previewHdr rnSecBar fldDisabled unselRow trUnselItem rowunselected UNKNOWN fb_splitter_behavior fb_span_div fbtable fbbodyLTR fbbodyRTL tr sigInfoInput sigInfoTable

Color sample from OWA palette

recipWell ipFlat ipFlat ipFlat ipFlat recipBox recipBox recipBox recipBox MSGBODY MSGBODY MSGBODY MSGBODY txtBody txtBody txtBody txtBody attachList attachList attachList attachList

Color sample from OWA palette

cbToolbar FORMATBAR nbTglTD nbTglQLTD

Color sample from OWA palette

tbDivider tbDivider tbDivider tbDivider apptTdDatePicker apptTdDatePicker nbLabel

Color sample from OWA palette

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

Color sample from OWA palette

tbButtonDown tbButtonRaise tbButtonRaise tbButton A:hover tbButton:hover cbSubmenuItem A:hover cbSubmenuItem:hover

Color sample from OWA palette

tbButtonDown:hover

Color sample from OWA palette

cbSubmenuItem cbSubmenuItem cbSubmenuItem cbSubmenuItem fbButton fbButton fbButton fbButton cbSubmenu divContextMenu divCtxtMenu ctxmnuBar nbDropMenu ctxtMenu dailyRow monthlyDayHeader

Color sample from OWA palette

tblMsgBody tblMsgBody vwHdrSrtd vwHdrSrtd vwHdrBrdr3 divCtxtMenu nbDropMenu dlgTree dlgTree btnSigHover btnSigHover btnSigDown btnSigDown

Color sample from OWA palette

tblMsgBody tblMsgBody tabselected tabsunselected tabsunselected tabdiv tabdiv vwHdrTD vwHdrTD vwHdr vwHdr vwHdrBrdr2 divCtxtMenu rulesTableContainer rulesTableContainer rulesHeader rulesHeader nbDropMenu groupHdr groupHdr

Color sample from OWA palette

rnStatusBar

Color sample from OWA palette

rnStatusBar

Color sample from OWA palette

rnProgressBar

Color sample from OWA palette

tabsunselected

Color sample from OWA palette

tabBkgd

Color sample from OWA palette

vwHdrSrtd

Color sample from OWA palette

vwHdrTR vwHdr tblHdr rulesHeader shdwRow gallistheading crdHeader groupHdr cpTopRow cpSelectedDateCell calDateHeadingCell dailyAllDayCell dailyAllDayAppointment dailySelectedAllDayAppointment calDateHeadingText1 calDateHeadingText2 calDateHeadingText3 calDateHeadingText4 calDateHeadingText5 calDateHeadingText6 calDateHeadingText7 dailyHoursCell dailyMinsCell

Color sample from OWA palette

vwHdrBrdr1

Color sample from OWA palette

divRcpUnresRIn divRcpUnresROut divRcpUnresCIn divRcpUnresCOut divRcpUnresC ruleBroken cpTodaysDateCell cpTodaysDateCell cpTodaysDateCell cpTodaysDateCell cpTodaysDateCell tblSigInvalid tblSigInvalid

Color sample from OWA palette

purpleFlg

Color sample from OWA palette

orangeFlg

Color sample from OWA palette

greenFlg

Color sample from OWA palette

yellowFlg

Color sample from OWA palette

blueFlg

Color sample from OWA palette

redFlg

Color sample from OWA palette

completeFlg vwFldrTtl vwName THeader rulesTableContainer

Color sample from OWA palette

noFlg

Color sample from OWA palette

previewBody previewBody previewBody previewBody

Color sample from OWA palette

vwSortCol

Color sample from OWA palette

vwPrvwTD

Color sample from OWA palette

vwItemSep

Color sample from OWA palette

ruleNotSupported

Color sample from OWA palette

DLCertMissing tr tr tr tr

Color sample from OWA palette

selRow trSelItem rowselected rmndrRowSel ctxtMenu cpDayLettersCell cpWeekNumberCell dailySelectedAllDayAppointment weeklySelectedAppointment weeklySelectedAlldayAppointment weeklySelectedDateHeader monthlySelectedDateHeader monthlySelectedAppointment monthlySelectedAlldayAppointment

Color sample from OWA palette

fldset

Color sample from OWA palette

ctxmnuBar

Color sample from OWA palette

ctxmnuMnu nbHref:hover nbTglHref:hover aQL:hover aFU:hover

Color sample from OWA palette

nbLabel nbLabel nbLabel nbLabel

Color sample from OWA palette

nbTglTD nbTglTD nbTglTD nbTglTD nbTglQLTD nbTglQLTD nbTglQLTD nbTglQLTD

Color sample from OWA palette

treeFolder treeFolder treeFolder treeFolder nbTreeProgress nbTreeProgress nbTreeProgress nbTreeProgress

Color sample from OWA palette

fldUrdCt

Color sample from OWA palette

fldCntCt divMins divMins divMins divMins

Color sample from OWA palette

rmndrWarning

Color sample from OWA palette

cpInactiveDateCell colorFree row

Color sample from OWA palette

dailyViewCell dailyBackgroundTable colAM

Color sample from OWA palette

dailyBackgroundTable dailyBackgroundTable dailyBackgroundTable dailyBackgroundTable dailyHoursCell dailyHoursCell dailyHoursCell dailyHoursCell dailyMinsCell dailyMinsCell dailyMinsCell dailyMinsCell dailyApptCell dailyApptCell dailyApptCell dailyApptCell dailyCellEven

Color sample from OWA palette

dailyCellWorking colPM

Color sample from OWA palette

colorBusy

Color sample from OWA palette

colorTentative

Color sample from OWA palette

colorOOF

Color sample from OWA palette

weeklyDateHeader weeklySelectedDateHeader monthlyDateHeader monthlySelectedDateHeader monthlyDayTitlesCell

Color sample from OWA palette

weeklyDateHeader weeklyDateHeader weeklyDateHeader weeklyDateHeader weeklySelectedDateHeader weeklySelectedDateHeader weeklySelectedDateHeader weeklySelectedDateHeader monthlyDateHeader monthlyDateHeader monthlyDateHeader monthlyDateHeader monthlySelectedDateHeader monthlySelectedDateHeader monthlySelectedDateHeader monthlySelectedDateHeader monthlyDateCell monthlyDateCell monthlyDateCell monthlyDateCell monthlyWeekendDateCell monthlyWeekendDateCell monthlyWeekendDateCell monthlyWeekendDateCell

Color sample from OWA palette

monthlyNextPrevDateBody

Color sample from OWA palette

monthlyWeekendDateCell

Color sample from OWA palette

fbtime tdUsrBkgd

Color sample from OWA palette

fb_color_div

Color sample from OWA palette

recipBg dvAllAttend

Color sample from OWA palette

busy busyClr

Color sample from OWA palette

tent tentClr

Color sample from OWA palette

oof oofClr

Color sample from OWA palette

unknownClr

Color sample from OWA palette

tblSigWarning tblSigWarning

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
Color sample from OWA palette

1. Dialog and note background

Color sample from OWA palette

2. Frame background

Color sample from OWA palette

3. Toolbar background

Color sample from OWA palette

4. Navbar, label background, Toolbar divider color

Color sample from OWA palette

5. Menu background

Color sample from OWA palette

6. 3D Border color: dark

Color sample from OWA palette

7. 3D Border color: normal, View header gradient (second line -- should be slightly darter than 15)

Color sample from OWA palette

8. Infobar background

Color sample from OWA palette

9. Infobar text

Color sample from OWA palette

10. S/MIME progress indicator background

Color sample from OWA palette

11. Tab unselected background (should be slightly darker than 1)

Color sample from OWA palette

12. Tab background (should be slightly darker than 11)

Color sample from OWA palette

13. Sort column in view headers

Color sample from OWA palette

14. View header background, selected row in view (shadow)

Color sample from OWA palette

15. View header gradient (first line -- should be slightly darker than 14)

Color sample from OWA palette

16. Preview pane background

Color sample from OWA palette

17. Selected item

Color sample from OWA palette

18. Fieldset border (should be darker than 1)

Color sample from OWA palette

19. Context menu left side bar background color

Color sample from OWA palette

20. Button hover background

Color sample from OWA palette

21. Button pressed

Color sample from OWA palette

22. Navbar label border color

Color sample from OWA palette

23. Tree control border color

Color sample from OWA palette

24. Calendar header background

Color sample from OWA palette

25. Calendar header border (should be slightly brighter than 23)

Color sample from OWA palette

26. Free/busy control background

Color sample from OWA palette

27. Free/busy control background (recipients)

Color sample from OWA palette

28. Tree control border

Color sample from OWA palette

29. Preview pane background (no items)

 
Was this page helpful?
(1500 characters remaining)
Thank you for your feedback

Community Additions

ADD
Show:
© 2014 Microsoft