Customize the Outlook Web App Logon Page

Microsoft has provided some basic details on how to customize the Outlook Web App logon page (OWA) in Exchange 2013.  I’ve taken things a bit further and modified logon.aspx and logon.css to customize the OWA logon page with a PowerShell script.

It is important to note that at this time the script does not back up any of the files that it modifies.  Be warned, you should backup logon.aspx and logon.css.  As of Exchange 2013 SP1 CU6 they are located in the following directories:

Logon.aspx:  C:\Program Files\Microsoft\Exchange Server\V15\FrontEnd\HttpProxy\owa\auth

Logon.css:  C:\Program Files\Microsoft\Exchange Server\V15\FrontEnd\HttpProxy\owa\auth\15.0.995\themes\resources

The first section between lines 1-11 I am setting the path to all the locations we’ll need to modify. On line 11 I’m dumping the contents of logon.aspx into a variable in order to customize it.

Line 13-24 handles the creation of a disclaimer.  I’ve used mostly silly words in there but a few things are noteworthy.  The encapsulation of the text within @” and “@  preserves the formatting as written in the script.  I’ve also created a div class called disclaimer that will be referenced and formatted within Logon.css.  There are HTML <BR> to make spacing in the paragraphs for emphasis.  Use this as you see fit.

Lines 31-51 handle the additions to Logon.css that will be used later in the script.  Here I’m setting the font, color to match the rest of OWA and created a margin so the text isn’t on top of the logon elements in the web page.  Since OWA is modern it accounts for tablet views defined with twide and tnarrow.  These required some trial and error margin settings that keep spacing between elements on the page.

I’m using an If statement against the contents of Logon.aspx to see if has been modified with the text “Outlook Web App” as that appears in the disclaimer.  If it isn’t there then lines 61-73 handles the customization.  Initially I used a hard coded line number to in order to add the disclaimer but once I installed CU6 the length of Logon.aspx changed and the script broke my OWA logon page. My solution for this was to search for “hidden-submit” and record the line number and select all the text from the beginning up to the line I just noted.  Then I had to get the total number of lines and compute how many lines occurred after “hidden-submit”.

Line 67 handles taking the first chunk, the disclaimer, and finally the last chunk and putting it all together to create the custom Logon.aspx

Lines 75-91 create the customization of Logon.css and simply adds lines to the end of the file with one exception.  Line 88 replaces the min-height value of 650 pixels with a value of 700 pixels.  This is important so that the blue field on the left side of the window extends just below the disclaimer text.  You’ll need to adjust that min-height value according to the amount of disclaimer text you insert.

Customize the Outlook Web App Logon Page
Custom OWA with disclaimer in IE

This customization also displays the disclaimer on mobile devices as seen in the screenshot below:

IphoneOWA
Custom OWA viewed on Iphone

 

 

2 thoughts on “Customize the Outlook Web App Logon Page

Leave a Reply