Exchange 2003 Outlook Web Access Themes
By Lee Derbyshire
Introduction:
Ever since Outlook Web Access (OWA) was first introduced, Exchange Administrators have attempted to customize its appearance; either to present a corporate appearance to the end user, or sometimes (like me) just for a challenge. OWA 5.5 was not easy to customize, but anyone brave enough to open those .ASP files in Notepad could usually work out what was going on (given sufficient time) and make some small changes, such as loading different images and so on.
When those same people attempted to do the same with OWA 2000, they were surprised to find no .ASP files at all; and generally gave up trying to do anything with it. It is hard to work out where the content is coming from, and JavaScript is not a pleasant language for the non-expert programmer to learn.
In an attempt to provide some degree of customization in OWA 2003, Microsoft have introduced the concept of Themes. There are five built-in themes in OWA 2003, and you can see a list of them if you select the color scheme drop-down box in the Appearance part of the Options page (figure 1).
Fig. 1 – The list of built-in OWA 2003 themes.
Here (in figure 2) is a montage of what OWA will look like when each theme is selected in turn. They are shown in the same order as they are listed in the drop-down box; Default (blue), Olive Green, Silver, Burgundy and Dark Blue. These changes are applied on a per-user basis, so that one user’s settings do not affect another’s, and will take effect as soon as the page is refreshed.
Fig. 2 – The appearance of each built-in OWA 2003 theme.
Now, while many people will be happy with the selection available, there are always those that will never be completely satisfied with what comes ‘out of the box’. If you find yourself in that category, you will be pleased to know that it is possible to add customized themes of your own.
Procedure:
The image files for each built-in theme are located in folders named 0, 1 ,2 ,3 and 4; each within a folder named Program Files\Exchsrvr\exchweb\themes . One simple way of adding a theme of your own would be to modify the .gif files and the .css file located in one of these folders, but I would suggest that it is better to add your own, since they may well be replaced when you install a service pack. However, if you have specified a mandatory theme by adding a DefaultTheme REG_DWORD registry value under the HKEY_LOCAL_MACHINE\System\CurrentControlSet\Services\MSExchangeWEB\OWA key, be aware that you can’t (at the time of writing) set a custom theme to be the default – the two features are currently incompatible.
The easiest way to get started is to copy one of the folders (and all its contents) and paste it into the themes folder, and then rename it to something appropriate. Here, in figure 3, you can see my own copied and renamed folder called Custom1 :
Fig. 3 – The folders containing OWA theme images.
Let’s take a look at the images by enabling the Thumbnails view (figure 4) from the Explorer menu bar. At first sight, the images don’t look very familiar, but it is important to remember that some of them will be stretched horizontally across the buttons when you see them on the screen.
Fig. 4 – Thumbnails view of the OWA theme images.
The names of the images are rather cryptic, but the most interesting ones are logo2.gif, and the ones with nb in the name. nb, in this context, stands for navbar, and you will probably recognize the images as those used as the background to the various elements that make up the left-hand OWA navigation bar. The nin-bg.gif file is used as the background image for new mail pop-up notifications. The significance of the OWAcolors.css file will be apparent to those familiar with Cascading Style Sheets. For the purposes of this demonstration, I’m going to make a small change to the colour balance of each image file in MS Photo Editor. You will see the results later; do not be surprised if they are not particularly attractive.
If you know how CSS works, have a look at the .css file. There are lots of entries in there, and it’s hard to work out what each does. I’m going to make a small change to the background-color style definition of the .msgViewer class by setting it to #FFFFAA (figure 5). This will make the central window appear yellow in colour. You can use HTML colour names or hexadecimal #RRGGBB values here.
Fig. 5 – A (small) part of the OWAcolors.css file.
To activate your new theme, you will need to add a registry entry. You should back up your registry now before proceeding; an incautious mistake in the registry editor can cause significant damage to your server’s operation.
You will need to add a registry key named themes underneath the HKEY_LOCAL_MACHINE\System\CurrentControlSet\Services\MSExchangeWEB\OWA key, then add a string (REG_SZ) value for each theme you wish to add. Give the new registry string value the same name as your new custom theme folder. The string will have a value that is calculated as follows; there are several parts, each separated by a semicolon:
1. A unique, non-negative, theme id. I have used the number 100 in this example so as not to conflict with any existing themes – any successive themes will need to use different numbers.
It looks something like this: id=100
2. A theme title that will appear in the OWA drop-down list of available themes.
It looks something like this: title=Custom Theme 1
3. A colour definition named bgcolor. This is, strangely, not actually used as the page background colour, but as the frame border colour. The colours need to be defined using the #RRGGBB notation, where RR, GG and BB are two-digit hexadecimal values (from 00 to FF) representing the Red, Green and Blue components of the colour you are creating. I am using #FFFFAA, which is yellow.
It looks something like this: bgcolor=#FFFFAA
4. The path, relative to the themes folder described above, to the folder containing the images and the OWAcolors.css file that define your theme. This will most likely be just the folder name. Note that the path name cannot exceed 256 characters.
It looks something like this: path=Custom1
So, for my example, the complete string value will look like this (remember that each element is separated by a semicolon):
id=100;title=Custom Theme 1;bgcolor=#FFFFAA;path=Custom1
If your theme definition does not conform to these (fairly restrictive) conditions, then it will be ignored. You can see my example located in the registry in figure 6; the full registry path to the value is also shown in the Registry Editor status bar at the bottom:
Fig. 6 – The registry entry necessary to active the custom OWA theme.
Once you have made the registry entry, the new theme will available in your OWA Appearance drop-down list within a few seconds. Here, in figure 7, is my own example. I did say that it wouldn’t be very exciting, didn’t I, but at least it will give you an idea of what you can do.
Fig. 7 – My custom OWA theme in all it’s glory 🙂
If your own theme does not appear listed in the drop-down box, re-check the value you entered into your registry. You will not get any error messages if you make a non-conforming entry; all that will happen is that your theme will not be available to select from the drop-down list.
It is likely that the themes capability of OWA 2003 will be expanded in the future. I suggest searching the MS Web site for any articles describing future enhancements if you have a particular interested in OWA themes.
Update added 30th March 2005:
If you are applying your custom OWA theme in a Front-End/Back-End Exchange setup, then any images you are adding need to go on the FE server, while any registry entries you make need to go on the BE server. My thanks to Arian van der Pijl for this extra information.
If you would like us to email you when Lee Derbyshire releases another article on MSExchange.org, subscribe to our ‘Real-Time Article Update’ by clicking here. Please note that we do NOT sell or rent the email addresses belonging to our subscribers; we respect your privacy!
