Erstellen eines Designs für Outlook Web App

  • Artikel

Gilt für: Exchange Server 2013

Ein Design definiert die Hintergrundfarbe, Schriftarten, Hervorhebungsfarben, Symbole und Kopfzeilen, die von Microsoft Outlook Web App verwendet werden. Jedes Design ist eine Sammlung von Mediendateien und Cascading Stylesheets (.css), die auf dem Microsoft Exchange-Server im Installationsverzeichnis unter \Client Access\OWA\prem\version\resources\themes gespeichert sind. Jedes Design wird in einem eigenen Unterverzeichnis von \themes gespeichert.

Das Standarddesign befindet sich in \Client Access\OWA\prem\version\resources\themes\base. Jeder Designordner enthält alle Dateien, die zum Definieren eines Designs benötigt werden. Diese Dateien umfassen CSS-Dateien, Grafiken und eine .xml Datei, die den Namen des Designs definiert. Zusätzliche Designs werden erstellt, indem alle Dateien aus einem Design in einen neuen Ordner kopiert und diese Dateien nach Bedarf geändert werden.

Standardmäßig werden mehrere Designs installiert, wenn Sie Exchange Server 2013 wie folgt installieren:

  • CSS-Dateien (.css) definieren Farben, Farbverläufe und Schriftarten.

  • Bilddateien (.png) stellen die Symbole und andere Grafikelemente bereit. Wenn Sie eines der Symbole bearbeiten, ändern Sie die Größe nicht. Wenn Sie die Größe von Grafikelementen ändern, testen Sie die Änderungen, um sicherzustellen, dass die Elemente weiterhin ordnungsgemäß zusammenpassen.

Diese Dateien werden auf dem Clientzugriffsserver im Installationsverzeichnis in %ExchangeInstallPath%Client Access\OWA\prem\<version>\resources\themesgespeichert. Jedes Design wird in einem Unterverzeichnis von Designs gespeichert. Sie können zusätzliche Designs erstellen, indem Sie ein vorhandenes Design kopieren und die Kopie ändern.

Nachdem Sie ein Design erstellt haben, können Sie auch die Outlook Web App Anmelde-, Sprachauswahl- und Fehlerseiten anpassen.

Hinweis

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

Warnung

Wenn Sie über mehrere Server verfügen, die Outlook Web App unterstützen, müssen Sie Ihr benutzerdefiniertes Design auf jeden Server kopieren. Sie sollten auch eine Sicherungskopie Ihres benutzerdefinierten Designs erstellen. Bei der erneuten Installation oder beim Upgrade von Exchange werden sämtliche Dateien im Designordner überschrieben. Sie müssen Ihr Design nach Abschluss der Neuinstallation oder des Upgrades wieder in den entsprechenden Ordner kopieren.

Erstellen Sie Sicherungskopien aller Dateien, die Sie ändern, bevor Sie mit der Erstellung Ihres benutzerdefinierten Designs beginnen.

Was sollten Sie wissen, bevor Sie beginnen?

  • Geschätzte Zeit bis zum Abschließen dieser Aufgabe: 60 Minuten.

  • Bevor Sie dieses Verfahren bzw. diese Verfahren ausführen können, müssen Ihnen die entsprechenden Berechtigungen zugewiesen werden. Informationen dazu, welche Berechtigungen Sie benötigen, finden Sie unter dem Eintrag "Outlook Web App virtuelle Verzeichnisse" im Thema Berechtigungen für Clients und mobile Geräte.

  • Sie benötigen Administratorzugriff auf den lokalen Server, um diese Verfahren ausführen zu können.

  • Sie benötigen einen Texteditor, um die Standardfarben zu ändern, sowie einen Grafikeditor, um die Grafiken zu ändern. Wenn Sie eine bestimmte Farbe benötigen und diese unter Color Table (Farbtabelle) nicht finden, erstellen Sie ein Beispiel der Farbe in einem Bildbearbeitungstool, und ermitteln Sie so den entsprechenden HTML RGB-Wert.

  • Als bewährte Methode empfiehlt es sich, die folgenden Richtlinien zu verwenden, wenn Sie ein Outlook Web App Design ändern oder erstellen:

    • Wenn Sie ein vorhandenes Design bearbeiten möchten, erstellen Sie Sicherungskopien der ursprünglichen Dateien, bevor Sie mit der Bearbeitung beginnen.

    • Löschen Sie nicht den Ordner \Client Access\OWA\prem\version\resources\themes\base oder die darin enthaltenen Dateien.

  • Informationen zu Tastenkombinationen für die Verfahren in diesem Thema finden Sie unter Tastenkombinationen in der Exchange-Verwaltungskonsole.

Tipp

Liegt ein Problem vor? Bitten Sie in den Exchange-Foren um Hilfe. Besuchen Sie die Foren auf Exchange Server.

Schritt 1: Erstellen eines neuen Outlook Web App Designs

Zunächst erstellen Sie einen Ordner für ein neues Design und kopieren dann die Dateien aus einem vorhandenen Design in den neuen Ordner.

  1. Melden Sie sich bei dem Exchange-Server an, auf dem das virtuelle Verzeichnis Outlook Web App gehostet wird, mithilfe eines Kontos, für das die Mitgliedschaft in der lokalen Administratorgruppe delegiert wurde.

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

  3. Erstellen Sie in \Client Access\OWA\prem\version\resources\themes einen neuen Ordner, und nennen Sie ihn, z. B. Fourth Coffee.

  4. Kopieren Sie alle Dateien aus einem anderen Design in den neuen Ordner.

Schritt 2: Benennen Des neuen Designs

Gehen Sie wie folgt vor, um den Anzeigenamen für Ihr neues Design festzulegen:

  1. Öffnen Sie die Kopie von themeinfo.xml, die sich im benutzerdefinierten Designordner befindet, den Sie gerade erstellt haben.

  2. Suchen Sie den Designwert displayname , und ändern Sie den Wert in den Namen, den Sie verwenden möchten. Beispiel: displayname = "Fourth Coffee Theme".

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

Schritt 3: Ändern der Sortierreihenfolge ihres neuen Designs (optional)

Wenn Sie möchten, können Sie die Sortierreihenfolge des neuen Designs ändern, indem Sie die themeinfo.xml-Datei bearbeiten. Die Sortierreihenfolge bestimmt die Designposition im Bereich Design ändern im Menü Einstellungen.

Gehen Sie wie folgt vor, um die Sortierreihenfolge des neuen Designs mithilfe der themeinfo.xml-Datei zu ändern:

  1. Öffnen Sie die Kopie von themeinfo.xml, die sich im Ordner "Benutzerdefiniertes Design" befindet.

  2. Suchen Sie den Designwert sortorder , und ändern Sie den Wert so, dass er angibt, wo das neue Design in der Liste angezeigt werden soll. Die Designs werden nach dem numerischen Wert in zunehmender Reihenfolge sortiert. Standardmäßig ist das Basisdesign das erste, und sein sortorder Wert ist "0". Beispiel: sortorder="<number>".

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

Schritt 4: Ändern des neuen Designs

Nachdem Sie die Dateien kopiert und Ihr Design benannt haben, können Sie es anpassen. Die folgenden Elemente können in einem Outlook Web App Design angepasst werden:

  • Bilddateien, die den Kopfzeilenbereich und die Symbole definieren.

  • CSS-Dateien, die Schriftarten und Farben definieren.

Bilddateien

Designbilder werden in zwei Ordnern unter \themes_\<Designname>_\images\ gespeichert. Der Ordner \images\0 enthält Bilder, die in Sprachen von links nach rechts (z. B. Englisch) verwendet werden, und Sprachen, die von rechts nach links gelesen werden, verwenden die Bilder im Ordner \images\rtl.

Hinweis

Einige der Bilder im Ordner "\images\rtl" sind dieselben wie im Ordner "\images\0", aber sie werden gespiegelt.

Zum Anpassen des Designs können Sie ein Bildbearbeitungstool verwenden, um die folgenden Bilder zu öffnen und zu ändern:

  • Headerbgmain.png

    Dies ist das Standard Kopfzeilenbild. Es wird empfohlen, dass das Bild die Kopfzeilenhöhe von 30 Pixeln nicht überschreitet. Das Standarddesign verwendet kein Hintergrundbild, daher ist dieses Bild transparent. Ein Beispiel für ein Design mit einem benutzerdefinierten Hintergrundbild finden Sie im Bild im Ordner Blaupausendesign .

  • Headerbgright.png

    Dies wird als Kachelbild hinter dem Header verwendet. Das Standarddesign verwendet kein kachelndes Hintergrundbild, daher ist dieses Bild transparent. Ein Beispiel für ein Design mit einem benutzerdefinierten Kachelhintergrundbild finden Sie im Bild im Ordner Blaupausendesign .

  • sprite1.mouse.png

    Dies enthält die meisten Bilder, die in einem Design verwendet werden. Sie können die Farbe der Bilder an Ihr Design anpassen und auch die Standard-Outlook Web App Textlogos ändern.

    Um Probleme zu vermeiden, ändern Sie nicht die Größe einzelner Symbole im Sprite, und stellen Sie sicher, dass es als transparente .png-Datei gespeichert wird.

  • themepreview.png

    Dieses Bild wird verwendet, um das Design im Bereich Design ändern im Menü Einstellungen in Outlook Web App darzustellen.

Farben und Schriftarten

Cascading Stylesheet-Dateien (.css) definieren die Farben und Schriftarten, die in einem Design verwendet werden, und werden in mehreren Ordnern unter \themes\<design name> gespeichert. Der Ordner \<designname>\0 enthält .css Dateien, die in Sprachen von links nach rechts (z. B. Englisch) verwendet werden, und Sprachen, die von rechts nach links gelesen werden, verwenden die .css Dateien im Ordner \<Designname>\rtl. Es gibt auch sprachspezifische Ordner (z. B. \ja, \ko, \zhs und \zht), die .css Dateien enthalten, die mit diesen Sprachen verwendet werden sollen.

Ändern Sie zunächst den Ordner \<theme name>\images\0. Es gibt vier Farben, die in jedem Design verwendet werden und angepasst werden können.

  • BrandColor: #0072C6
  • NavBarHoverColor: #4C9CD7
  • UnreadColor: #2A8DD4
  • FocusColor: #DFEDFA

Sie können einen Text-Editor wie Editor verwenden, um alle Instanzen dieser Werte in den folgenden beiden Dateien zu suchen und durch die Farben Ihres Designs zu ersetzen: owa2styles.mouseCSS und owa2styles2.mouseCSS. Dies muss in jedem Ordner im neuen Design erfolgen, der diese .css Dateien enthält.

Schritt 5: Festlegen des Standarddesigns Outlook Web App

Das Festlegen eines neuen Standarddesigns wirkt sich nur auf Benutzer aus, die ihr Design nicht über das Menü Einstellungen in Outlook Web App geändert haben.

Um zu erzwingen, dass alle Benutzer das Standarddesign verwenden, müssen Sie zusätzlich zum Festlegen eines Standarddesigns die Designauswahl deaktivieren.

Verwenden Der Shell zum Festlegen des Standarddesigns für Outlook Web App

In diesem Beispiel wird das Standarddesign für Outlook Web App festgelegt, wobei der Servername fourthcoffeelautet, der Name owades virtuellen Verzeichnisses , der Websitename ist default web siteund das Design sich im Ordner namens befindetCustom.

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

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

Verwenden der Shell zum Deaktivieren der Designauswahl für Outlook Web App

In diesem Beispiel wird die Designauswahl in Outlook Web App deaktiviert, wobei der Servername fourthcoffee, der Name owades virtuellen Verzeichnisses und der Websitename istdefault web site.

set-owavirtualdirectory -identity "fourthcoffee\owa (default web site)" -themeselectionenabled $false

Sie können beide Befehle auch gleichzeitig ausführen, wie im folgenden Beispiel gezeigt:

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

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

Schritt 6: Führen Sie iisreset/noforce aus, um Ihre Änderungen zu speichern.

Wenn Sie ein Design hinzufügen oder ändern, den Namen eines Designs ändern oder die Sortierreihenfolge eines Designs ändern, müssen Sie internetinformationsdienste (IIS) beenden und starten, damit die Änderung wirksam wird. Öffnen Sie dazu ein Eingabeaufforderungsfenster auf dem Server, auf dem Sie Ihr neues Design erstellt haben, und führen Sie den Befehl iisresest /nforce aus.

Woher wissen Sie, dass diese Aufgabe erfolgreich war?

  1. Melden Sie sich bei Outlook Web App mit dem virtuellen Verzeichnis auf dem Server an, auf dem Sie Ihr neues Design erstellt haben. Wenn Sie die Änderungen an der Standardwebsite auf dem Exchange-Server testen, auf dem das virtuelle Verzeichnis Outlook Web App gehostet wird, können Sie Ihr Design testen, indem Sie internet Explorer öffnen und die URL https://localhost/owaeingeben.

  2. Wechseln Sie zu Ihrem benutzerdefinierten Design, indem Sie das Menü > Einstellungen Design ändern und Ihr benutzerdefiniertes Design auswählen.

Wenn Ihre neuesten Änderungen nicht angezeigt werden und iisreset/noforce ausgeführt wurde

  1. Wählen Sie auf der Symbolleiste Internet Explorer das Menü > Einstellungen Internetoptionen aus.

  2. Wählen Sie auf der Registerkarte Allgemein unter Browserverlaufdie Option Löschen aus, und überprüfen Sie dann, ob temporäre Internetdateien und Websitedateien aktiviert sind. Wählen Sie dann Löschen aus, um diese Dateien zu entfernen.

  3. Wählen Sie OK aus, um die Internetoptionen zu schließen.

  4. Wählen Sie Aktualisieren aus, um Ihre Änderungen anzuzeigen.

Möglicherweise müssen Sie diese Schritte wiederholen, um Ihre Änderungen jedes Mal anzuzeigen, wenn Sie eine Änderung an den Designdateien vornehmen. Wenn Sie mehrere Änderungen vornehmen, können Sie Outlook Web App geöffnet lassen und die Ausführung von iisreset/noforce auf dem Server wiederholen und bei Bedarf temporäre Dateien aus dem Internet Explorer löschen.