Créer un thème pour Outlook Web App

 

S’applique à : Exchange Server 2010 SP2, Exchange Server 2010 SP3

Dernière rubrique modifiée : 2016-11-28

Cette rubrique décrit la procédure de création d’un thème personnalisé pour Microsoft Office Outlook Web App. Un thème est un ensemble de fichiers multimédia et de feuilles de style en cascade (.css) qui contrôlent l’apparence d’Outlook Web App.

Par défaut, plusieurs thèmes sont installés comme suit lors de l’installation du rôle serveur d’accès au client sur un ordinateur exécutant Microsoft Exchange Server 2010 :

  • Fichiers .css : définissent les couleurs, les dégradés et les polices.

  • Fichiers d’image (.png) : fournissent les icônes et autres éléments graphiques. Si vous éditez l’une des icônes, ne modifiez pas leur taille. Si vous modifiez la taille d’un élément graphique, testez vos changements pour vérifier qu’ils s’assemblent toujours correctement.

Ces fichiers sont stockés sur le serveur d’accès au client, dans le répertoire d’installation \Client Access\OWA\<version>\themes. Chaque thème est stocké dans un sous-répertoire de thèmes. Vous pouvez créer des thèmes supplémentaires en copiant un thème existant et en modifiant la copie.

RemarqueRemarque :
La version allégée d’Outlook Web App ne prend pas en charge les thèmes.

Recommandations

De nombreux éléments d’un thème Outlook Web App peuvent être modifiés. Pour éviter toute instabilité d’Outlook Web App, il est conseillé de ne modifier que les fichiers directement liés à votre thème personnalisé.

Pour une expérience optimale, suivez les recommandations suivantes :

  • Créez toujours les copies de sauvegarde de fichiers d’origine avant de les modifier.

  • Avant d’appliquer des mises à niveau ou des correctifs à un serveur d’accès au client comportant des thèmes personnalisés, créez des copies de ces thèmes.

  • N’effectuez qu’un ou deux changements à la fois et testez-les avant d’apporter d’autres modifications.

  • Ne changez pas les fichiers présents dans \Client Access\OWA\<version>\themes\resources. Les polices et autres paramètres définis dans ces fichiers sont utilisés par chaque thème d’Outlook Web App. Les fichiers ne peuvent pas être modifiés sans affecter chaque thème.

  • Les thèmes sont enregistrés sur chaque serveur d'accès au client. Si vous avez plusieurs serveurs d'accès au client et souhaitez un thème personnalisé disponible sur tous les serveurs, vous devez copier le thème dans le répertoire de thèmes sur chaque serveur d'accès au client.

Souhaitez-vous rechercher les autres tâches de gestion relatives à la personnalisation de l’apparence d’Outlook Web App ? Consultez la rubrique Personnaliser les pages de connexion et de déconnexion d’Outlook Web App.

Que voulez-vous faire ?

  • Créer un nouveau thème Outlook Web App

  • Nommer votre thème personnalisé

  • Créer une icône personnalisée pour votre thème

  • Créer un en-tête personnalisé

  • Déterminer les couleurs à l’aide des outils de développement d’Internet Explorer

  • Modifier des couleurs dans un thème

  • Modifier les icônes et les logos d’un thème

  • Définir le thème Outlook Web App par défaut

Créer un nouveau thème Outlook Web App

Des autorisations doivent vous être attribuées avant de pouvoir exécuter cette procédure. Pour voir les autorisations qui vous sont nécessaires, voir Entrée « Éditeur de graphiques » de la rubrique Autorisations d'accès client.

  1. Sur le serveur d’accès au client hébergeant Outlook Web App, ouvrez l’Explorateur Windows, puis recherchez le répertoire d’installation du serveur Exchange.

  2. Dans \Client Access\OWA\<version>\themes, recherchez un thème utilisant un modèle de couleurs similaire à celui qui vous intéresse, puis créez-en une copie.

  3. Attribuez à la copie que vous venez de créer un nom court similaire à celui que vous voulez donner au thème.

  4. Créez des copies de sauvegarde des fichiers suivants dans votre nouveau dossier de thèmes, en plus de tous les autres que vous devrez modifier pour créer un thème. Ces copies conserveront vos paramètres d’origine en cas d’annulation des modifications :

    • premium.css ;

    • csssprites.png

    • csssprites2.png

    • headerbgmain.png

    • headerbgright.png

  5. Pour modifier les fichiers contenus dans le nouveau dossier de thèmes afin de créer votre propre thème, suivez les étapes décrites dans les sections suivantes.

  6. Redémarrez les services Internet (IIS) à l'aide de la commande iisreset/noforce.

  7. Testez le nouveau thème en vous connectant à Outlook Web App et en sélectionnant le nouveau thème.

Nommer votre thème personnalisé

Des autorisations doivent vous être attribuées avant de pouvoir exécuter cette procédure. Pour voir les autorisations qui vous sont nécessaires, voir Entrée « Éditeur de graphiques » de la rubrique Autorisations d'accès client.

  1. Ouvrez la copie de themeinfo.xml située dans le dossier de thèmes personnalisés.

  2. Recherchez la valeur displayname du thème, puis modifiez-la au nom que vous voulez attribuer au thème.

    Exemple : Pour nommer votre thème Fourth Coffee, le fichier doit se présenter comme suit : theme displayname = "Fourth Coffee".

  3. Modifiez la valeur sortorder pour insérer votre thème à l’emplacement désiré dans le sélecteur de thèmes d’Outlook Web App.

    Exemple : pour définir votre thème afin qu’il apparaisse en première position, le fichier doit se présenter comme suit : sortorder = 1.

  4. Enregistrez vos modifications, puis fermez le fichier themeinfo.xml.

  5. Arrêtez et démarrez les services Internet (IIS) sur le serveur d’accès au client en ouvrant une fenêtre d’invite de commandes et en exécutant la commande iisreset/noforce.

  6. Pour tester vos changements, connectez-vous à Outlook Web App, cliquez sur Options, puis recherchez votre propre thème dans le sélecteur de thèmes. Si le thème désiré ne figure pas dans la liste, utilisez Options Internet de Microsoft Internet Explorer pour supprimer les fichiers temporaires. Actualisez ensuite le navigateur et essayez à nouveau d’afficher le sélecteur de thèmes.

Créer une icône personnalisée pour votre thème

Des autorisations doivent vous être attribuées avant de pouvoir exécuter cette procédure. Pour voir les autorisations qui vous sont nécessaires, voir Entrée « Éditeur de graphiques » de la rubrique Autorisations d'accès client.

Pour créer une icône personnalisée pour votre thème, vous devez modifier le fichier themepreview.png. Ce fichier représente l’icône de votre thème dans le sélecteur de thèmes d’Outlook Web App.

  1. Ouvrez themepreview.png dans un outil d’édition d’images et apportez les modifications désirées. Ne modifiez pas les dimensions. L’image est de 32 x 32 pixels.

  2. Pour tester vos changements, connectez-vous à Outlook Web App, cliquez sur Options, puis recherchez votre nouveau thème dans le sélecteur de thèmes. Si la nouvelle icône ne figure pas dans la liste, utilisez Options Internet de Internet Explorer pour supprimer les fichiers temporaires. Actualisez ensuite le navigateur et essayez à nouveau d’afficher le sélecteur de thèmes.

Créer un en-tête personnalisé

Des autorisations doivent vous être attribuées avant de pouvoir exécuter cette procédure. Pour voir les autorisations qui vous sont nécessaires, voir Entrée « Éditeur de graphiques » de la rubrique Autorisations d'accès client.

Pour modifier l’en-tête dans Outlook Web App, vous devez éditer les fichiers suivants qui sont utilisés pour créer l’en-tête au sommet d’Outlook Web App :

  • headerbgmain.png

  • headerbgright.png

  • headerbgmainrtl.png (il est uniquement nécessaire d’éditer ce fichier si vous prenez en charge les langues lues de droite à gauche).

  1. Ouvrez les fichiers .png dans un outil d’édition d’images et apportez les modifications désirées. Ne modifiez pas les dimensions.

  2. Pour changer le logo, utilisez un outil d’édition d’images prenant en charge les arrière-plans transparents, tels que Paint.NET ou Photoshop, pour ouvrir et modifier le fichier csssprites.png. Ce fichier contient un arrière-plan transparent. Ne déplacez pas les images contenues dans le fichier et ne modifiez pas leur taille, car Outlook Web App extrait chaque icône ou logo d’un emplacement spécifique de csssprites.png. Lors de la modification d’un élément dans le fichier, vous devez aligner la nouvelle image exactement au-dessus de l’image remplacée.

  3. Après avoir modifié les fichiers, enregistrez vos modifications.

  4. Pour tester les modifications apportées au thème personnalisé, connectez-vous à Outlook Web App, cliquez sur Options, puis sélectionnez votre thème dans le sélecteur de thèmes. Si le nouveau thème désiré ne figure pas dans la liste, utilisez Options Internet de Internet Explorer pour supprimer les fichiers temporaires. Actualisez ensuite le navigateur et essayez à nouveau de sélectionner le thème personnalisé.

Déterminer les couleurs à l’aide des outils de développement d’Internet Explorer

Internet Explorer 8 et Internet Explorer 9 incluent des outils de développement qui vous permettent de déterminer les couleurs et les polices d’éléments spécifiques, et de tester les modifications apportées à ces valeurs. Vous pouvez utiliser ensuite les informations des outils de développement pour rechercher ces valeurs dans les fichiers .css et les modifier directement dans ces derniers afin de personnaliser un thème.

  1. Connectez-vous à Outlook Web App et sélectionnez un thème de votre choix.

  2. Accédez à un module présentant l’élément que vous souhaitez à personnaliser. Par exemple, pour personnaliser la couleur de surlignage de Courrier, accédez à Courrier.

  3. Dans Internet Explorer, accédez à la barre d’outils du programme, puis sélectionnez Outils > Outils de développement ou appuyez sur la touche F12.

  4. Organisez les fenêtres afin que les fenêtres d’Outlook Web App et des outils de développement ne se chevauchent pas.

  5. Dans Outils de développement, cliquez sur la flèche de sélection située à gauche de la barre d’outils ou appuyez sur CTRL+B.

  6. Déplacez le pointeur sur la section d’Outlook Web App que vous souhaitez personnaliser. Un contour s’affiche autour de chaque élément survolé par le pointeur. Cliquez sur l’élément une fois ce dernier délimité par un contour.

  7. Regardez dans la fenêtre Outils de développement. Le code utilisé pour créer la page, ainsi que l’élément que vous avez sélectionné, sont mis en surbrillance dans la fenêtre de gauche.

  8. Recherchez la couleur de cet élément dans la fenêtre de droite. Il s’agit d’une valeur RVB représentée par une chaîne composée de sept caractères commençant par un signe # et suivie de six caractères alphanumériques. Par exemple, le blanc est représenté sous la forme #ffffff.

  9. Si une valeur RVB n’est pas visible, répétez les étapes précédentes et réessayez.

  10. Lorsque vous détectez une valeur RVB, remplacez-la par la valeur désirée, puis appuyez sur Entrée. La modification apparaît dans Outlook Web App presque instantanément. Cela ne modifie que les paramètres locaux et uniquement pour la session en cours, pas le thème proprement dit.

  11. Le volet droit de la fenêtre Outils de développement présente le fichier dans lequel se trouve la valeur et son emplacement précis.

  12. Après avoir trouvé la valeur à modifier, vous devez accéder au dossier correspondant au thème personnalisé sur le serveur d’accès au client et modifier cette valeur dans premium.css.

RemarqueRemarque :
Pour plus d'informations sur les valeurs HTML RVB de nombreuses couleurs, consultez la rubrique Tableau des couleurs dans MSDN Library. Si vous recherchez une couleur spécifique et ne parvenez pas à trouver une correspondance pour la couleur en ligne, vous pouvez utiliser un outil d’édition d’images afin de prélever un échantillon de couleur et déterminer sa valeur HTML RVB. Les outils de développement incluent un outil de sélection de couleur pratique. Sélectionnez Outils > Afficher le sélecteur de couleurs dans le menu. Pour déterminer la valeur RVB d’une couleur désirée, positionnez le pointeur de la souris sur un élément contenant cette couleur.

Modifier des couleurs dans un thème

Après avoir localisé la couleur à modifier et déterminé la valeur RVB sur laquelle vous souhaitez la définir, vous devez rechercher cette propriété dans la feuille de style premium (premium.css) sur le serveur d’accès au client et remplacer la valeur existante par la nouvelle valeur.

Des autorisations doivent vous être attribuées avant de pouvoir exécuter cette procédure. Pour voir les autorisations qui vous sont nécessaires, voir Entrée « Éditeur de graphiques » de la rubrique Autorisations d'accès client.

  1. Ouvrez le fichier premium.css dans le thème personnalisé à l’aide d’un éditeur de texte, tel que le Bloc-notes.

  2. Dans le fichier, recherchez la valeur détectée à l’aide des outils d’Internet Explorer.

  3. Remplacez la valeur RVB par la valeur RVB de la couleur souhaitée.

  4. Pour tester les modifications apportées au thème personnalisé, connectez-vous à Outlook Web App, cliquez sur Options, puis sélectionnez le thème de votre choix dans le sélecteur de thèmes. Si les modifications n’apparaissent pas, utilisez Options Internet d’Internet Explorer pour supprimer les fichiers temporaires. Actualisez ensuite le navigateur et essayez à nouveau de sélectionner le thème personnalisé.

Modifier les icônes et les logos d’un thème

Des autorisations doivent vous être attribuées avant de pouvoir exécuter cette procédure. Pour voir les autorisations qui vous sont nécessaires, voir Entrée « Éditeur de graphiques » de la rubrique Autorisations d'accès client.

Pour modifier les icônes et les logos dans un thème, utilisez un outil d’édition d’images prenant en charge les arrière-plans transparents, tels que Paint.NET ou Photoshop, pour ouvrir et modifier csssprites.png et csssprites2.png. Ces fichiers comportent un arrière-plan transparent qui doit être préservé pour afficher correctement chacun des éléments. Ne déplacez pas les images contenues dans le fichier et ne modifiez pas leur taille, car Outlook Web App extrait chaque image d’un emplacement spécifique du fichier. Lorsque vous modifiez un élément du fichier, vous devez positionner la nouvelle image exactement au même emplacement que l’image remplacée.

Pour modifier une image :

  1. Utilisez un outil d’édition d’images prenant en charge les arrière-plans transparents pour ouvrir le fichier contenant les éléments graphiques que vous souhaitez modifier.

  2. Modifiez l’élément que vous souhaitez modifier, en veillant à préserver l’emplacement et la taille de l’élément d’origine.

  3. Enregistrez et fermez le fichier.

  4. Pour tester les modifications apportées à votre thème personnalisé, connectez-vous à Outlook Web App, cliquez sur Options, puis sélectionnez votre thème dans le sélecteur de thèmes. Si les modifications n’apparaissent pas, utilisez Options Internet dans Internet Explorer pour supprimer les fichiers temporaires. Actualisez ensuite le navigateur et essayez à nouveau de sélectionner le thème personnalisé.

Définir le thème Outlook Web App par défaut

Lorsque vous définissez un thème par défaut, seuls les utilisateurs ne s’étant pas connectés auparavant à Outlook Web App et n’ayant pas sélectionné un nouveau thème seront contraints d’utiliser le thème par défaut.

Pour forcer tous les utilisateurs à utiliser le thème par défaut, vous devez désactiver la sélection de thème et configurer un nouveau thème par défaut.

Définir le thème Outlook Web App par défaut via l’environnement de ligne de commande Exchange Management Shell

Des autorisations doivent vous être attribuées avant de pouvoir exécuter cette procédure. Pour voir les autorisations qui vous sont nécessaires, voir Entrée « Répertoires virtuels Outlook Web App » de la rubrique Autorisations d'accès client.

Cet exemple définit le thème par défaut d’Outlook Web App, où le nom du serveur est « FourthCoffee », le nom du répertoire virtuel « owa », le nom du site Web « Default Web site » et le thème se trouve dans le dossier nommé « Custom ».

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

Pour des informations détaillées sur la syntaxe et les paramètres, voir Set-OwaVirtualDirectory.

Désactiver la sélection de thèmes dans Outlook Web App via l’environnement de ligne de commande Exchange Management Shell

Des autorisations doivent vous être attribuées avant de pouvoir exécuter cette procédure. Pour voir les autorisations qui vous sont nécessaires, voir Entrée « Répertoires virtuels Outlook Web App » de la rubrique Autorisations d'accès client.

Cet exemple illustre la désactivation de la sélection de thèmes dans Outlook Web App, où le nom du serveur est « FourthCoffee », le nom du répertoire virtuel « owa » et le nom du site Web « Default Web site ».

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

De plus, vous pouvez exécuter les deux commandes simultanément comme l’illustre l’exemple suivant :

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

Pour des informations détaillées sur la syntaxe et les paramètres, voir Set-OwaVirtualDirectory.

Autres tâches

Après avoir créé un thème, vous pouvez également Personnaliser les pages de connexion et de déconnexion d’Outlook Web App.

 © 2010 Microsoft Corporation. Tous droits réservés.