Create a theme for Outlook Web App

A theme defines the background color, fonts, highlight colors, icons, and header that are used by Microsoft Outlook Web App. Each theme is a collection of media files and cascading style sheets (.css) files that are stored on the Microsoft Exchange server in the installation directory in \Client Access\OWA\prem\version\resources\themes. Each theme is stored in its own subdirectory of \themes.

The default theme is found in \Client Access\OWA\prem\version\resources\themes\base. Each theme folder contains all the files that are needed to define a theme. These files include CSS files, graphics, and an .xml file that defines the name of the theme. Additional themes are created by copying all the files from one theme into a new folder and modifying those files as needed.

By default, multiple themes are installed when you install Exchange Server 2013, as follows:

CSS (.css) files define colors, gradients, and fonts.

Image (.png) files provide the icons and other graphic elements. If you edit any of the icons, don't change their size. If you change the size of any graphic elements, test your changes to verify that the elements still fit together correctly.

These files are stored on the Client Access server in the installation directory in \Client Access\OWA\prem\<version>\resources\themes. Each theme is stored in a subdirectory of themes. You can create additional themes by copying an existing theme and modifying the copy.

If you have multiple servers that support Outlook Web App, you must copy your custom theme to each server. You should also create a backup copy of your custom theme. If you reinstall or upgrade Exchange, all files in the themes folders will be overwritten. You'll have to copy your theme back to the appropriate folder after the reinstallation or upgrade is complete.
Make backup copies of all the files that you'll be changing before you start to create your custom theme.

You need to be assigned permissions before you can perform this procedure or procedures. To see what permissions you need, see the "Outlook Web App virtual directories" entry in the Clients and mobile devices permissions topic.

You need local server administrator access to perform these procedures.

You’ll need a text editor to change the default colors, and a graphics editor to change the images. If you must match a specific color and you can't find a match for it at Color Table, you can use an image editing tool to sample a color and determine its HTML RGB value.

As a best practice, we recommend that you use the following guidelines any time that you change or create an Outlook Web App theme:

If you decide to edit an existing theme, make backup copies of the original files before you start editing them.

Do not delete the folder \Client Access\OWA\prem\version\resources\themes\base or any of the files in it.

If you want, you can change the sort order of the new theme by editing the themeinfo.xml file. The sort order determines the theme position in the Change theme panel in the Settings menu.

To change the sort order of the new theme by using the themeinfo.xml file, do the following:

Open the copy of themeinfo.xml that’s in the custom theme folder.

Find the theme sortorder value, and change the value to reflect where you want your new theme to appear in the list. The themes will be ordered by the numeric value in increasing order. By default, the base theme is the first one and its sortorder value is “0”. For example sortorder="<number>".

Theme images are stored in two folders in \themes\<theme name>\images\. The \images\0 folder contains images that will be used in left-to-right languages (like English), and languages that are read from right to left will use the images in the \images\rtl folder.

Note:

Some of the images in the \images\rtl folder are the same the images as in the \images\0 folder, but they’re mirrored.

To customize the theme, you can use an image editing tool to open and modify the following images:

Headerbgmain.png

This is the main header image. We recommend that the image doesn’t exceed the header height of 30 pixels. The default theme doesn’t use a background image, so this image is transparent. For an example of a theme that has a custom background image, see the image in the Blueprint theme folder.

Headerbgright.png

This is used as a tiling image behind the header. The default theme doesn’t use a tiling background image, so this image is transparent. For an example of a theme that has a custom tiling background image, see the image in the Blueprint theme folder.

sprite1.mouse.png

This contains most of the images used in a theme. You can change the color of the images to match your theme, and also change the default Outlook Web App text logo.

To avoid any issues, don’t change the size of any individual icons in the sprite, and make sure that it’s saved as a transparent .png file.

themepreview.png

This image will be used to represent the theme in the Change theme panel in the Settings menu in Outlook Web App.

Cascading style sheet (.css) files define the colors and fonts used in a theme and are stored in multiple folders under \themes\<theme name>. The \<theme name>\0 folder contains .css files that will be used in left-to-right languages (like English), and languages that are read from right to left will use the .css files in the \<theme name>\rtl folder. There are also language-specific folders, (for example, \ja, \ko, \zhs, and \zht) that contain .css files to be used with those languages.

Start by modifying the \<theme name>\images\0 folder. There are four colors used throughout each theme that can be customized.

BrandColor: #0072C6

NavBarHoverColor: #4C9CD7

UnreadColor: #2A8DD4

FocusColor: #DFEDFA

You can use a text editor like Notepad to search for and replace all the instances of these values with the colors of your theme in the following two files: owa2styles.mouseCSS and owa2styles2.mouseCSS. This has to be done in every folder in your new theme that contains those .css files.

This example sets the default theme for Outlook Web App, where the server name is fourthcoffee, the virtual directory name is owa, the website name is default web site, and the theme is in the folder named Custom.

If you add or change a theme, change the name of a theme, or change the sort order of a theme, you must stop and start Internet Information Services (IIS) for the change to take effect. To do this, open a Command Prompt window on the server where you’ve created your new theme, and run the command iisresest /nforce.

Sign in to Outlook Web App using the virtual directory on the server where you’ve created your new theme. If you’re testing the changes to the default website on the Exchange server that’s hosting the Outlook Web App virtual directory, you can test your theme by opening Internet Explorer and entering the URL https://localhost/owa.

On the General tab, under Browsing history, select Delete, and then verify that Temporary Internet files and website files is checked. Then select Delete to remove those files.

Select OK to close Internet options.

Select Refresh to see your changes.

You may have to repeat these steps to see your changes every time that you make a change to the theme files. If you’re making several changes, you can leave Outlook Web App open and repeat running iisreset/noforce on the server and clearing temporary files from Internet Explorer as needed.