A theme in OWA is a collection of media (e.g. .GIF and .WAV files) and .CSS files. These files are installed in folders under in the vroot under ‘version\themes’.
Out of the box, we ship with three themes: blue “Seattle Sky” (folder name ‘base’) and black “Carbon Black” (folder name ‘1’) and a mountain image “Olympic Sunrise” (folder name ‘2’). Customers can add more themes by creating new folders and adding their own customized files.
We recommend here that you optimize your theme by changing only the logo, top banner area and the selection highlights so the theme will have less potential for destabilization and bugs. Using very bright or very light dark for the selection colors and the top banner are not advised – try to use subtle or primary colors for the banner area and medium-hued colors for the selection/highlight colors. If you want to use darker or very light colors, you’ll need to also adjust the text for the appropriate level of contrast and the best legibility by testing on various monitors at different resolutions.
The base theme
The base theme lives under ‘themes\base’ and it contains all of the themeable files. Any other themes are built by overriding files in the base theme.
Say for example the base theme is made of files A, B, C and D. I can create a new theme by changing say, C and D, and leaving A and B untouched. Thus for the new theme, C and D will come from the new theme folder, while A and B will come from the base theme.
What’s in a theme folder
The two most important types of files in a theme folder are icons (GIF files) and styles (CSS files). Specifically, premium.css is the style sheet file for Premium OWA (the OWA Light client is not themeable).
Premium.css can be edited to change things like colors, gradients and font styles.
The GIF files can be edited to change any icons in the UI. Keep in mind that the sizes of the images should not be changed.
This is an improvement over Titanium, where only a handful of GIFs could be themed (the logo and a couple of others), and only the colors in the .CSS file could be changed.
How to install a theme
Create a new folder under version\themes (e.g. “themes\viayoga”).
Copy the files from the base theme that you will want to alter for your new theme. If for example, you want to change the logo, then copy ‘logop.gif’ from ‘themes\base’ to ‘themes\viayoga. The viayoga folder at this point will contain only one file. If you also want to change some of the styles, then copy premium.css. You can do this with any files in the base theme. As they are copied to the new theme folder, the theming engine will pull the modified files from the ‘viayoga’ folder while still using the unchanged files from the ‘base’ theme.
You can give a name to the theme in two ways:
Adding a file called themeinfo.xml and specifying the name in it (see below).
Leave it like this, and the name will come from the folder name (in this case, “viayoga”).
Restart IIS so OWA automatically picks up the new theme.
The syntax of this optional file is very simple:
<theme displayname=”theme name“/>
If present, the value of the displayname attribute is used as the name of the theme.
The themes we ship with contain a macro like this:
…which we use internally to map to localized strings.
How to create themes
First, start by setting up the theme without changing any files. Create a new folder under themes (call it ‘test theme’), then copy premium.css, logopt.gif, logopb.gif and nbbkg.gif (the files for the top banner “brand bar”) to begin with, which are probably the first files that you will be editing for your theme.
Changing the top banner can be done most easily using a solid color or a vertical gradient similar to what is already in place. Your custom nbbkg.gif (repeating background image) can be any width but must remain the same height.
If you want to include a more complex or interesting image as your background, be sure to create the right and left edges as a mirror so that the strip meets when it repeats and appears as a single image so it will work on a variety of screen resolutions. Or, you can create one long image for the target width you’d like to support.
Looking at these files in an image editing tool, you can see that logopt.gif and logopb.gif are the top and bottom of the OWA logo including a background, and nbbkg.gif is a gif that repeats as the background.
We split the images up so that we can add “Connected to Microsoft Exchange” as a live text string that can be localized into different languages. You can create one image and remove this string by editing the style sheet. Simply add “display:none” to the tdLogoB class, then save your image as one piece, 238 x 49 pixels, and edit the height of the image here:
As an example, we created a theme for a Seattle yoga company that provides yoga retreats and surfing lessons in Mexico (yes, you should go!).
We removed the “Connected to…” string by editing the style sheet as shown above. You can see how it looked before and after editing the style sheet and adjusting the images slightly. The background image is simply filled with a solid, bold color. The resulting background image – nbbkg.gif – only needs to be 1 pixel wide.
Changing colors and other styles in premium.css is the tricky part:
Use an image editing tool like PhotoShop or PainShop Pro to take screenshots and sample colors that you want to change. For instance, to change the yellow color of the selected module in the secondary navigation:
First, obtain the html RGB values (#RRGGBB) for that yellow: that value is #FFEFB2.
Then look for this in premium.css:
/* NavBar buttons selection color */
Here’s where the tricky part comes. In debug builds, we know this is the color because in most cases we have a comment above the style. As an OWA dev, we also have access to the sources so we can verify this is the color we want. For people without access or familiarity with the source code, this is a trial and error process: guess if this is the right style by the name of the class (which is relatively hard, because our names are shortened and not too easy to decipher unless you are an OWA dev), then apply the change, refresh your browser and see if you are lucky.
Continue changing the colors until the theme is starting to look right to you. For some pieces of the interface, there are two values specified for each end of a gradient, when a lighter color blends into a darker color. These work best with lighter hues of colors.
When creating your theme, you may find a color and want to do a straight find and replace action on the entire style sheet file. Be careful when doing this. For the areas defined as gradients (Find = “gradient” to see all the instances of these) you might accidentally change all the light grays to your new highlight color. Try saving and refreshing your build with your new theme selected in Options > General Settings > Appearance in order to make sure you’ve changed only the intended elements.
We don’t recommend changing the colors of the red and yellow informational messages that appear at the top of the message forms, alerting users to potentially harmful content, phishing attacks, viruses and blocked or missing content. We call these “infobars” (non-phishing are yellow:#FFEFB2 ) and “error infobars” (errors and phishing alerts are light red:#FFAEB9). There is also an infobar for meeting conflicts on meeting invitations:
/* Non-phishing infobar messages */
div#divIB div#dvExp, div#divIB div#dvInf, div#divIB div#dvExpErr, div#divIB div#dvErr,
border:solid 1 #FDD981;
/* Phishing */
border:solid 1 #FF99CC;
Main Selection Colors
Selection in mail list is probably one of the most important highlight colors. This is the color over the selected message which tells users what item they are currently reading. There is a primary color to indicate focus and a secondary highlight color that is slightly lighter to show selection when the focus moves away from the item, like the currently selected folder or the current day in the Calendar. For each theme, these two colors are the same color that we use for the primary and secondary highlight colors.
Shown below, the primary color is on the left, the secondary color on the right. You can see the difference is quite subtle.
In the premium.css style sheet, this highlight in the mail list is specified as:
tr.sel, tr.srsel, tr.lrsel
tr.shdw, tr.srshdw, tr.lrshdw
In order to change icons, the process is quite similar, find out which icon it is you want to change in your theme, copy it to your theme folder and then change it there. Then verify the change in the product with your new theme name selected. We use .gif files with transparent backgrounds. Make sure to keep the image sizes unchanged.
Customize the Logon Screen
To customize the logon (and log off) screen, update the images and the background color to create a custom look. You can create your own custom look and feel by updating the image files that create the logon screen. Note that the logon screen cannot be customized per theme since the user needs to enter their credentials and be authenticated prior to accessing their own user settings (theme selection) for each session. Therefore, you’ll need to directly manipulate the files in the base folder starting with the style sheet “logon.css” and the images that create the border and the main logo for the screen.
The screen is made up of several images for the border top, bottom, sides and also includes repeating images and corners for expansion. The images that create the logon screen are:
To create a new look and feel, using a solid color is easiest since the screen uses the same collection of images for several screens and resizes horizontally and vertically based on the contents for each screen: logon, language selection (shown on the first logon per mailbox), and the log off screen that’s shown each time the user presses the Log Off button.
Before changing the images, you can make a backup of the image files in case you need to revert your changes to the original configuration. Start by opening the Microsoft Outlook Web Access logo (lgntopl.gif):
…and change it to your own company logo:
Here is a general idea of how all of the new image files will fit together on the logon screen:
Logon Screen: background color
Editing the logon.css is necessary if you want to change font styles and other colors, including the background color that exists behind the controls in the middle of the screen. Currently the background color is specified as #7F90B1. For our custom logon for Via Yoga, we need to replace this with orange #E48310 for the area behind the controls that is not colored by the other images.
Logon Screen: active text color
The active text color on the existing OWA logon screen is yellow: #F8D328 since that stood out best on the blue background as a secondary font color. We’ll want to change this for Via Yoga, but we still want the primary white text to come into focus first so we’ll leave all that text white. We’ll change the active text to the same blue used elsewhere in this theme to indicate that something is active or “clickable.” That blue RGB value is #266CBC. Do a find and replace to make this color change in the logon.css.
Logon Screen: final details
After logging off, this is looking pretty good, but the lines used to separate text and form elements are hard to see in the existing gray #A9AAC4. Open the logon.css file and find that color value. Change it to something a little lighter than your background but darker than the text so that the text still stands out as the most important information on the screen. We replaced the gray with a light orange RGB value #FFC279.
Voila – looks good:
Good Luck creating your theme!