The Outlook Web Access logon, language selection, and logoff pages are always created based on graphics and the logon.css file in the base theme folder. Therefore, to use custom logon and logoff pages, you must modify the files in the base theme folder. You can find the base theme folder in the Exchange installation directory at \Client Access\OWA\version\themes\base.
The logon, language selection, and logoff pages use the logon.css file to define text styles and colors. The pages are created by combining several images for the border top, bottom, and sides and also include repeating images and corners for expansion. 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
It is easiest to create a new look by using a solid color because the same collection of images is used for three pages: the logon page, the language selection page that is shown on the first logon per mailbox, and the logoff page. The pages resize horizontally and vertically based on the contents of the page.
If you have multiple Client Access servers and want them all to use the same logon and logoff pages, you must copy the modified logon and logoff files to each Client Access server.
.gif) Caution: |
|---|
|
Because you must change the files in the base theme to create custom logon and logoff pages, back up copies of all the files that you will be changing before you start to create your custom logon and logoff pages.
|
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 figure shows how the logon.css file determines the colors of the background and text on the logon page.
Outlook Web Access logon page displaying custom graphics files.gif)
Default Outlook Web Access logon page displaying text options.gif)
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 logon.css file determines the colors of the background and text on the logoff page.
Outlook Web Access logoff page displaying custom graphics files.gif)
Default Outlook Web Access logoff page displaying text options.gif)
Testing Changes to the Logon and Logoff Pages
After you have opened the Outlook Web Access logon or logoff page in Internet Explorer, you can test your changes without having to reset IIS or exit Internet Explorer.
To test changes to the logon and logoff pages
-
Open the Outlook Web Access logon or logoff page in Internet Explorer.
-
On the toolbar, click Tools, and then click Internet Options.
-
On the General tab, under Browsing history, click Delete.
-
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
-
Click OK to close Internet Options.
-
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 the steps to see your changes.
Changing the Logo
To customize Outlook Web Access, you can change the Outlook Web Access logo on the logon and logoff pages to your organization's logo.
To change the logo in Outlook Web Access
-
Create copies of the files that you want to change, and then save them to a safe location so that you can restore the original pages, if it is necessary.
-
Open the lgntopl.gif file by using an image editing tool, and then modify it to create the logo that you want to use.
-
Save your changes, and then click the Refresh button to see your changes.
.gif) Note: |
|---|
|
If you have changed the background color of lgntopl.gif, we recommend that you modify the remaining files that are used to create the logon and logoff pages to match.
|
Changing the Font Styles and Colors
You can edit the logon.css file to change font styles and some of the colors that are used on the pages. This includes the background color that is behind the controls in the center of the logon page and the language selection page. If you have changed the color of these pages, we recommend that you change the background color to match.
To change the background and font colors of the logon, language selection, and logoff pages, you must find the values in the logon style sheet (logon.css) and then determine the HTML RGB values for the colors that you want to use. The HTML RGB color values are defined by a seven character string in the format of the number sign (#) followed by a string of six characters. 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 cannot find a match for the color online, you can use an image editing tool to sample a color and determine its HTML RGB value.
To test your changes, open Internet Explorer and enter the URL for Outlook Web Access. 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.
| Note: |
|---|
|
The language selection page appears only the first time that a user logs on to Outlook Web Access.
|
The following table lists the elements of the logon and logoff pages and a description for each element.
Logon and logoff page elements and their descriptions
|
Element to change
|
String to search for
|
Description
|
|---|
|
Background color
|
Background: #7F90b1
|
The background color of the logon and logoff pages. If you change the background color of the graphics files, you should change the background color to match.
|
|
Warning text
|
wrng{color:#f8d328}
|
The color of the warning text that appears when a user selects This is a private computer. On the existing Outlook Web Access logon page, this warning text light yellow and stands out well against the blue background. If you change the background color of the logon page, you may also want to change the color of the warning text so that it is readable.
|
|
Primary text color
|
select, table {color:#ffffff;}
|
The primary text color is white. It indicates options that can be selected and entry fields on the Outlook Web Access logon page. Examples include the labels for the user name and password fields, and the text next to the security options. If you have chosen a dark color for your logon pages, white will still work well for this text.
|
|
Show explanation
|
a{color#ffe052;
|
Link on the logon page that a user can click to show or hide the explanation of Private and Public logons.
|
|
Outlook Web Access Light description
|
disBis{color:#c8d3e3;}
|
When a user selects Use Outlook Web Access Light, a short explanation about Outlook Web Access Light is displayed.
|
|
Connected to Microsoft Exchange
|
;color:#fffff;
|
The words Connected to Microsoft Exchange appear at the lower-left corner of the logon and logoff pages. Changing this value changes the color of the text in those words.
|
|
Dividing lines
|
#A9AAc4
|
All three pages that use logon.css have thin lines that divide them into sections. These pages include logon, logoff, and language selection. After you change the background and font colors, you may want to change the color of the lines so that the lines will still be visible, but not more visible than the text.
|
After you have decided which elements you want to change the color of and identified the HTML RGB color values that you will be changing those elements to, use the following procedure to change the color of any element that is defined by a .css file.
To change the color of an element
-
Open logon.css.
-
Use the table of logon and logoff page elements included earlier in this topic to find the string that matches the element that you want to change.
-
Replace the HTML RGB color value of the element that you want to change with the new HTML RGB color value that you want to use for that element.
-
Save your changes and close logon.css.
-
Test your changes by opening Internet Explorer and entering the URL for the Outlook Web Access logon page.
| Note: |
|---|
|
If you have already opened the Outlook Web Access logon URL, you can test your changes by deleting the temporary Internet files and refreshing Internet Explorer. To do this, click Tools, and then click Internet Options. On the General tab, under Browsing history, click Delete. 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 Click OK to close Internet Options, and then press F5 to refresh the logon page.
|