Customizing the Look of Outlook Web Access

Letztes Änderungsdatum des Themas: 2007-09-06

Von Darcy Jayne

Wenn Sie Ihre Benutzer und Vorgesetzten beeindrucken möchten, können Sie z. B. Microsoft Office Outlook Web Access anpassen, indem Sie das Logo und die Farben Ihrer Organisation verwenden. Das Anpassen von Outlook Web Access ist hervorragend geeignet, um die Identität Ihrer Organisation in ein Tool einfließen zu lassen, das zahlreiche Benutzer verwenden.

In diesem Artikel finden Sie Anleitungen, wie Sie die Anmelde-, Sprachauswahl- und Abmeldeseiten anpassen können. Außerdem erfahren Sie, wie ein Design mithilfe einer benutzerdefinierten Kopfzeile erstellt wird. Wenn Sie ein Outlook Web Access-Design erstellen möchten, das komplexere Änderungen für Ihre Organisation enthält, sollten Sie sich zuerst informieren, wie CSS-Dateien (Cascading Style Sheets) funktionieren. Nachdem Sie gute Kenntnisse hinsichtlich der Funktionsweise von CSS-Dateien erworben haben, sollten Sie immer nur wenige Elemente gleichzeitig ändern und Ihre Änderungen testen, damit gewährleistet ist, dass das Ergebnis Ihren Erwartungen entspricht.

Inhalt eines Designs

Ein Design, das in den Optionen von Outlook Web Access als "Farbschema" bezeichnet wird, definiert die Hintergrundfarbe, die Schriftarten, die Farben für Hervorhebungen sowie die Symbole und Kopfzeilen, die von Outlook Web Access verwendet werden. Standardmäßig werden zwei Design installiert, wenn Sie die Serverfunktion ClientAccess auf dem Computer mit Microsoft Exchange Server 2007 installieren. Diese Standarddesigns sind "Blaugrau" und "Tiefschwarz".

Jedes Design ist eine Sammlung von Mediendateien und CSS-Dateien (Cascading Style Sheets), die auf dem Clientzugriffsserver im Installationsverzeichnis unter \Client Access\OWA\Version\themes gespeichert werden. Jedes Design wird in einem eigenen Unterverzeichnis von \themes gespeichert.

Das Standarddesign (Blaugrau) ist das Basisdesign und unter \themes\base gespeichert. Der Basisordner enthält alle Dateien, die zum Definieren eines Designs erforderlich sind. Bei diesen Dateien handelt es sich z. B. um CSS-Dateien, Grafiken und eine XML-Datei, die den Namen des Designs definiert. Weitere Designs können durch Kopieren ausgewählter Dateien in ein neues Verzeichnis und Ändern dieser Dateien nach Bedarf erstellt werden. Wenn ein benutzerdefiniertes Design verwendet wird, werden zuerst die Elemente im Verzeichnis des benutzerdefinierten Designs verwendet. Alle erforderlichen Element, die nicht angepasst wurden, werden dem Basisdesign entnommen. Wenn Sie beispielsweise ein neues Design durch Kopieren nur der Kopfzeilengrafiken in ein neues Design erstellen und diese Grafiken dann ändern, stammen die Kopfzeilengrafiken aus dem neuen Design, wenn ein Benutzer dieses auswählt. Die restlichen Designeigenschaften stammen aus dem Basisdesign.

Neu in Exchange 2007 SP1

Mit Outlook Web Access wurden zwei zusätzliche Designs in Exchange Server 2007 Service Pack 1 (SP1) hinzugefügt: Xbox und Zune.

Bevor Sie beginnen

Als bewährte Methode wird empfohlen, die folgenden Richtlinien zu befolgen, wenn Sie ein Outlook Web Access-Design ändern oder erstellen:

• Fertigen Sie immer Sicherungskopien der ursprünglichen Dateien an, bevor Sie diese bearbeiten. Dies gilt insbesondere, wenn Sie Dateien aus dem Verzeichnis \themes\base bearbeiten.

• Löschen Sie weder den Ordner \Client Access\OWA\Version\themes\base noch darin enthaltene Dateien.

• Ändern Sie die Informationsleisten nicht, die über den Nachrichten angezeigt werden, um Benutzer vor möglicherweise schädlichen Inhalten, Phishingangriffen, Viren und geblockten oder fehlenden Inhalten zu warnen.

Erstellen eines Designs

Beginnen Sie, indem Sie einen Ordner für ein neues Design erstellen, und kopieren Sie dann eine Teilmenge der Dateien aus dem Basisdesign in diesen neuen Ordner.

1. Melden Sie sich am Clientzugriffsserver an, der als Host für Outlook Web Access fungiert, indem Sie ein Konto verwenden, an das die Mitgliedschaft in der lokalen Gruppe Administratoren delegiert wurde.

2. Öffnen Sie Windows-Explorer, und suchen das Installationsverzeichnis von Exchange Server.

3. Erstellen Sie unter \Client Access\OWA\<Version>\themes einen neuen Ordner, und nennen Sie diesen beispielsweise Fourth Coffee.

4. Kopieren Sie die folgenden Dateien aus dem Basisdesign in den neuen Ordner:

   • premium.css

   • owafonts.css

   • logopt.gif

   • logopb.gif

   • nbbkg.gif

Benennen des neuen Designs

Sie können einem benutzerdefinierten Design auf zwei Arten einen Namen zuweisen. Entweder geben Sie dem Ordner, in dem Sie das neue Design erstellt haben, den Namen, den das Design erhalten soll. Da der neue Ordner den Namen Fourth Coffee erhalten hat, erhält das neue Design automatisch den Namen "Fourth Coffee".

Sie können das benutzerdefinierte Design auch benennen, indem Sie die Datei themeinfo.xml aus dem Basisdesign in einen neuen Ordner kopieren diese Datei anschließend bearbeiten. Bearbeiten Sie die Datei themeinfo.xml mit einem Texteditor, z. B. Editor, und ändern Sie den Anzeigenamen des Designs in den Namen, den das neue Design erhalten soll. Die Datei themeinfo.xml überschreibt den Ordnernamen mit dem Namen Ihres Designs.

Gehen Sie folgendermaßen vor, um das neue Design mithilfe der Datei themeinfo.xml zu benennen:

1. Kopieren Sie die Datei themeinfo.xml aus dem Basisdesignordner in den Ordner namens Fourth Coffee.

2. Öffnen Sie die Kopie der Datei themeinfo.xml aus dem Ordner des benutzerdefinierten Designs.

3. Suchen Sie den Wert theme displayname, und ändern Sie den Wert dann in Fourth Coffee Theme.

   Die Datei sollte die Angabe theme displayname = "Fourth Coffee Theme" enthalten.

4. Speichern und schließen Sie themeinfo.xml.

Erstellen einer benutzerdefinierten Kopfzeile

Nachdem Sie die Dateien kopiert und das Design benannt haben, versuchen Sie, die Kopfzeile anzupassen. Zum Ändern der Kopfzeile in Outlook Web Access benötigen Sie die folgenden Dateien, die Sie bereits in den Ordner für Ihr neues Design kopiert haben:

• premium.css

• owafonts.css

• logopt.gif

• logopb.gif

• nbbkg.gif

Premium.css und owafonts.css definieren die von Outlook Web Access verwendeten Schriftarten und Farben. Die Bilddateien logopt.gif, logopb.gif und nbbkg.gif werden zum Erstellen der Kopfzeile am oberen Rand der Seite in Outlook Web Access verwendet.

1. Beginnen Sie, indem Sie ein Bildbearbeitungstool zum Öffnen und Ändern der Datei logopt.gif verwenden.

2. Als Beispiel können Sie die Hintergrundfarbe von logopt.gif in violett mit einem HTML RGB-Farbwert von #DCBEC8 ändern. Bearbeiten Sie logopb.gif und nbbkg.gif so, dass beide Dateien die gleiche Hintergrundfarbe verwenden.

Ein HTML RGB-Farbwert wird durch eine siebenstellige Zeichenfolge definiert, bestehend aus dem Gatterzeichen (#) und sechs Zeichen.

Zum Testen des benutzerdefinierten Designs melden Sie sich bei Outlook Web Access Premium an (wählen Sie nicht die Option Outlook Web Access Light verwenden aus), klicken Sie auf Optionen und dann auf Allgemeine Einstellungen, und wählen Sie anschließend Ihr benutzerdefiniertes Design aus dem Menü Farbschema aus. Sie müssen Ihre Änderungen speichern und auf Aktualisieren klicken, um das neue Design anzuzeigen.

In den folgenden Abbildungen sind die Originaldateien dargestellt, die zum Erstellen der Kopfzeile für das Outlook Web Access-Design "Blaugrau" verwendet werden, sowie die neue Kopfzeile, die durch Ändern dieser Dateien erstellt wurde.

Outlook Web Access-Kopfzeilendateien

Benutzerdefinierte Outlook Web Access-Kopfzeile

Ändern des Outlook Web Access-Standarddesigns

Nachdem Sie ein neues Design erstellt und die Kopfzeile angepasst haben, versuchen Sie, dieses Design als Standarddesign für Outlook Web Access festzulegen. Um das Outlook Web Access-Standarddesign aus dem Basisdesign in Ihr benutzerdefiniertes Design zu ändern, verwenden Sie das Cmdlet Set-OwaVirtualDirectory. Für die folgenden Beispiele verwenden Sie "FourthCoffeeCAS" für den Server, "owa" für das virtuelle Verzeichnis, "Default Web Site" für die Website und "Fourth Coffee" als Ordnernamen.

• Führen Sie den folgenden Befehl aus, um das Standarddesign für Outlook Web Access auf "Fourth Coffee" festzulegen: set-owavirtualdirectory -identity "fourthcoffeeCAS\owa (default web site)" -defaulttheme "fourth coffee"

Wenn sich bereits Benutzer bei Outlook Web Access angemeldet und ein Design ausgewählt haben, werden sie nicht gezwungen, das neue Design zu verwenden. Wenn Sie sicherstellen möchten, dass alle Benutzer das neue Design verwenden, müssen Sie die Designauswahl deaktivieren. Auch zu diesem Zweck verwenden Sie das Cmdlet Set-OwaVirtualDirectory.

• Führen Sie den folgenden Befehl aus, um die Designauswahl in Outlook Web Access zu deaktivieren: set-owavirtualdirectory -identity "fourthcoffeeCAS\owa (default web site)" -themeselectionenabled $false

Mit dem folgenden Befehl können Sie auch beide Befehle gleichzeitig ausführen: set-owavirtualdirectory -identity "fourthcoffeeCAS\owa (default web site)" -defaulttheme "Fourth Coffee" -themeselectionenabled $false

Anpassen der Anmelde- und Abmeldeseiten

Ein benutzerdefiniertes Design eignet sich hervorragend, Outlook Web Access ein benutzerdefiniertes Aussehen zu verleihen, nachdem sich die Benutzer angemeldet haben. Eine benutzerdefinierte Anmeldeseite fällt jedoch sofort auf. Outlook Web Access verwendet nur die Anmeldungs-, Sprachauswahl- und Abmeldeseiten des Standarddesigns. Aus diesem Grund ist es zum Erstellen benutzerdefinierter Seiten erforderlich, die Dateien im Basisdesignordner zu ändern.

Die Textstile und -farben sowie die Hintergrundfarben der Anmelde-, Sprachauswahl- und Abmeldeseiten werden durch die Datei logon.css definiert. Diese Seiten werden durch die Kombination von Grafiken erstellt, die als GIF-Dateien gespeichert sind. Aus den folgenden Dateien wird die Anmeldeseite erstellt:

• logon.css

• lgnbotl.gif

• lgnbotm.gif

• lgnbotr.gif

• lgnexlogo.gif

• lgnleft.gif

• lgnright.gif

• lgntopl.gif

• lgntopm.gif

• lgntopr.gif

Sie erzielen ein neues Aussehen, indem Sie diese Dateien ändern, um benutzerdefinierte Anmelde- und Abmeldeseiten für Fourth Coffee zu erstellen. Damit diese Aufgabe nicht zu komplex wird, verwenden Sie eine Volltonfarbe für den Hintergrund aller Grafiken.

Erstellen Sie zuerst einen neuen Ordner im Basisdesignordner, und nennen Sie diesen backup. Kopieren Sie alle Dateien, die zum Erstellen der Anmelde- und Abmeldeseiten verwendet werden, in den neuen Ordner, damit Sicherungsdateien für den Fall vorhanden sind, dass Sie zu den ursprünglichen Anmelde- und Abmeldeseiten zurückkehren möchten. Sie finden den Basisdesignordner im Exchange-Installationsverzeichnis unter \Client Access\OWA\Version\themes\base.

In der folgenden Abbildung ist die Outlook Web Access-Standardanmeldeseite dargestellt, die angezeigt wird, wenn der Benutzer auf Beschreibung anzeigen klickt und Dies ist ein privater Computer sowie Outlook Web Access Light verwenden auswählt. Eine Abbildung zeigt, wie die Grafikdateien, aus denen die Seite erstellt wird, zusammenwirken. Die andere Abbildung veranschaulicht, wie die Datei logon.css die Farben von Hintergrund und Text auf der Anmeldeseite bestimmt.

Outlook Web Access-Anmeldeseite mit benutzerdefinierten Grafikdateien

Outlook Web Access-Standardanmeldeseite mit Textoptionen

Die folgenden Abbildungen stellen die Outlook Web Access-Standardanmeldeseite dar. Eine Abbildung zeigt, wie die Grafikdateien, aus denen die Seite erstellt wird, zusammenwirken. Die andere Abbildung veranschaulicht, wie die Datei logon.css die Farben von Hintergrund und Text auf der Abmeldeseite bestimmt.

Outlook Web Access-Abmeldeseite mit benutzerdefinierten Grafikdateien

Outlook Web Access-Standardabmeldeseite mit Textoptionen

Testen der Änderungen an Anmelde- und Abmeldeseite

Sie können Ihre Änderungen testen, während Sie sie vornehmen, indem Sie die Outlook Web Access-Anmeldeseite in Internet Explorer öffnen und dann die folgenden Schritte durchführen. Speichern Sie die Dateien dabei nach jeder Änderung. 

1. Öffnen Sie die Outlook Web Access-Anmelde- oder Abmeldeseite in Internet Explorer. Wenn Sie die Änderungen an der Standardwebsite auf dem Clientzugriffsserver testen, auf dem sich das virtuelle Outlook Web Access-Verzeichnis befindet, öffnen Sie Internet Explorer, und geben Sie dann den URL https://localhost/owa ein.

2. Klicken Sie auf der Symbolleiste auf Extras, und klicken Sie anschließend auf Internetoptionen.

3. Klicken Sie auf der Registerkarte Allgemein unter Temporäre Internet-Dateien auf Dateien löschen. Wenn Sie gefragt werden, ob Sie wirklich alle temporären Internet Explorer-Dateien löschen möchten, klicken Sie auf Ja.

4. Klicken Sie auf OK, um Internetoptionen zu schließen.

5. Klicken Sie auf Aktualisieren, um die Änderungen zu anzuzeigen.

Wiederholen Sie diese Schritte immer dann, wenn Sie Änderungen an den Dateien der Anmelde- und Abmeldeseiten vorgenommen haben. Wenn Sie zahlreiche Änderungen durchführen, können Sie die Anmelde- oder Abmeldeseite geöffnet lassen und die Änderungen durch Ausführen der Schritte 2 bis 6 überprüfen.

Anpassen der Bilddateien

Da die ursprünglichen Dateien nun in einem separaten Verzeichnis gesichert sind und Sie wissen, wie Sie die Änderungen schrittweise testen können, können Sie die GIF-Dateien ändern, die als Grafikbausteine für die Anmelde-, Sprachauswahl- und Abmeldeseiten dienen.

Öffnen Sie zu diesem Zweck lgntopl.gif mithilfe eines Bildbearbeitungstools, und ändern Sie die Grafik wie in der folgenden Abbildung gezeigt in Ihr neues Design:

Fourth Coffee-Logo

Da Sie zuvor die Hintergrundfarbe von lgntopl.gif in violett mit einem HTML RGB-Farbwert von #DCBEC8 geändert haben, öffnen Sie nun jede der verbliebenen GIF-Dateien und ändern ihre Hintergrundfarbe ebenfalls entsprechend.

Endbearbeitung

Nachdem Sie die GIF-Dateien bearbeitet haben, müssen Sie auch die Datei logon.css bearbeiten, damit der Hintergrund nahtlos erscheint. Die neue Hintergrundfarbe passt möglicherweise nicht sehr gut zu den Farben des ursprünglichen Texts und der Trennlinie. Sie legen nicht nur die Hintergrundfarbe so fest, dass sie zu Ihrem neuen Logo passt, sondern Sie ändern auch die primäre Textfarbe und die Farbe der Trennlinie, damit sie besser mit Ihren neuen Seiten harmoniert.

Jede dieser drei Farben (Hintergrund, primärer Text und Trennlinie) wird durch einen HTML RGB-Farbwert in logon.css definiert. Um diese Farbwerte in Ihre neuen Farben zu ändern, müssen Sie sie in logon.css suchen und dann den jeweiligen HTML RGB-Farbwert in den gewünschten Farbwert ändern.

Öffnen Sie die Datei logon.css mithilfe eines Texteditors, z. B. Editor, um die Farben zu ändern. Suchen Sie für jedes zu ändernde Farbelement nach der entsprechenden Zeichenfolge, ersetzen Sie den HTML RGB-Farbwert basierend auf den Informationen in der folgenden Tabelle durch den neuen Wert, und speichern und schließen Sie dann logon.css.

Elemente der Anmelde- und Abmeldeseite und deren Beschreibungen

Wenn Sie fertig sind, ähneln die neuen Anmelde- und Abmeldeseiten den in den folgenden Abbildungen gezeigten Seiten.

Fourth Coffee-Anmeldeseite

Fourth Coffee-Abmeldeseite

Weitere Informationen

Weitere Informationen zum Erstellen benutzerdefinierter Outlook Web Access-Designs finden Sie unter Erstellen eines Designs für Outlook Web Access.

Darcy Jayne - Technischer Autor, Microsoft Exchange Server