Owa özelleştirilmesi

Customizing the Look of Outlook Web Access

By Darcy Jayne

One way to impress your users and management is to customize Microsoft Office Outlook Web Access by using your organization's logo and colors. Customizing Outlook Web Access is a great way to help build an identity for your organization into a tool that many users rely on.

In this article, we'll show you how to customize the logon, language selection, and logoff pages, and how to create a theme by using a custom header. If you want to create an Outlook Web Access theme that has more complex changes for your organization, begin by studying how cascading style sheets (.css files) work. After you have developed a good understanding of .css files, change a few elements at a time and test your changes to make sure that the result is what you expect.

 What's in a Theme

A theme, which is known as a color scheme in Outlook Web Access Options, defines the background color, fonts, highlight colors, icons, and header that are used by Outlook Web Access. By default, two themes are installed when you install the Client Access server role on a computer that is running Microsoft Exchange Server 2007. The default themes are Seattle Sky and Carbon Black.

Each theme is a collection of media files and cascading style sheets (.css files) that are stored on the Client Access server in the installation directory in \Client Access\OWA\version\themes. Each theme is stored in its own subdirectory of \themes.

The default theme, Seattle Sky, is the base theme and is found in \themes\base. The base 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 selected files into a new directory and modifying those files as needed. When a custom theme is used, the elements in the directory of the custom theme are used first, and any necessary elements that have not been customized are drawn from the base theme. For example, if you create a new theme by copying only the header graphics to a new theme and modifying them, when a user selects that theme, the header graphics will come from the new theme, and the rest of the theme properties will come from the base theme.

 New in Exchange 2007 SP1

Outlook Web Access added two additional themes in Exchange Server 2007 Service Pack 1 (SP1). The two new themes are Xbox and Zune.

 Before You Get Started

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

• Always make backup copies of the original files before you start editing them, especially when you are editing files in the \themes\base directory.
  
  
• Do not delete the folder \Client Access\OWA\version\themes\base or any of the files in it.
  
  
• Do not change the information bars that appear at the top of messages to warn users about potentially harmful content, phishing attacks, viruses, and blocked or missing content.
  

 Creating a Theme

To start, you'll create a folder for a new theme, and then copy a subset of the files from the base theme into the new folder.

1. Log on to the Client Access server that is hosting Outlook Web Access by using an account that has been delegated membership in the local Administrators group.
   
   
2. Open Windows Explorer, and then find the Exchange server installation directory.
   
   
3. In \Client Access\OWA\<version>\themes, create a new folder and name it, for example, Fourth Coffee.
   
   
4. Copy the following files from the base theme to the new folder:
   
   
   
   
   • premium.css
     
     
   • owafonts.css
     
     
   • logopt.gif
     
     
   • logopb.gif
     
     
   • nbbkg.gif
     

Naming the New Theme

You can name a custom theme in two ways. The first way is to give the folder in which you created the new theme the name that you want it to have. For example, because we named the new folder Fourth Coffee, the new theme is automatically named Fourth Coffee.

You can also name a custom theme by copying the themeinfo.xml file from the base theme to the new folder and then editing the file. You can edit the themeinfo.xml file by using a text editor such as Notepad to change the theme display name to the theme name that you want it to have. The themeinfo.xml file will override the folder name as the name of your theme.

To name your new theme by using the themeinfo.xml file, do the following:

1. Copy the themeinfo.xml file from the base theme folder to the folder named Fourth Coffee.
   
   
2. Open the copy of themeinfo.xml that is in the custom theme folder.
   
   
3. Find the theme displayname value, and change the value to Fourth Coffee Theme.
   The file should read theme displayname = "Fourth Coffee Theme"
   
   
4. Save and close themeinfo.xml.
   

Note:
If you change the name of a theme, you must stop and start IIS for the change to take effect. You can do this by opening a Command Prompt window and using the command iisreset/noforce.

Creating a Custom Header

Now that you have copied over the files and have named your theme, try customizing the header. To change the header in Outlook Web Access, you will need the following files, which you already copied to the folder for your new theme:

• premium.css
  
  
• owafonts.css
  
  
• logopt.gif
  
  
• logopb.gif
  
  
• nbbkg.gif
  

Premium.css and owafonts.css define the fonts and colors that are used by Outlook Web Access. Logopt.gif, logopb.gif, and nbbkg.gif are the image files that are used to create the header at the top of the page in Outlook Web Access.

1. Start by using an image editing tool to open and modify logopt.gif.
   
   
2. As an example, you'll change the background color of logopt.gif to mauve with an HTML RGB value of #DCBEC8. Edit logopb.gif and nbbkg.gif to have the same background color.
   

An HTML RGB color value is defined by a seven character string in the format of the number sign (#) followed by a string of six characters.

To test your custom theme, log on to Outlook Web Access Premium (do not select the Use Outlook Web Access Light option), click Options, click General Settings, and then select your custom theme from the Appearance menu. You must save your changes and then click Refresh to see the new theme.

The following figures illustrate the original files that are used to create the header for the Seattle Sky Outlook Web Access theme and the new header created by modifying those files.

Outlook Web Access header files

 

Outlook Web Access custom header

 

 Changing the Default Outlook Web Access Theme

Now that you have created a new theme and customized the header, try setting it as the default theme for Outlook Web Access. To change the default Outlook Web Access theme from the base theme to your custom theme, you will use the Set-OwaVirtualDirectory cmdlet. For the examples that follow, you'll use "FourthCoffeeCAS" for the server, "owa" for the virtual directory, "Default Web Site" for the Web site and "Fourth Coffee" for the folder name.

• To set the default theme for Outlook Web Access to Fourth Coffee, run the following command: set-owavirtualdirectory -identity "fourthcoffeeCAS\owa (default web site)" -defaulttheme "fourth coffee"
  

Note:
If there are no spaces in the folder name, you can omit the quotation marks.

If any users have already logged on to Outlook Web Access and selected a theme, they won't be forced to the new theme. To guarantee that all users are using the new theme, you will have to disable theme selection. You will use the Set-OwaVirtualDirectory cmdlet to do that, also.

• To disable theme selection in Outlook Web Access, run the following command: set-owavirtualdirectory -identity "fourthcoffeeCAS\owa (default web site)" -themeselectionenabled $false
  

You can complete both commands at the same time by running the following command: set-owavirtualdirectory -identity "fourthcoffeeCAS\owa (default web site)" -defaulttheme "Fourth Coffee" -themeselectionenabled $false

 Customizing the Logon and Logoff Pages

A custom theme is a great way to provide a custom look to Outlook Web Access after users have logged on, but a custom logon page will be noticed right away. Outlook Web Access uses only the base theme logon, language selection, and logoff pages. Therefore, you must modify the files in the base theme folder to create custom pages.

The text styles, colors, and background colors of the logon, language selection, and logoff pages are defined by the logon.css file. The pages are created by combining a set of images that are stored as .gif files. The following files create the logon page:

• logon.css
  
  
• lgnbotl.gif
  
  
• lgnbotm.gif
  
  
• lgnbotr.gif
  
  
• lgnexlogo.gif
  
  
• lgnleft.gif
  
  
• lgnright.gif
  
  
• lgntopl.gif
  
  
• lgntopm.gif
  
  
• lgntopr.gif
  

You're going to create a new look by modifying these files to create a set of custom logon and logoff pages for Fourth Coffee. To keep things simple, you'll use a solid color for the background in all images.

First, create a new folder in the base theme folder and name it "backup". Copy all the files that are used to create the logon and logoff pages to the new folder so that you have backup copies in case you want to go back to the original logon and logoff pages. The base theme folder is in the Exchange installation directory at \Client Access\OWA\version\themes\base.

The following figures illustrate the default Outlook Web Access logon page as it appears if the user clicks show explanation and selects This is a private computer and Use Outlook Web Access Light. One figure shows how the graphics files that create the page fit together. The other shows how the logon.css file determines the colors of the background and text on the logon page.

Outlook Web Access logon page that displays custom graphics files

 

Default Outlook Web Access logon page that displays text options

 

The following figures illustrate the default Outlook Web Access logoff page. One figure shows how the graphic files that create the page fit together. The other shows how the logoff.css file determines the colors of the background and text on the logoff page.

Outlook Web Access logoff page that displays custom graphics files

 

Default Outlook Web Access logoff page that displays text options

 

Testing Changes to the Logon and Logoff Pages

You can test your changes as you make them by opening the Outlook Web Access logon page in Internet Explorer, and using the following steps, saving after each change. 

1. Open the Outlook Web Access logon or logoff page in Internet Explorer. If you are testing the changes to the Default Web site on the Client Access server that is hosting the Outlook Web Access virtual directory, you can test them by opening Internet Explorer and entering the URL https://localhost/owa.
   
   
2. On the toolbar, click Tools, and then click Internet Options.
   
   
3. On the General tab, under Temporary Internet Files, click Delete files, and then click Yes when you are asked whether you are sure that you want to delete all temporary Internet Explorer files.
   
   
4. Click OK to close Internet Options.
   
   
5. Click Refresh to see your changes.
   

Repeat these steps to see your changes every time that you make a change to the logon or logoff page files. If you are making several changes, you can leave the logon or logoff page open and repeat Steps 2 through 6 to see your changes.

Customizing the Image Files

Now that your original files are safely backed up to a separate directory and you know how to review your changes as you go, you can modify the .gif files that are the graphic building blocks of the logon, language selection, and logoff pages.

To do this, you open lgntopl.gif using an image editing tool and modify it to your new design, shown in the following figure:

Fourth Coffee logo

 

Because we previously changed the background color of lgntopl.gif to mauve with an HTML RGB value of #DCBEC8, you will open each remaining .gif file and change its background color to match.

Finishing Touches

Now that you've edited the .gif files, you also have to edit the logon.css file so that the background is seamless. Your new background color might not work very well with the original text and dividing line colors. In addition to setting the background color to match your new logo, you will change the primary text color and the dividing line color to work better with your new pages.

All three of those colors, the background, primary text, and dividing line colors, are defined by HTML RGB values in logon.css. To change them to your new colors, you must find them in logon.css and change their HTML RGB color value to the values that you want.

To change the colors, open logon.css in a text editor, such as Notepad. Search for the string for each color element to be changed, replace the HTML RGB value with the new value based on the information in the following table, and then save and close logon.css.

Logon and logoff page elements together with descriptions

Element to change	String to search for	Description	New HTML RGB value
Background color	Background: #7F90b1	The background color of the logon and logoff pages.	Change this to match the mauve background on the modified .gif files. Change #7F90b1 to #DCBEC8
Primary text color	select, table {color:#ffffff;}	The primary text color indicates options that can be selected and entry fields on the Outlook Web Access logon page.	Change the primary text to match the letters in the Fourth Coffee logo. Change #ffffff to #5F5357
Dividing lines	#A9AAc4	All three pages that use logon.css have thin lines that divide them into sections.	Change the dividing lines to match the blue of the coffee cup in the logo. Change #A9AAc4 to #5B6D92

When you have finished, the new logon and logoff pages will resemble the following figures.

Fourth Coffee logon page

 

Fourth Coffee logoff page