Recipe8.12.Creating OWA 2003 Themes

Recipe 8.12. Creating OWA 2003 Themes

Problem

You want to create a new theme or skin for OWA 2003 to make it more compatible with your organization's existing web applications.

Solution

Using a graphical user interface

To create the new files for your theme, do the following:

Log on to the Exchange Server computer running OWA.
Open Windows Explorer and navigate to the \Program Files\Exchsrvr\Exchweb\Themes directory.
You should see five existing directories named 0 through 4. These directories represent the themes that ship with Exchange Server 2003. Copy one of these directories to a new directory and rename it to an easy-to-remember identifier. It does not have to be a number.
Go into this new directory. You should see nine graphic files and a CSS file named OWAColors.css.
Edit the graphic files to match your desired appearance, but don't change their dimensions.
Edit the contents of the OWAColors.css file to change the various color elements used by OWA to complement the colors in your altered graphic elements.
Register your theme so it can be tested.
When you are happy with your theme, copy this folder to all of your OWA servers. Be sure to register the theme on all of them.

To register your theme so that it's visible to OWA users through the Options page, do the following:

Log on to the Exchange Server computer running OWA.
Open Regedit and navigate to the key HKEY_LOCAL_MACHINE\System\CurrentControlSet\Services\MSExchangeWeb\OWA\Themes.
Create a new string value under the above subkey. You can name this value whatever you like, but this name should probably match the name of the theme directory or the desired display name for the theme so you can easily tell which entry belongs to which theme.

Add the following string as the contents of the new value (see the Discussion section for more on what these fields mean):

id=<Hex or decimal ID string> ;path=<name of the theme directory> ;title=<theme title> ;    bgcolor=<Web hex color string for background color>

Log into OWA on the server. Click the Options button and click Appearances . Ensure that your new theme is visible in the list of theme choices.

To create a custom logon page, do the following:

Log on to the Exchange Server computer running OWA.
Open Windows Explorer and navigate to the \Program Files\Exchsrvr\exchweb\bin\auth directory. Locate the directory that contains the desired language localization and navigate into it (usa for United States English).
Open the logon.asp file in your text or HTML editor. This page contains the logic and static HTML for the forms-based authentication page. Editing the contents of this file is beyond the scope of this book.
When you are happy with the behavior of your new logon page, edit the logon.asp file in each locale subdirectory that will be used on your servers.
Copy these modified files to the corresponding directories on all of your OWA servers.

Discussion

In Exchange Server 2003, OWA has become an extremely mature web-based messaging application, which is why so many companies use it. One of the biggest requests about OWA was a way to make it easier to brand it with custom graphics, colors, and other visual elements; Microsoft responded by providing the ability to easily create additional themes. The process is, in theory, simple: create your new theme elements, put them in the proper place on the server, and register them so OWA knows to offer them. As always, the devil is in the details. Creating new themes is not difficult, but when you do so, you must remember that you are working with a complex web page and that changes that seem small can have a large impact on the final result's appearance.

To change the basic theme, you'll need to make changes to one or more of the ten files detailed in Table 8-4. For the most part, you shouldn't try to change the size of the graphic elements; you will either throw off the spacing or cause the element to be scaled oddly to fit into a predetermined space. Be aware that the graphic elements with a width of 1 pixel are tiled horizontally to create the display element; this drastically reduces file sizes and bandwidth use.

Table 8-4. OWA theme editable files
Filename	Width	Height	Purpose
OWAColors.css	n/a	n/a	CSS definitions of the colors used in the theme.
logo2.gif	179	36	As it states, this is the logo. Keeping your replacement graphic at the same display ratio will ensure that your finished theme doesn't cause odd displacements.
nb-bkgd.gif	1	2	The background color or pattern (default is a color gradient) for the left navigation bar.
nb-hide-ql.gif	50	8	The control to click to hide the navigation bar. Should be matched with nb-show-ql.gif and nb-ql-tgl.gif.
nb-ql-tgl.gif	1	2	The background for the hide/show control. Should complement nb-show-ql.gif and nb-hide-ql.gif.
nb-sel-bkgd.gif	1	2	The background color for selected icons in the navigation bar.
nb-show-ql.gif	50	8	The control to click to reveal the navigation bar. Should be matched with nb-hide-ql.gif and nb-ql-tgl.gif.
nin-bg.gif	130	1	The background used for the pop-up new mail notifications ("toast").
resize-dot.gif	1	1	A spacer graphic element that is not used in any visible way. You should not need to edit this element.
tool-bkgd.gif	1	3	The background color for unselected icons in the navigation bar and for the toolbar across the top.

Registering your theme can be somewhat tricky. Although you only have one registry entry to create, the contents of the string must be properly formatted. If you make an error, Exchange will not create a log entry or otherwise tell you that something is wrong. You will merely be unable to choose your theme. The fields can come in any order but must be separated by semicolons and need to be formatted as follows:

id= <Hex or decimal ID string>;: This ID string can be in either hex or decimal format. The built-in themes use 0-4; you should probably use something in a higher range so that you don't cause a conflict if later service packs happen to add more built-in themes. The maximum value is 0x80000000 (2147483648 decimal). Whichever format you use, the theme ID has to be a number.
path= <name of the theme directory>;: This value is the relative name of the directory in which you have placed the theme files, ignoring the \Program Files\Exchsrvr\Exchweb\Themes portion of the path.
title= <theme title>;: This string is how OWA will display the theme in the selection list.
bgcolor= <Web hex color string for background color>;: This string controls one of the background color elements, which is mainly visible as borders around other areas. It is a regular six-digit hexadecimal RGB value as used for Web color selections; #FFFFFF is white and #000000 is black.

The purpose of a theme is to customize a few basic elements, not to allow you to completely change the look and feel of any element on the form. If you want to make changes to the various icons and elements not included in a theme, you can find the files in the \Program Files\Exchsrvr\Exchweb\img directory. These files are the same regardless of theme and language. You can make changes to them, but you should again be careful to make sure that your replacement graphics are the same dimensions to avoid unintentional spacing conflicts. You should also back up these files before you change them and keep copies of your changed files, as they will be replaced by any service pack.

For a more complete branding project, you can change the logon.asp file that is initially displayed for form-based authentication. A common reason for this modification is to provide a list of regional front-end servers for companies that are spread over multiple locations, to allow users to select the front-end server closest to them easily. Microsoft does not support these modifications, so be sure to save a copy of the default files in case you need OWA support from them. There are multiple versions of these files, one for every language supported on the server. They are written in complex ASP code, so make sure you understand and thoroughly test your changes. In addition, be aware that installing a service pack or hotfix may overwrite your changes.