Many elements of an Outlook Web App theme can be changed. To avoid creating instability in Outlook Web App, we recommend that you change only the files directly related to your custom theme.

As a best practice, follow these guidelines:

• Always make backup copies of the original files before you edit them.
  
  
• Before you apply upgrades or hotfixes to a Client Access server that has custom themes, make backup copies of those themes.
  
  
• Make only one or two changes at a time and test your changes before you make additional changes.
  
  
• Don't change files in \Client Access\OWA\<version>\themes\resources. Fonts and other settings defined by those files are used by every theme in Outlook Web App. The files can't be changed without affecting every theme.
  
  
• Themes are saved on each Client Access server. If you have more than one Client Access server, and you want a custom theme to be available on all servers, you must copy the theme to the themes directory on each Client Access server.
  
  

Looking for other management tasks related to customizing the appearance of Outlook Web App? Check out Customize the Outlook Web App Sign-In and Sign-Out Pages.

• Create a new Outlook Web App theme
  
  
• Name your custom theme
  
  
• Create a custom icon for your theme
  
  
• Create a custom header
  
  
• Use the Internet Explorer Developer Tools to determine colors
  
  
• Change colors in a theme
  
  
• Change icons and logos in a theme
  
  
• Set the default Outlook Web App theme
  
  

You need to be assigned permissions before you can perform this procedure. To see what permissions you need, see the "Graphics editor" entry in the Client Access Permissions topic.

1. On the Client Access server that hosts Outlook Web App, open Windows Explorer, and then find the Exchange server installation directory.
   
   
2. In \Client Access\OWA\<version>\themes, find a theme that uses a color scheme similar to what you want, and then make a copy of it.
   
   
3. Give the copy you just created a short name similar to the name you want to give the theme.
   
   
4. Create back-up copies of the following files in your new theme folder, in addition to any others that you'll have to change to create your theme. These copies will preserve your original settings if you have to undo your changes:
   
   
   • premium.css
     
     
   • csssprites.png
     
     
   • csssprites2.png
     
     
   • headerbgmain.png
     
     
   • headerbgright.png
     
     
5. Follow the steps in the next sections to modify the files in the new theme folder to create your theme.
   
   
6. Restart Internet Information Services (IIS) by using the iisreset/noforce command.
   
   
7. Test the new theme by signing in to Outlook Web App and selecting the new theme.
   
   

You need to be assigned permissions before you can perform this procedure. To see what permissions you need, see the "Graphics editor" entry in the Client Access Permissions topic.

1. Open the copy of themeinfo.xml that's in the custom theme folder.
   
   
2. Find the displayname value for the theme, and then change the value to the name you want the theme to have.
   
   Example: To name your theme Fourth Coffee, the file should read as follows: theme displayname = "Fourth Coffee".
   
   
3. Change the sortorder value to place your theme where you want it in the theme picker in Outlook Web App.
   
   Example: To set your theme to appear first, the file should read sortorder = 1.
   
   
4. Save your changes, and then close themeinfo.xml.
   
   
5. Stop and start IIS on the Client Access server by opening a Command Prompt window and using the command iisreset/noforce.
   
   
6. To test your changes, sign in to Outlook Web App, click Options, and then look for your new theme in the theme picker. If you don't see your theme listed, use Internet Options in Microsoft Internet Explorer to delete the temporary files. Then refresh the browser and try again to view the theme picker.
   
   

You need to be assigned permissions before you can perform this procedure. To see what permissions you need, see the "Graphics editor" entry in the Client Access Permissions topic.

To create a custom icon for your theme, you must edit the themepreview.png file. This file is the icon for your theme in the theme picker in Outlook Web App.

1. Open themepreview.png in an image editing tool and make the changes you want. Don't modify the dimensions. The image is 32x32 pixels.
   
   
2. To test your changes, sign in to Outlook Web App, click Options, and then look for your new theme in the theme picker. If you don't see the new icon, use Internet Options in Internet Explorer to delete the temporary files. Then refresh the browser and try again to view the theme picker.
   
   

You need to be assigned permissions before you can perform this procedure. To see what permissions you need, see the "Graphics editor" entry in the Client Access Permissions topic.

To change the header in Outlook Web App, you must edit the following files that are used to create the header at the top of Outlook Web App:

• headerbgmain.png
  
  
• headerbgright.png
  
  
• headerbgmainrtl.png (You only need to edit this file if you support right-to-left languages).
  
  

1. Open the .png files in an image editing tool and make the changes you want. Don't modify the dimensions.
   
   
2. To change the logo, use an image-editing tool that supports transparent backgrounds, such as Paint.NET or Photoshop, to open and modify csssprites.png. This file has a transparent background. Don't move or change the size of images in the file because Outlook Web App pulls each icon or logo from a specific location on csssprites.png. When you edit something in the file, you must line up the new image exactly on top of the image you're replacing.
   
   
3. After you edit the files, save your changes.
   
   
4. To test the changes to your custom theme, sign in to Outlook Web App, click Options, and then select your theme from the theme picker. If you don't see your new theme, use Internet Options in Internet Explorer to delete the temporary files. Then refresh the browser and try again to select your custom theme.
   
   

Internet Explorer 8 and Internet Explorer 9 include developer tools that let you determine the colors and fonts of specific elements and test modifications to those values. You can then use the information from the developer tools to locate those values in the .css files and modify them there to customize a theme.

1. Sign in to Outlook Web App and select any theme.
   
   
2. Go to a module that shows the element you want to customize. For example, if you want to customize the highlight color in Mail, go to Mail.
   
   
3. In Internet Explorer, go to the program toolbar and select Tools > Developer Tools, or press F12.
   
   
4. Arrange your windows so that Outlook Web App and the Developer Tools windows don't overlap.
   
   
5. In Developer Tools, click the select arrow at the left of the toolbar or press CTRL+B.
   
   
6. Move the pointer over the section of Outlook Web App that you want to customize. You'll see an outline around each element as the pointer passes over it. Click when the element you want to change is outlined.
   
   
7. Look in the Developer Tools window. You'll see the code that's used to build the page, and the element you selected will be highlighted in the left window.
   
   
8. Look in the right window for the color of that element. It will be an RGB value, which is expressed as a seven-character string starting with a # and followed by six alphanumeric characters. For example, white is expressed as #ffffff.
   
   
9. If you don't see an RGB value, repeat the preceding steps and try again.
   
   
10. When you find an RGB value, change it to the value you want, and then press Enter. The change will show up in Outlook Web App almost immediately. This doesn't change the theme, only the local settings and only for the current session.
    
    
11. The right pane of Developer Tools shows you what file the value is in and where to find it in that file.
    
    
12. After you find the value that you want to change, you must go the folder for your custom theme on the Client Access server and modify that value in premium.css.
    
    

Note:

To find the HTML RGB values for many colors, see the Color Table in the MSDN Library. If you must match a specific color and you can't find a match for the color online, you can use an image-editing tool to sample a color and determine its HTML RGB value. The Developer Tools have a useful color picker tool. Select Tools > Show Color Picker from the menu. To determine the RGB value of a color you want, position the mouse pointer over an element that has that color.

After you find the color you want to change and determine the RGB value that you want to change it to, you must find that property in the premium style sheet (premium.css) on the Client Access server and replace the existing value with the new value.

You need to be assigned permissions before you can perform this procedure. To see what permissions you need, see the "Graphics editor" entry in the Client Access Permissions topic.

1. Open the premium.css file in your custom theme by using a text editor such as Notepad.
   
   
2. In the file, search for the value that you found using the Internet Explorer tools.
   
   
3. Replace the RGB value with the RGB value of the color that you want.
   
   
4. To test the changes to your custom theme, sign in to Outlook Web App, click Options, and then select your theme from the theme picker. If you don't see your changes, use Internet Options in Internet Explorer to delete the temporary files. Then refresh the browser and try again to select your custom theme.
   
   

You need to be assigned permissions before you can perform this procedure. To see what permissions you need, see the "Graphics editor" entry in the Client Access Permissions topic.

To change the icons and logos in a theme, use an image editing tool that supports transparent backgrounds, such as Paint.NET or Photoshop, to open and modify csssprites.png and csssprites2.png. These files have a transparent background that must be preserved to correctly display the individual elements. Don't move or change the size of images in the file because Outlook Web App pulls each image from a specific location in the file. When you edit something in the file, you must place the new image in exactly the same location as the image you're replacing.

To change an image:

1. Use an image editing tool that supports transparent backgrounds to open the file that contains the graphic elements you want to change.
   
   
2. Edit the element that you want to change, being careful to preserve the location and size of the original element.
   
   
3. Save and close the file.
   
   
4. To test the changes to your custom theme, sign in to Outlook Web App, click Options, and then select your theme from the theme picker. If you don't see your changes, use Internet Options in Internet Explorer to delete the temporary files. Then refresh the browser and try again to select your custom theme.
   
   

When you set a default theme, only users who haven't previously signed in to Outlook Web App and selected a new theme will be forced to use the default theme.

To force all users to use the default theme, you must disable theme selection in addition to setting a new default theme.

Use the Shell to set the default theme for Outlook Web App

You need to be assigned permissions before you can perform this procedure. To see what permissions you need, see the "Outlook Web App virtual directories" entry in the Client Access Permissions topic.

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

	Copy Code
set-owavirtualdirectory -identity "fourthcoffee\owa (default web site)" -defaulttheme Custom

For detailed syntax and parameter information, see Set-OwaVirtualDirectory.

Use the Shell to disable theme selection for Outlook Web App

You need to be assigned permissions before you can perform this procedure. To see what permissions you need, see the "Outlook Web App virtual directories" entry in the Client Access Permissions topic.

This example disables theme selection in Outlook Web App where the server name is "FourthCoffee", the virtual directory name is "owa", and the Web site name is "Default Web site".

	Copy Code
set-owavirtualdirectory -identity "fourthcoffee\owa (default web site)" -themeselectionenabled $false

You can also complete both commands at the same time as shown in the following example:

	Copy Code
set-owavirtualdirectory -identity "fourthcoffee\owa (default web site)" -defaulttheme Custom -themeselectionenabled $false

For detailed syntax and parameter information, see Set-OwaVirtualDirectory.

After you create a theme, you may also want toCustomize the Outlook Web App Sign-In and Sign-Out Pages.