First, let’s have a look at what we are going to be talking about. If you have Exchange 2003, and have enabled FBA (it is enabled by default in SBS2003), then when you access your OWA installation, the first page you see is this:
Fig. 1: The OWA 2003 FBA Logon screen
It’s actually a very attractive screen, so why change it? Well, the usual reasons are either; 1 – Because your boss wants you to, or; 2 – Just to see if you can. Whatever the reason, I hope to show you a way of modifying its appearance without breaking it. The kinds of modifications that I will discuss are things like changing the background colour of the logon page, or adding your own logo or text.
Procedure
The source code for this screen is in a file called logon.asp . The location of this file depends on your server language settings. Since my server is set up for the English language, it is located in
C:\Program Files\Exchsrvr\exchweb\bin\auth\usa
If your server is configured in a different language then you will need to work with the file in a differently named language folder under the auth folder. Firstly, though, if you are going to try to change this file, the first thing you really must do is to make a backup copy. All you need to do is to select the file in Explorer by clicking on it, pressing CTRL-C to copy it, and CTRL-V to paste a copy into the same folder. Or, you can use the Explorer Edit menu to do the same thing, but whichever way you do it, you must make a copy. If you make a mistake while editing this file, then there is a very good chance that your OWA installation will become unusable until you can find a tape backup of this file. If you have no backup, then you will no longer be able to use FBA without reinstalling Exchange.
Before we begin to edit the file, let’s have a look at the structure of the page. Below is a screen capture of the logon page, but with the table borders revealed. As you can see, there are several layers of nested tables, and these are used to keep the various page elements in their relative positions.
Fig. 2: The table layout of the OWA 2003 FBA logon screen
It is important to be aware of this layout because if you want to insert an image (for example) next to an existing one, then you will need to place it inside the same cell as the existing image. In HTML, table layouts are described using a minimum of three different types of tags (or six, if you count the closing tags); <table>, <tr> and <td> . The <table> tag tells the client browser where a table begins, the <tr> tag tells it where a row begins, and <td> tells it where a cell begins. Each tag also has a closing tag (such as </td>) that tells it where each element ends. Within the tag, you can also add properties that modify its appearance. So, a very simple table with a border could be represented like this:
<table bgcolor=”yellow” border=”1”>
<tr>
<td>Some data</td>
<td>Some more data</td>
</tr>
<tr>
<td>Yet more data</td>
<td>Even more data</td>
</tr>
</table>
On the screen, it would look something like this:
|
Some data |
Some more data |
|
Yet more data |
Even more data |
If you want to put text in the cells, then you just insert it between the <td></td> tags. If you want an image, then you use an <img> tag that contains the path to the image, like this: <img src=’/myfoldername/image.gif’> .
Note that HTML code ignores white space, such as space characters, tabs, carriage returns, etc. The spaces at the beginning of these lines are there simply to emphasise the table layout. In the FBA logon page source, you will see a lot of indentation like this. Note also the use of the word ‘yellow’ when defining the value of the bgcolor property (which sets the background colour) in the table example above. It is more usual, however, to use RGB values that look like this: #1278AB , because you can get more subtle, and attractive, shades. In an HTML RGB value, each number pair is a hexadecimal 2-digit number that indicates the red, green or blue component of the colour.
As you would expect, the page source for a typical table in the FBA logon screen is a lot more complicated than this simple example, but the principle is the same. The FBA logon screen contains tables within tables within tables, and the tags generally have a lot more properties than the simple ‘border=”1”’ shown above. The important thing to understand, though, is that the existing elements of the FBA logon screen are held in place by being put into tables. If you want to put another image below an existing image, then you need to find the <td></td> tags that contain that image, and put your own image in between them too.
It has to be said, though, that the source for the logon.asp is quite complicated. One thing you can do is to use the name of an existing image as a kind of signpost to find a particular place in the file. The word ‘Microsoft’ at the top right is logon_microsoft.gif , and the large, colourful logo in the middle is called logon_logo.gif. Note from the table layout in figure 2 that the image on the left is split into two pieces: logon_IE_top.gif and logon_ie_bot.gif. logon_ie_bot.gif is actually only one pixel deep, but is stretched vertically to fill the cell that contains it.
It is also useful to know the names of the tables, if you are considering changing the background colour of any part of the screen. The blue background to the screen is part of a table named borderTable. The next inner part of the display, containing the images and input boxes is called mainTable, although it’s background colour is only visible behind the two stacked images on the left. The images on the right hand side are contained in a table called logoTable. Everything below that is in a table called usertxtTable, and the actual input area is in a table within that called contentTable. Below is an image where the various tables have been given a different background colour to show where they are:
Fig. 3: The areas of the OWA 2003 FBA logon screen
In this image, borderTable is red, mainTable is orange, logoTable is yellow, usertxtTable is green, and contentTable is violet. As you can see, the built-in gif files do not have transparent backgrounds, so if you are going to change their background colour, you may have to fill them with your own colours, or set the background to transparent using an image editor. The images can be found in the C:\Program Files\Exchsrvr\exchweb\img folder. A small part of the page background body colour can also be seen on the right.
We’re nearly ready to make some changes now, but instead of simply opening up the file, and making things up as we go along, it is much better to have a clear idea of what we intend to do. I am going to make the following changes:
- Set the colour of borderTable to #7B98B3
- Set the colour of logoTable to #FFF1B0
- Set the colour of usertxtTable and contentTable to #B0D9FF
- Add my own (fictitious, in this case) logo alongside the Microsoft one
- Add some text underneath the logo
Okay. It’s time to have a look at the logon.asp file itself. The best way to edit the file is in Notepad. Don’t be tempted to use any kind of HTML editor – the page contains too much script to survive any attempt to edit it in a WYSIWYG Web page designing application. Once you have it opened in Notepad you will notice that it is quite complicated. The file contains a mixture of VBScript, JavaScript, and HTML. We are only interested in the HTML parts. The VBScript parts are contained between an opening delimiter that looks like this <% and a closing delimiter like this %>. A typical example of some VBScript is the very first line of the file, containing the ENABLESESSIONSTATE directive. You must leave the VBscript parts well alone because it is easily broken. The same goes for the JavaScript parts. JavaScript is enclosed by an opening delimiter like this:
<script language=”javascript”> and a closing delimiter like this </script> .
The first thing on our list is to change the colour of borderTable. We can find its original colour definition by looking for the text borderTable within the page. But we do not want the first occurrence of the text that we find (there are two). The only part of the page we are interested in is the part near the bottom that follows the definition of the form action as owaauth.dll .
So we must first search for a part of the page that contains this text. Make sure that the cursor is at the top of the file by pressing CTRL-HOME, then press CTRL-F, type owaauth.dll into the search dialog, then press enter. Cancel the search dialog when it has found the text, then press CTRL-G (Goto) to display the current line number. On my SBS2003 machine it is on line 594, but on another, non-SBS, machine, it is on line 560, and this may also change in future service packs. Write down this number, which I will refer to from now on as the ‘start position’.
Let’s return to changing the colour of borderTable. First, use CTRL-G, and type the line number, to go to the start position that we have just determined. Then press CTRL-F to open the search dialog, and type in the word borderTable, and press enter. Cancel the search dialog when it has found the line, and move along to the part that says bgcolor=” , and then replace the value inside the quotes with your new colour value (#7B98B3 in our example). You can press CTRL-S to save the changes, and check the appearance of the logon page now using your browser, or you can carry on making more changes.
The next change is the colour of logoTable. Again, go to the start position by pressing CTRL-G, and entering the required line number, then CTRL-F, and typing the word logoTable. Cancel the search when it has found the line. Again, move along the line to the bgcolor attribute, and replace its value with your own.
Do the same for the values of usertxtTable and contentTable.
Now, I am going to add a logo to the page. I am placing the image in the same folder as the existing .gif files, so that I will specify the same path as the other files. Since it is going to go next to the Microsoft logo, I will use the method we are already using to find the filename of the Microsoft logo logon_microsoft.gif. The easiest way to place the image near the existing logo is to place it inside the same table cell, so I will place my own <img> tag just in front of the existing one. My image tag looks like this:
<img src=”/exchweb/img/mylogo.gif”>
I am also going to add some text underneath the logo. Because I want the text to appear on a new line, I am going to precede it with the <br> (line break) tag. I will also enclose it with <b></b> tags to make it appear in bold:
<br><b>Max Quad Ltd. No unauthorized access allowed.</b>
Now, save the file with CTRL-S and see what it looks like in the browser. Avoid using the Save As command, because it will want to save the file with a .txt extension, and you will see no changes if it does that.
Well, that is all that I am going to change for now, but Exchange 2003 administrators may be interested in Henrik Walther’s excellent article regarding the FBA Default Domain issue on a member server.
And here is the finished logon page. It may not be to everyone’s taste, but I hope that I have given you some idea of how to implement your own colour scheme.
Fig. 4: The finished FBA logon page
Finally
If you do make changes to your logon.asp file that you want to keep, you must remember that it may be replaced whenever you apply an Exchange 2003 Service Pack. If your file does get replaced, then it is much better to make the same changes in the new file, rather than to simply replace the new file with your old file. The new file may well have some code changes in it to address newly-found security issues.
