Customizing the Look of Outlook Web Access

Dernière rubrique modifiée : 2007-09-06

Par Darcy Jayne

Pour impressionner vos utilisateurs et vos responsables, vous pouvez personnaliser Microsoft Office Outlook Web Access en utilisant le logo et les couleurs de votre organisation. Le personnalisation d'Outlook Web Access constitue un excellent moyen pour développer l'identité de votre organisation dans un outil sur lequel s'appuient de nombreux utilisateurs.

Cet article décrit la personnalisation des pages d'ouverture de session, de sélection de la langue et de fermeture de session, et la création d’un thème à l’aide d’un en-tête personnalisé. Si vous voulez créer un thème Outlook Web Access avec des modifications plus complexes pour votre organisation, commencez par analyser le fonctionnement des feuilles de style en cascade (fichiers .css). Une fois que vous avez assimilé le fonctionnement des fichiers .css, ne modifiez que quelques éléments à la fois et testez vos modifications pour vous assurer que les résultats correspondent à vos attentes.

Qu’est-ce qu’un thème ?

Un thème, également appelé jeu de couleurs dans les options Outlook Web Access, définit la couleur d’arrière-plan, les polices, les couleurs de surlignage, les icônes et l’en-tête utilisés par Outlook Web Access. Par défaut, deux thèmes sont installés lors de l'installation du rôle serveur d'accès au client sur un ordinateur exécutant Microsoft Exchange Server 2007. Les thèmes par défaut sont Bleu ciel et Noir carbone.

Chaque thème est un ensemble de fichiers multimédia et de feuilles de style en cascade (fichiers .css) stockés sur le serveur d'accès au client dans le répertoire d'installation dans \Client Access\OWA\version\themes. Chaque thème est stocké dans son propre sous-répertoire de \themes.

Le thème par défaut (Bleu ciel) est le thème de base accessible dans \themes\base. Le dossier de base contient tous les fichiers nécessaires pour définir un thème. Il s'agit des fichiers .css, des graphiques et du fichier .xml qui définit le nom du thème. Pour créer d'autres thèmes, il suffit de copier les fichiers sélectionnés dans un nouveau répertoire et de les modifier au besoin. Lorsqu'un thème personnalisé est utilisé, les éléments du répertoire du thème personnalisé sont d'abord utilisés ; tous les éléments requis qui n'ont pas été personnalisés sont issus du thème de base. Par exemple, si vous créez un thème en copiant uniquement les graphiques d'en-tête dans un nouveau thème et en les modifiant, lorsqu'un utilisateur sélectionne ce thème, les graphiques d'en-tête proviennent du nouveau thème et le reste des propriétés du thème proviennent du thème de base.

Nouveautés d'Exchange 2007 SP1

Outlook Web Access a ajouté deux thèmes supplémentaires dans Exchange Server 2007 Service Pack 1 (SP1). Les deux nouveaux thèmes sont Xbox et Zune.

Avant de commencer

Il est recommandé de suivre les indications suivantes lorsque vous modifiez ou créez un thème Outlook Web Access :

• Effectuez toujours des copies de sauvegarde des fichiers originaux avant de commencer à les modifier, en particulier lorsque vous modifiez des fichiers dans le répertoire \themes\base.

• Ne supprimez pas le dossier \Client Access\OWA\version\themes\base ou les fichiers qu'il contient.

• Ne modifiez pas les barres d'informations qui s'affichent en haut des messages pour avertir les utilisateurs en cas de détection de contenu potentiellement dangereux, d'attaques de type hameçonnage, de virus et de contenu bloqué ou manquant.

Création d'un thème

Créez un dossier pour un nouveau thème, puis copiez un sous-ensemble des fichiers du thème de base dans le nouveau dossier.

1. Connectez-vous au serveur d’accès au client hébergeant Outlook Web Access à l’aide d’un compte auquel a été déléguée l’appartenance au groupe Administrateurs local.

2. Ouvrez Windows Explorer, puis recherchez le répertoire d’installation du serveur Exchange.

3. Dans \Client Access\OWA\<version>\themes, créez un dossier, puis nommez-le (par exemple, Fourth Coffee).

4. Copiez les fichiers suivants du thème de base dans le nouveau dossier.

   • premium.css ;

   • owafonts.css ;

   • logopt.gif ;

   • logopb.gif ;

   • nbbkg.gif.

Affectation d'un nom pour le nouveau thème

Vous pouvez nommer un thème personnalisé de deux manières : la première manière consiste à donner le nom de votre choix au dossier dans lequel vous avez créé le thème. Par exemple, comme vous avez nommé le nouveau dossier Fourth Coffee, le nouveau thème est automatiquement nommé de la même manière.

Vous pouvez également nommer un thème personnalisé en copiant le fichier themeinfo.xml du thème de base dans le nouveau dossier, puis en modifiant le fichier. Vous pouvez modifier le fichier themeinfo.xml à l'aide d'un éditeur de texte tel que le Bloc-notes pour remplacer le nom complet du thème par le nom de votre choix. Le fichier themeinfo.xml remplace le nom de dossier par le nom de votre thème.

Pour nommer un nouveau thème à l’aide du fichier themeinfo.xml, procédez comme suit :

1. Copiez le fichier themeinfo.xml du dossier du thème de base dans le dossier Fourth Coffee.

2. Ouvrez la copie de themeinfo.xml située dans le dossier du thème personnalisé.

3. Recherchez la valeur theme displayname, puis modifiez la en Fourth Coffee Theme.

   Le fichier doit être nommé theme displayname = "Fourth Coffee Theme".

4. Enregistrez et fermez theminfo.xml.

Création d'un en-tête personnalisé

Maintenant que vous avez copié les fichiers et nommé votre thème, essayez de personnaliser l’en-tête. Pour modifier l'en-tête dans Outlook Web Access, vous avez besoin des fichiers suivants, déjà copiés dans le dossier pour le nouveau thème :

• premium.css ;

• owafonts.css ;

• logopt.gif ;

• logopb.gif ;

• nbbkg.gif.

Premium.css et owafonts.css définissent les polices et les couleurs utilisées par Outlook Web Access. Logopt.gif, logopb.gif et nbbkg.gif sont les fichiers image utilisés pour créer l'en-tête en haut de la page dans Outlook Web Access.

1. Commencez par utiliser un outil de modification des images pour ouvrir et modifier le fichier logopt.gif.

2. Par exemple, modifiez la couleur d’arrière-plan de logopt.gif en mauve avec la valeur HTML RVB de #DCBEC8. Modifiez les fichiers logopb.gif et nbbkg.gif pour qu'ils aient la même couleur d’arrière-plan.

Une valeur de couleur HTML RVB est définie par une chaîne de sept caractères au format du signe dièse (#) suivi par une chaîne de six autres caractères.

Pour tester votre thème personnalisé, connectez-vous à Outlook Web Access Premium (ne sélectionnez pas l’option Utilisez Outlook Web Access Light), cliquez sur Options, puis Paramètres généraux, puis sélectionnez votre thème personnalisé dans le menu Apparence. Vous devez enregistrer vos modifications, puis cliquer sur Actualiser pour afficher le nouveau thème.

Les figures suivantes présentent les fichiers d'origine utilisés pour créer l'en-tête du thème Outlook Web Access Bleu ciel et l'en-tête créé en modifiant ces fichiers.

Fichiers d'en-tête Outlook Web Access

En-tête personnalisé Outlook Web Access

Modification du thème Outlook Web Access par défaut

Maintenant que vous avez créé un thème et personnalisé l’en-tête, essayez de le définir comme thème par défaut pour Outlook Web Access. Pour modifier le thème Outlook Web Access par défaut et utiliser votre thème personnalisé au lieu du thème de base, utilisez la cmdlet Set-OwaVirtualDirectory. Pour les exemples suivants, vous utiliserez « FourthCoffeeCAS » pour le serveur, « owa » pour le répertoire virtuel, « Site Web par défaut » pour le site Web et « Fourth Coffee » pour le nom de dossier.

• Pour définir le thème par défaut pour Outlook Web Access sur Fourth Coffee, exécutez la commande suivante : set-owavirtualdirectory -identity "fourthcoffeeCAS\owa (default web site)" -defaulttheme "fourth coffee"

Si des utilisateurs sont déjà connectés à Outlook Web Access et ont sélectionné un thème, le nouveau thème ne leur sera pas imposé. Pour que le nouveau thème soit appliqué par tous les utilisateurs, vous devez désactiver la sélection de thèmes. Pour cela, vous devez également utiliser la cmdlet Set-OwaVirtualDirectory.

• Pour désactiver la sélection de thèmes dans Outlook Web Access, exécutez la commande suivante : set-owavirtualdirectory -identity "fourthcoffeeCAS\owa (default web site)" -themeselectionenabled $false

Vous pouvez utiliser les deux commandes simultanément en exécutant la commande suivante : set-owavirtualdirectory -identity "fourthcoffeeCAS\owa (default web site)" -defaulttheme "Fourth Coffee" -themeselectionenabled $false

Personnalisation des pages d'ouverture et de fermeture de session

Un thème personnalisé constitue un bon moyen de conférer une apparence personnalisée à Outlook Web Access une fois les utilisateurs connectés, mais une page d'ouverture de session personnalisée retiendra immédiatement l’attention. Outlook Web Access utilise uniquement les pages d'ouverture de session, de sélection de la langue et de fermeture de session du thème de base. Par conséquent, la création de pages personnalisées requiert de modifier les fichiers du dossier du thème de base.

Les styles de texte, couleurs et couleurs d’arrière-plan des pages d'ouverture de session, de sélection de la langue et de fermeture de session sont définis dans le fichier logon.css. Les pages sont créées en combinant un ensemble d’images stockées comme fichiers .gif. Les fichiers suivants créent la page d'ouverture de session :

• logon.css ;

• lgnbotl.gif ;

• lgnbotm.gif ;

• lgnbotr.gif ;

• lgnexlogo.gif ;

• lgnleft.gif ;

• lgnright.gif ;

• lgntopl.gif ;

• lgntopm.gif ;

• lgntopr.gif.

Vous allez créer une apparence en modifiant ces fichiers pour créer un ensemble de pages d'ouverture de session et de fermeture de session pour Fourth Coffee. Pour rester simple, vous utiliserez une couleur unie pour l’arrière-plan dans toutes les images.

Commencez par créer un dossier dans le dossier du thème de base et nommez-le « sauvegarde ». Copiez tous les fichiers utilisés pour créer les pages d'ouverture de session et de fermeture de session dans le nouveau dossier afin de disposer de copies de sauvegarde si vous voulez revenir aux pages d'ouverture et de fermeture de session d’origine. Le dossier du thème de base se trouve dans le répertoire d'installation d'Exchange dans \Client Access\OWA\version\themes\base.

Les figures suivantes présentent la page d'ouverture de session par défaut Outlook Web Access telle qu'elle apparaît si l'utilisateur clique sur afficher des explications et sélectionne Cet ordinateur est privé et Utiliser Outlook Web Access Light. Une des figures présente l'agencement entre les fichiers graphiques qui créent la page. L'autre figure montre la manière dont sont déterminées les couleurs d'arrière-plan et de texte dans la page d'ouverture de session par le fichier logon.css.

Affichage de fichiers graphiques personnalisés dans la page d'ouverture de session Outlook Web Access

Affichage d'options de texte dans la page d'ouverture de session Outlook Web Access par défaut

Les figures suivantes présentent la page de fermeture de session par défaut de Outlook Web Access. Une des figures présente l'agencement entre eux des fichiers graphiques qui créent la page. L'autre figure montre la manière dont sont déterminées les couleurs d'arrière-plan et de texte dans la page d'ouverture de session par le fichier logon.css.

Affichage de fichiers graphiques personnalisés dans la page de fermeture de session Outlook Web Access

Affichage d'options de texte dans la page de fermeture de session Outlook Web Access par défaut

Test des modifications sur les pages d'ouverture et de fermeture de session

Vous pouvez tester vos modifications à mesure que celles-ci sont effectuées. Pour ce faire, ouvrez la page de connexion Outlook Web Access dans Internet Explorer et suivez les étapes suivantes, en enregistrant après chaque modification.

1. Ouvrez la page d'ouverture ou de fermeture de session Outlook Web Access dans Internet Explorer. Si vous testez les modifications apportées au site Web par défaut sur le serveur d'accès au client hébergeant le répertoire virtuel Outlook Web Access, vous pouvez ouvrir Internet Explorer et entrer l'adresse URL https://localhost/owa.

2. Dans la barre d'outils, cliquez sur Outils, puis sur Options Internet.

3. Sous l'onglet Général, sous Fichiers Internet temporaires, cliquez sur Supprimer les fichiers, puis sur Oui lorsque vous êtes invité à confirmer la suppression des fichiers Internet Explorer temporaires.

4. Cliquez sur OK pour fermer la fenêtre Options Internet.

5. Cliquez sur Actualiser pour afficher vos modifications.

Répétez ces étapes pour afficher chaque modification effectuée sur les fichiers des pages d'ouverture ou de fermeture de session. Si vous effectuez plusieurs modifications, vous pouvez laisser la page d'ouverture ou de fermeture de session ouverte et répéter les étapes 2 à 6 pour afficher les modifications.

Personnalisation des fichiers image

Maintenant que vos fichiers d’origine sont sauvegardés dans un répertoire distinct et que vous savez comment consulter vos modifications à mesure qu'elles sont effectuées, vous pouvez modifier les fichiers .gif correspondant aux blocs de création graphique des pages d'ouverture de session, de sélection de la langue et de fermeture de session.

Pour ce faire, ouvrez le fichier Igntopl.gif à l’aide d’un outil de modification des images et apportez-y les modifications souhaitées, comme dans la figure suivante :

Logo Fourth Coffee

Comme la couleur d’arrière-plan de Igntopl.gif a été précédemment modifiée en mauve avec la valeur HTML RVB de #DCBEC8, vous devrez ouvrir chaque fichier .gif restant et modifier sa couleur d’arrière-plan de la même manière.

Finition

Maintenant que les fichiers .gif sont modifiés, vous devez également modifier le fichier logon.css pour que l’arrière-plan soit uniforme. Il se peut que la nouvelle couleur d’arrière-plan ne s’accorde pas parfaitement avec les couleurs du texte et des lignes de séparation d’origine. Outre la définition de la couleur d’arrière-plan afin que celui-ci corresponde à votre nouveau logo, vous devez modifier la couleur de texte primaire et la couleur des lignes de séparation pour vous rapprocher davantage de vos nouvelles pages.

Ces trois couleurs d’arrière-plan, de texte primaire et de lignes de division sont définies par les valeurs HTML RVB dans logon.css. Pour les modifier et utiliser de nouvelles couleurs, vous devez les rechercher dans logon.css et modifier leur valeur de couleur HTMPL RVB avec les valeurs souhaitées.

Pour modifier les couleurs, ouvrez logon.css dans un éditeur de texte tel que le Bloc-notes. Recherchez la chaîne pour chaque élément de couleur à modifier, remplacez la valeur HTML RVB par la nouvelle valeur en fonction des informations du tableau suivant, puis enregistrez et fermez logon.css.

Description des éléments des pages d'ouverture et de fermeture de session

Lorsque vous avez terminé, les nouvelles pages d'ouverture et de fermeture de session ressemblent aux figures suivantes.

Page d'ouverture de session Fourth Coffee

Page de fermeture de session Fourth Coffee

Pour plus d'informations

Pour plus d'informations sur la création de thèmes Outlook Web Access personnalisés, consultez la rubrique Procédure de création d'un thème pour Outlook Web Access.

Darcy Jayne - Rédacteur technique, Microsoft Exchange Server