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.gif)
Default Outlook Web Access logon page that displays 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 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.gif)
Default Outlook Web Access logoff page that displays text options.gif)
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.
-
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.
-
On the toolbar, click Tools, and then click Internet Options.
-
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.
-
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 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.gif)
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.gif)
Fourth Coffee logoff page.gif)