Using cascading style sheets to change a color in OWA

Use cascading style sheets (.CSS files) in Exchange 2007 to change Outlook Web Access theme colors, add a legal disclaimer and modify an OWA sign-on screen.

Because OWA is a Web interface to an Exchange Server backend, making cosmetic changes beyond editing or replacing images requires some Web programming. Fortunately, you can easily make cosmetic changes to OWA in Exchange Server 2007 without complicated code using cascading style sheets.

Some files that were copied to your new profile folder ended in the .CSS extension, or cascading style sheet files. A cascading style sheet is a text file that assigns values to variables. For example, instead of inserting a line into OWA's source code that tells the interface to make a particular font blue, the source code instructs OWA to assign a font color based on the contents of a variable. This variable is set in a cascading style sheet.

I'll demonstrate how to modify cascading style sheets to change the color of various OWA components. But when you modify a cascading style sheet, you can't enter a color by its name (red, blue, etc.). Colors are entered in six-digit hexadecimal formats, the values of which correspond to RGB values.

While this sounds complicated, you won't need to perform any mathematical calculations to determine the correct hexadecimal string for a particular color. You will, however, need to use an RGB color conversion chart. As you can see in Figure 7, this chart matches RGB hex values with various color samples, and can contain color codes for thousands of colors.

RGB Hex values for Exchange Server OWA color themes Figure 7. You can get the code for a particular color from the chart's RGB Hex column. (Click on image for enlarged view.)

Modifying OWA theme colors

Figure 8 shows the current OWA interface, which still has the custom header bar that was created in Part 1. It's important to note two things in this figure:

  • The Mail tab on the left side of the screen currently uses a faded yellow background.
  • The selected message is displayed with a faded yellow background color, which is known as the secondary selection color. Click on the message and the color switches to the primary selection color, which is basically the background color of the Mail folder.

Exchange Server Outlook Web Access profile Figure 8. The OWA profile controls background colors of the Mail tab and the selected messages. (Click on image for enlarged view.)

You can control all colors by editing the Premium.css file. An example of the Premium.css file is shown in Figure 9. I'm using Visual Studio 2005 to modify the file, but Notepad also works.

Exchange Server OWA Premium.css file Figure 9. An example of the Premium.css file. (Click on image for enlarged view.)

Regardless of the editor you use, modifying this file requires just a few substitutions. For example, the color of the Mail tab is controlled by the following block of code. Line breaks were inserted to make it easier to read.

a.nbHiLt { background-color:#FFEFB2; }

FFEFB2 produces a yellow color. If you want to change this color, use the text editor's search feature to locate this block of code and replace it with a color you want from the color chart. For example, using the code B0E2FF would change the mail tab's background to light blue (Figure 10).

Exchange Server OWA mail tab Figure 10. The Mail tab's yellow color was replaced with blue. (Click on image for enlarged view.)

You can use the same method to change the primary and secondary colors used to display a selected message. The default code for the primary selection color is:

tr.sel, tr.srsel, tr.lrsel { background-color: #FFEFB2; The default code for the secondary color selection is: tr.shdw, tr.srshdw, tr.lrshdw { background-color:#F8F0D2;

If you want to change these colors, search on these strings and enter the color code that you want, instead of the default colors. The Premium.css file can also be used to customize several aspects of the OWA interface. Be sure to make a backup copy of the original Premium.css file, so that no valuable information is lost when experimenting with various color combinations.

Customizing an OWA sign-on screen

Many companies are also interested in changing the OWA sign-on screen. Often, companies redesign this screen so that it displays their corporate logo and a legal statement regarding the use of the system. Figure 11 shows the default OWA sign-on screen in Exchange Server 2007. Figure 12 shows an adaptation of this screen that one company uses on its employees' systems.

Default Exchange Server 2007 OWA sign-on screen Figure 11. The default OWA sign-on screen used by Exchange Server 2007. (Click on image for enlarged view.)

Customized Exchange Server 2007 OWA sign-on screen Figure 12. Example of how the OWA sign-on screen can be adapted. (Click on image for enlarged view.)

It's important to note that a Web developer created the screen shown in Figure 12. You cannot create a sign-on screen that's different from the default screen without doing some coding. If you know ASP coding, you can find the source code for the logon screen in the server's Program FilesMicrosoftExchange ServerClientAccessOwaauth folder. The source code is contained within the LOGON.ASPX file.

More Outlook Web Access resources:
Top 10 Microsoft Outlook and OWA tips of 2007

Outlook Web Access administration guide

Cascading style sheets

If you want to add your corporate logo and some legal text to the OWA sign-on screen, or change the colors, the process is simpler. The customized OWA header bar was comprised of several different graphical elements. This also applies to the OWA sign-on screen. Some of the elements on the OWA sign-on screen are graphic files, while others are text elements that are controlled by the LOGON.CSS file.

Figure 13 shows a sign-on screen in which I have re-colored each graphical element a different color on the OWA sign-on screen. All individual image files can be found in the base profile directory.

Exchange Server 2007 OWA re-colored sign-on screen Figure 13. The OWA sign-on screen is comprised of various image files. (Click on image for enlarged view.)

Re-coloring image files is straightforward. If you want to add your own corporate logo onto this screen, it's easiest to use a graphic editor such as Photoshop to add your logo to the LGTOPL.GIF file. This is the file that currently displays the Microsoft Exchange logo at the top of the OWA sign-on screen. If you want to conceal that Exchange Server is being used, you might also color over or replace the Exchange logo located in the LGNEXLOGO.GIF file.

The LOGON.CSS file controls all other colors on the OWA sign-on sheet. Following are some elements that you can customize on this screen:

New Page 1

Element

String

Background color

Background: #7F90b1

The color of the warning text that appears when the "This is a Private Computer" option is selected

wrng{color:#f8d328}  

The primary text color

select, table {color:#ffffff;}  

The color of the Show Explanation link

a{color#ffe052;

The color of the OWA Light description

disBis{color:#c8d3e3;}

The color of the words "Connected to Microsoft Exchange" at the bottom of the screen

;color:#fffff;

The color of the horizontal lines that divide the logon screen into sections

#A9AAc4

Table 1. Elements that can be customized on the OWA sign-on screen.

Adding a short legal disclaimer to this page can require a great deal of work. Because OWA has been localized for use with different languages, you can't modify the existing text by editing the LOGON.ASPX or LOGON.CSS files. The only way to modify the text in the OWA sign-on screen, or another location in OWA, is to modify the Microsoft.Exchange.Client.Strings.resources.dll file, found in the Program FilesMicrosoftExchange ServerClientAccessOWABinen folder. Figure 14 shows some of the text that OWA's sign-on screen uses.

Exchange Server OWA text in DLL file Figure 14. Most text that OWA uses is stored within a DLL file. (Click on image for enlarged view.)

Using a binary file editor to modify a DLL file is very dangerous. If you make even a minor mistake, you can destroy or invalidate the DLL. Therefore, I recommend modifying the LOGON.ASPX file instead.

The LOGON.ASPX file doesn't contain any existing text, but a Web developer familiar with ASP coding should be able to add a legal disclaimer to this file. In Figure 15, you can see that I have added a legal disclaimer to the OWA sign-on screen by inserting a line of text into the LOGON.ASPX file. Figure 16 shows the exact location where I inserted this text.

Exchange Server 2007 OWA sign-on screen with legal disclaimer Figure 15. Add a legal disclaimer to the OWA sign-on screen. (Click on image for enlarged view.)

Modify code in Exchange 2007 OWA to add legal disclaimer Figure 16. Modified code. (Click on image for enlarged view.)


TUTORIAL: Customizing Outlook Web Access in Exchange Server 2007

 Home: Introduction
 Part 1: Modifying the look of OWA in Exchange Server 2007
 Part 2: Using cascading style sheets to change a color in OWA
 Part 3: How to handle file attachment access in OWA
 Part 4: Control how users access files with WebReady Document Viewing
 Part 5: Enable user-level segmentation to control OWA components

ABOUT THE AUTHOR:   
Brien M. Posey, MCSE
Brien M. Posey, MCSE, is a Microsoft Most Valuable Professional for his work with Exchange Server, and has previously received Microsoft's MVP award for Windows Server and Internet Information Server (IIS). Brien has served as CIO for a nationwide chain of hospitals and was once responsible for the Department of Information Management at Fort Knox. As a freelance technical writer, Brien has written for Microsoft, TechTarget, CNET, ZDNet, MSD2D, Relevant Technologies and other technology companies. You can visit Brien's personal Web site at http://www.brienposey.com.
This was first published in April 2008

Dig deeper on Outlook Web Access

Pro+

Features

Enjoy the benefits of Pro+ membership, learn more and join.

0 comments

Oldest 

Forgot Password?

No problem! Submit your e-mail address below. We'll send you an email containing your password.

Your password has been sent to:

-ADS BY GOOGLE

SearchWindowsServer

SearchEnterpriseDesktop

SearchCloudComputing

SearchSQLServer

Close