Erstellen eines Designs für Outlook Web App

Artikel
03/02/2017

Gilt für: Exchange Server 2010 SP2, Exchange Server 2010 SP3

Letztes Änderungsdatum des Themas: 2016-11-28

In diesem Thema wird das Erstellen eines benutzerdefinierten Designs für Microsoft Office Outlook Web App erläutert. Ein Design ist eine Sammlung von Mediendateien und Cascading Stylesheets (CSS-Dateien), mit denen das Erscheinungsbild von Outlook Web App gesteuert wird.

Standardmäßig werden mehrere Designs installiert, wenn Sie die Clientzugriffs-Serverrolle auf einem Computer mit Microsoft Exchange Server 2010 installieren.

CSS-Dateien – Definieren Farben, Verläufe und Schriftarten
Bild-Dateien (PNG) – Stellen die Symbole und andere grafische Elemente bereit. Wenn Sie eines der Symbole bearbeiten, dürfen Sie seine Größe nicht ändern. Wenn Sie die Größe beliebiger grafischer Elemente ändern, testen Sie Ihre Änderungen, damit sichergestellt ist, dass die Elemente weiterhin richtig zusammenpassen.

Diese Dateien werden auf dem Clientzugriffsserver im Installationsverzeichnis unter "\Client Access\OWA\<Version>\themes" gespeichert. Jedes Design wird in einem Unterverzeichnis für das betreffende Design gespeichert. Sie können zusätzliche Designs erstellen, indem Sie ein vorhandenes Design kopieren und die Kopie ändern.

Hinweis

Die Light-Version von Outlook Web App unterstützt keine Designs.

Empfehlungen

Zahlreiche Elemente eines Outlook Web App-Designs können geändert werden. Damit Outlook Web App nicht instabil wird, empfiehlt es sich, nur die Dateien zu ändern, die direkt mit Ihrem benutzerdefinierten Design im Zusammenhang stehen.

Als bewährte Methode befolgen Sie diese Richtlinien:

Erstellen Sie immer Sicherungskopien der ursprünglichen Dateien, bevor Sie sie bearbeiten.
Erstellen Sie vor dem Anwenden von Upgrades oder Hotfixes auf einen Clientzugriffsserver, auf dem benutzerdefinierte Designs vorhanden sind, Sicherungskopien dieser Designs.
Nehmen Sie jeweils nur eine oder zwei Änderungen vor, und testen Sie Ihre Änderungen, bevor Sie weitere vornehmen.
Ändern Sie nicht die Dateien unter "\Client Access\OWA\<Version>\themes\resources". Schriftarten und andere Einstellungen, die in diesen Dateien definiert sind, werden in jedem Design in Outlook Web App verwendet. Wenn die Dateien geändert werden, entstehen Auswirkungen auf jedes Design.
Designs werden auf jedem Clientzugriffsserver gespeichert. Wenn Sie über mehrere Clientzugriffsserver verfügen und ein benutzerdefiniertes Design auf allen Servern verfügbar sein soll, kopieren Sie das Design in das entsprechende Verzeichnis auf jedem Clientzugriffsserver.

Möchten Sie wissen, welche anderen Verwaltungsaufgaben es im Zusammenhang mit dem Anpassen des Erscheinungsbilds von Outlook Web App gibt? Weitere Informationen finden Sie hier: Anpassen der An- und Abmeldeseiten für Outlook Web App.

Was möchten Sie tun?

Erstellen eines neuen Outlook Web App-Designs
Benennen des benutzerdefinierten Designs
Erstellen eines benutzerdefinierten Symbols für Ihr Design
Erstellen einer benutzerdefinierten Kopfzeile
Verwenden der Entwicklertools von Internet Explorer zum Bestimmen von Farben
Ändern von Farben in einem Design
Ändern von Symbolen und Logos in einem Design
Festlegen des Standarddesigns für Outlook Web App

Erstellen eines neuen Outlook Web App-Designs

Bevor Sie dieses Verfahren ausführen können, müssen Ihnen die entsprechenden Berechtigungen zugewiesen werden. Informationen zu den von Ihnen benötigten Berechtigungen finden Sie unter "Grafikbearbeitung" im Thema Clientzugriffsberechtigungen.

Öffnen Sie Windows-Explorer auf dem Clientzugriffsserver, der Outlook Web App hostet, und suchen Sie dann das Exchange Server-Installationsverzeichnis.
Suchen Sie unter "\Client Access\OWA\<Version>\themes" nach einem Design mit dem gewünschten Farbschema, und kopieren Sie es.
Geben Sie der gerade erstellten Kopie einen kurzen Namen, den Sie für das Design verwenden möchten.
Erstellen Sie Sicherungskopien der folgenden Dateien im Ordner für das neue Design sowie Sicherungskopien aller weiteren Dateien, die Sie ändern müssen, um das Design zu erstellen. In diesen Kopien werden die ursprünglichen Einstellungen für den Fall aufbewahrt, dass Sie Ihre Änderungen rückgängig machen möchten:
- premium.css
- csssprites.png
- csssprites2.png
- headerbgmain.png
- headerbgright.png
Führen Sie die in den folgenden Abschnitten beschriebenen Schritte durch, um die Dateien im Ordner für das neue Design zu ändern und es zu erstellen.
Starten Sie die Internetinformationsdienste (IIS) mithilfe des Befehls iisreset/noforce neu.
Testen Sie das neue Design, indem Sie sich bei Outlook Web App anmelden und das neue Design auswählen.

Benennen des benutzerdefinierten Designs

Öffnen Sie die Kopie der Datei "themeinfo.xml" im Ordner des benutzerdefinierten Designs.
Suchen Sie nach dem Wert displayname für das Design, und ändern Sie ihn in den Namen, den das Design erhalten soll.

Beispiel: Wenn Sie das Design "Fourth Coffee" nennen möchten, muss die Datei Folgendes enthalten: theme displayname = "Fourth Coffee".
Ändern Sie den Wert für sortorder, um Ihr Design an die gewünschte Stelle in der Designauswahl in Outlook Web App zu platzieren.

Beispiel: Wenn das Design zuerst angezeigt werden soll, muss die Datei die Zeile sortorder = 1 enthalten.
Speichern Sie Ihre Änderungen, und schließen Sie die Datei themeinfo.xml.
Beenden und starten Sie IIS auf dem Clientzugriffsserver, indem Sie ein Eingabeaufforderungsfenster öffnen und den Befehl iisreset/noforce verwenden.
Melden Sie sich bei Outlook Web App an, klicken Sie auf Optionen, und suchen Sie dann in der Designauswahl nach dem neuen Design, um Ihre Änderungen zu testen. Wenn das Design nicht aufgeführt ist, löschen Sie mithilfe von "Internetoptionen" in Microsoft Internet Explorer die temporären Dateien. Aktualisieren Sie dann den Browser, und versuchen Sie erneut, die Designauswahl anzuzeigen.

Erstellen eines benutzerdefinierten Symbols für Ihr Design

Sie müssen die Datei "themepreview.png" bearbeiten, um ein benutzerdefiniertes Symbol für das Design zu erstellen. Diese Datei enthält das Symbol für Ihr Design in der Designauswahl in Outlook Web App.

Öffnen Sie "themepreview.png" in einem Bildbearbeitungstool, und nehmen Sie die gewünschten Änderungen vor. Ändern Sie nicht die Abmessungen. Das Bild ist 32 x 32 Pixel groß.
Melden Sie sich bei Outlook Web App an, klicken Sie auf Optionen, und suchen Sie dann in der Designauswahl nach dem neuen Design, um Ihre Änderungen zu testen. Wenn das neue Symbol nicht angezeigt wird, löschen Sie mithilfe von "Internetoptionen" in Internet Explorer die temporären Dateien. Aktualisieren Sie dann den Browser, und versuchen Sie erneut, die Designauswahl anzuzeigen.

Erstellen einer benutzerdefinierten Kopfzeile

Sie müssen die folgenden Dateien bearbeiten, mit denen die Kopfzeile oben in Outlook Web App erstellt wird, um die Kopfzeile in Outlook Web App zu ändern:

headerbgmain.png
headerbgright.png
headerbgmainrtl.png (diese Datei müssen Sie nur bearbeiten, wenn Sie Sprachen unterstützen, die von rechts nach links geschrieben werden).

Öffnen Sie die PNG-Dateien in einem Bildbearbeitungstool, und nehmen Sie die gewünschten Änderungen vor. Ändern Sie nicht die Abmessungen.
Verwenden Sie zum Ändern des Logos ein Bildbearbeitungstool, das transparente Hintergründe unterstützt, wie Paint.NET oder Photoshop, um "csssprites.png" zu öffnen und zu ändern. Diese Datei weist einen transparenten Hintergrund auf. Verschieben Sie nicht die Bilder in der Datei, und ändern Sie nicht ihre Größe, weil Outlook Web App jedes Symbol oder Logo von einem bestimmten Ort in "csssprites.png" abruft. Wenn Sie eine Bearbeitung an der Datei vornehmen, müssen Sie das neue Bild genau auf dem Bild ausrichten, das Sie ersetzen.
Speichern Sie Ihre Änderungen nach dem Bearbeiten der Dateien.
Melden Sie sich bei Outlook Web App an, klicken Sie auf Optionen, und wählen Sie in der Designauswahl Ihr Design aus, um die Änderungen am benutzerdefinierten Design zu testen. Wenn das neue Design nicht angezeigt wird, löschen Sie mithilfe von "Internetoptionen" in Internet Explorer die temporären Dateien. Aktualisieren Sie dann den Browser, und versuchen Sie erneut, das benutzerdefinierte Design auszuwählen.

Verwenden der Entwicklertools von Internet Explorer zum Bestimmen von Farben

Internet Explorer 8 und Internet Explorer 9 umfassen Entwicklertools, mit denen Sie die Farben und Schriftarten bestimmter Elemente bestimmen und Änderungen an diesen Werten testen können. Dann können Sie die Informationen aus den Entwicklertools verwenden, um diese Werte in den CSS-Dateien zu suchen und sie dort zu ändern, um ein Design anzupassen.

Melden Sie sich bei Outlook Web App an, und wählen Sie ein beliebiges Design aus.
Navigieren Sie zu einem Modul, das das anzupassende Element zeigt. Wenn Sie beispielsweise die Hervorhebungsfarbe in Mail anpassen möchten, navigieren Sie zu Mail.
Wählen Sie in Internet Explorer auf der Programmsymbolleiste "Tools > Entwicklertools" aus, oder drücken Sie F12.
Ordnen Sie die Fenster so an, dass Outlook Web App und die Entwicklertoolfenster sich nicht überlappen.
Klicken Sie in den Entwicklertools auf der Symbolleiste links auf den Auswahlpfeil, oder drücken Sie STRG+B.
Bewegen Sie den Mauszeiger über den Abschnitt von Outlook Web App, den Sie anpassen möchten. Um jedes Element, über das Sie den Mauszeiger bewegen, wird eine Kontur angezeigt. Klicken Sie, wenn das zu ändernde Element die Kontur aufweist.
Sehen Sie sich das Fenster "Entwicklertools" an. Dort wird der Code angezeigt, der zum Erstellen der Seite verwendet wird. Das Element, das Sie ausgewählt haben, ist im linken Fenster hervorgehoben.
Suchen Sie im rechten Fenster nach der Farbe des Elements. Sie wird als RGB-Wert dargestellt, und zwar in Form einer Zeichenfolge mit 7 Zeichen, die aus dem Zeichen # gefolgt von 6 alphanumerischen Zeichen besteht. Beispielsweise wird weiß als #ffffff ausgedrückt.
Wenn kein RGB-Wert vorhanden ist, wiederholen Sie die oben stehenden Schritte, und versuchen Sie es erneut.
Wenn Sie einen RGB-Wert finden, ändern Sie ihn nach Wunsch, und drücken Sie dann die EINGABETASTE. Die Änderung wird fast sofort in Outlook Web App angezeigt. Hiermit wird nicht das Design geändert, sondern lediglich die lokalen Einstellungen für die aktuelle Sitzung.
Im rechten Bereich der Entwicklertools wird angezeigt, in welcher Datei sich der Wert befindet und wo in dieser Datei er sich befindet.
Wenn Sie den zu ändernden Wert gefunden haben, müssen Sie auf dem Clientzugriffsserver zum Ordner für das benutzerdefinierte Design navigieren und diesen Wert in "premium.css" ändern.

Hinweis

Unter Farbtabelle in der MSDN-Bibliothek finden Sie die HTML RGB-Werte für viele Farben. Wenn Sie eine bestimmte Farbe benötigen und diese online nicht finden, erstellen Sie ein Beispiel der Farbe in einem Bildbearbeitungstool, und ermitteln Sie so den entsprechenden RGB-Wert für HTML. Die Entwicklertools umfassen eine nützliche Farbauswahl. Wählen Sie im Menü Extras > Farbauswahl anzeigen aus. Positionieren Sie den Mauszeiger über ein Element in der gewünschten Farbe, um den RGB-Wert dieser Farbe zu ermitteln.

Ändern von Farben in einem Design

Nachdem Sie die zu ändernde Farbe gefunden und den stattdessen gewünschten RGB-Wert ermittelt haben, müssen Sie die entsprechende Eigenschaft im Premium-Stylesheet (premium.css) auf dem Clientzugriffsserver suchen und den vorhandenen Wert durch den neuen Wert ersetzen.

Öffnen Sie die Datei "premium.css" in Ihrem benutzerdefinierten Design mithilfe eines Texteditors, z. B. Editor.
Suchen Sie in der Datei nach dem Wert, den Sie mithilfe der Internet Explorer-Tools gefunden haben.
Ersetzen Sie den vorhandenen RGB-Wert durch den RGB-Wert der Farbe, die Sie verwenden möchten.
Melden Sie sich bei Outlook Web App an, klicken Sie auf Optionen, und wählen Sie in der Designauswahl Ihr Design aus, um die Änderungen am benutzerdefinierten Design zu testen. Wenn Ihre Änderungen nicht angezeigt werden, verwenden Sie "Internetoptionen" in Internet Explorer, um die temporären Dateien zu löschen. Aktualisieren Sie dann den Browser, und versuchen Sie erneut, das benutzerdefinierte Design auszuwählen.

Ändern von Symbolen und Logos in einem Design

Verwenden Sie zum Ändern der Symbole und Logos in einem Design ein Bildbearbeitungstool, das transparente Hintergründe unterstützt, wie Paint.NET oder Photoshop, um "csssprites.png" und "csssprites2.png" zu öffnen und zu ändern. Diese Dateien weisen einen transparenten Hintergrund auf, der erhalten bleiben muss, damit die einzelnen Elemente richtig angezeigt werden. Verschieben Sie nicht die Bilder in der Datei, und ändern Sie nicht ihre Größe, weil Outlook Web App jedes Bild von einem bestimmten Ort in der Datei abruft. Wenn Sie eine Bearbeitung in der Datei vornehmen, müssen Sie das neue Bild genau an den Ort des Bilds platzieren, das Sie ersetzen.

So ändern Sie ein Bild

Verwenden Sie ein Bildbearbeitungstool, das transparente Hintergründe unterstützt, um die Datei mit den zu ändernden grafischen Elementen zu öffnen.
Bearbeiten Sie das Element, das Sie ändern möchten, und wahren Sie dabei den Ort und die Größe des ursprünglichen Elements.
Speichern und schließen Sie die Datei.
Melden Sie sich bei Outlook Web App an, klicken Sie auf Optionen, und wählen Sie in der Designauswahl Ihr Design aus, um die Änderungen am benutzerdefinierten Design zu testen. Wenn Ihre Änderungen nicht angezeigt werden, verwenden Sie "Internetoptionen" in Internet Explorer, um die temporären Dateien zu löschen. Aktualisieren Sie dann den Browser, und versuchen Sie erneut, das benutzerdefinierte Design auszuwählen.

Festlegen des Standarddesigns für Outlook Web App

Wenn Sie ein Standarddesign festlegen, wird dieses nur für Benutzer verwendet, die sich bisher noch nicht bei Outlook Web App angemeldet und ein neues Design ausgewählt haben.

Wenn alle Benutzer ausschließlich das Standarddesign verwenden sollen, müssen Sie ein neues Standarddesign festlegen und gleichzeitig die Designauswahl deaktivieren.

Festlegen des Standarddesigns für Outlook Web App mithilfe der Shell

Bevor Sie dieses Verfahren ausführen können, müssen Ihnen die entsprechenden Berechtigungen zugewiesen werden. Informationen zu den von Ihnen benötigten Berechtigungen finden Sie unter "Virtuelle Outlook Web App-Verzeichnisse" im Thema Clientzugriffsberechtigungen.

In diesem Beispiel wird das Standarddesign für Outlook Web App festgelegt, wobei der Servername "FourthCoffee", der Name des virtuellen Verzeichnisses "owa" und der Websitename "Default Web site" lautet und das Design im Ordner "Custom" gespeichert ist.

set-owavirtualdirectory -identity "fourthcoffee\owa (default web site)" -defaulttheme Custom

Ausführliche Informationen zu Syntax und Parametern finden Sie unter Set-OwaVirtualDirectory.

Deaktivieren der Designauswahl für Outlook Web App mithilfe der Shell