Outlook on the web (OWA) an Corporate Design anpassen


    Tags: ,

    Outlook on the web (OWA)Häufig besteht der Wunsch, Outlook on the web (auch OWA oder Outlook Web App) nach den Vorgaben des Corporate Design zu verändern, also die Farben und das Logo Firma zu verwenden. Microsoft sieht solche optischen Anpassungen mit Hilfe einer eigenen Login-Seite und individueller Themes vor.

    Als reine Web-Anwendung nutzt OWA für die Gestaltung der Benutzer­oberfläche all jene Elemente, die man in diesem Zusammenhang kennt. So bindet die HTML-Seite zum einen mehrere Grafiken ein, zum anderen nutzt sie für das Layout Cascading Style Sheets. Daher sollte man für diese Aufgabe etwas mit CSS vertraut sein.

    Aussehen der Anmeldeseite ändern

    Alle Daten für die Login-Seite von OWA befinden sich im Ordner

    %ExchangeInstallPath%\FrontEnd\HttpProxy\owa\­auth\15.1.669\­themes\resources

    Die Build-Nummer innerhalb des Verzeichnispfads kann je nach installiertem Cumulative Update (CU) von der obigen Angabe abweichen.

    Verzeichnis mit den Grafiken für die Anmeldeseite von OWA

    Es empfiehlt sich unbedingt, ein Backup dieses Ordners anzulegen. Wenn man nämlich Einstellungen so "verbastelt", dass man diese nicht wieder in ihren Ursprungs­zustand zurückbekommt, dann kann man sie durch Zurückspielen der Kopien wiederherstellen. Zudem sollte jede Änderung auch auf mobilen Geräten geprüft werden, um zu sehen, ob die Anzeige und Lesbarkeit hier gegeben ist.

    Diese Grafiken kann man für das Anpassen von OWA an das Corporate Design ersetzen.

    Folgende Grafiken sind für das Aussehen der Anmeldeseite interessant und können durch eigene Bilder ersetzt werden:

    • olk_logo_white.png
    • owa_text_blue.png
    • Sign_in_arrow.png

    Außerdem kann man auch das favicon.ico austauschen, um für das Symbol in der Adressleiste etwa das Firmen-Logo zu verwenden. In dem besagten Ordner findet man auch Grafiken zu Office365 oder zur OWA-Fehlerseite, auf die ich hier nicht eingehe.

    Ändern der Hintergrundfarben über Anpassung von logo.css

    Daneben gibt es hier noch die Datei logo.css, in der man den Hintergrund und die Textfarben ändern kann. Dafür zuständig ist das CSS-Attribut background-color, das es für die gesamte Seite (body) und separat für die Klasse sidebar gibt.

    Die Anmeldeseite könnte nun wie folgt ausschauen:

    Angepasste Anmeldeseite von OWA mit Firmenlogo

    Der Fantasie sind hier keine Grenzen gesetzt, wer sich in Sachen CSS auskennt, kann hier noch wesentlich weiter gehen.

    OWA-Themen

    Die eigentliche Oberfläche von OWA lässt sich über so genannte Themen festlegen. Man kann es dabei dem Benutzer überlassen, das bevorzugte Design auszuwählen. Um ein solches zu erzeugen, liegt es nahe, einfach ein bestehendes Theme zu kopieren und dieses dann nach den eigenen Vorstellungen zu modifizieren.

    Die Themes sind in den Verzeichnissen themes und styles gespeichert, und zwar unterhalb dieses Ordners:

    %ExchangeInstallPath%\ClientAccess\Owa\prem\15.1.669.32\resources

    Beachten Sie auch hier wieder, dass die Build-Nummer von meiner Angabe abweichen kann.

    Verzeichnisse für Themes und Styles der OWA-Oberfläche

    Im Ordner themes kopiere ich ein Design, welches meinen Vorstellungen nahe kommt, und benenne es dann um. In meinem Beispiel dupliziere ich das Theme orange und ändere den Namen des neuen Verzeichnisses auf windowspro.

    Nach dem Kopieren eines vorgegebenen Themes benennt man dieses um.

    Wechselt man nun in den neuen Design-Ordner, dann finden wir dort die Datei themeinfo. In dieser passen wir im Element theme das Attribut displayname so an, dass es den neuen Namen des Themes widerspiegelt.

    Neuen Namen des Themes in die Datei themeinfo eintragen

    Unter sortorder könnte man nun noch die Platzierung des Designs angeben, die es in der Auswahlliste der OWA bekommen soll.

    Vorschau auf verfügbare Themes in OWA

    Neben der Info-Datei für das Theme gibt es noch den Ordner Images. Es enthält das Vorschaubild, welches dem Benutzer bei der Auswahl des Designs helfen soll. Dafür muss innerhalb der beiden Ordner rtl und 0 das Bild themepreview.png gegen ein eigenes Thumbnail (64x64 Pixel) getauscht werden.

    Die Datei themepreview.png repräsentiert das Vorschaubild

    Wir wechseln jetzt vom Ordner themes in den Ordner ..\styles, um auch hier unser neues Design festzulegen. Angelehnt und unser Design orange, welches wir in windowspro umbenannt haben, muss hier die Datei fabric.color.theme.orange kopiert und in fabric.color.theme.windowspro umbenannt werden. Das Gleiche gilt für _fabric.color.­variables.­theme.orange.less.

    In der Datei fabric.color.theme.<name> passt man nun wieder beliebige Einstellungen nach Bedarf an. Ich habe hier einfach den Farbton orange gegen ein blau ersetzt, um den Unterschied demonstrieren zu können.

    Die Datei mit der Endung .less definiert die Variablen für die Farbwerte, welche wiederum in der .css-Datei verwendet werden.

    Das neue Design ist nun soweit fertiggestellt. Damit es aber auch geladen wird, ist ein Eintrag in die Datei stylemanifest.xml erforderlich.

    Ordner mit den Manifestdateien für die Themes

    Sie ist zu finden unter:

    %ExchangeInstallPath%\ClientAccess\Owa\prem\15.1.669.32\manifests

    Registrieren des neuen Themes in der stylemanifest.xml

    Es braucht nur die .less-Datei eingetragen zu werden, dazu dupliziert man einfach einen Eintrag und ändert den Namen ab. Damit alle Einstellungen wirksam werden, muss man den IIS einmal neu starten. Das funktioniert auf der Kommandozeile mit dem Befehl iisreset.

    Die Vorschau für Designs in OWA enthält nun das neue Theme.Danach zeigt OWA in der Auswahl ein neues Design. Wenn es sich dabei um das Theme für das Corprate Design handelt, dann ist es sinnvoll, dieses als Standard für alle User festzulegen.

    Dies geht am besten mit PowerShell. Folgender Befehl erledigt diese Aufgabe:

    Get-OwaVirtualDirectory |
    Set-OwaVirtualDirectory -DefaultTheme windowspro

    Die User sind nun aber noch in der Lage, das Design zu wechseln. Richtig "festgebrannt" wird es mit

    Get-OwaVirtualDirectory |
    Set-OwaVirtualDirectory -DefaultTheme windowspro -ThemeSelectionEnabled $false

    Zum Schluss möchte ich daran erinnern, von den getätigten Änderungen eine Sicherungskopie anzufertigen. Das angepasste Theme sollte nach jedem Update des Exchange Servers kontrolliert werden. Es könnte nämlich vor­kommen, dass die eben getätigten Einstellungen überschrieben wurden.

    Falls man mehrere Exchange Server betreibt, beispielsweise in einer DAG, dann muss man die hier beschriebene Prozedur zum Anpassen des OWA-Designs für jeden von ihnen wiederholen.

    Keine Kommentare