OWA : Comment créer un thème personnalisé ?

Nous allons donc dans un premier temps créer un nouveau thème, puis appliquer ce thème comme thème par défaut à tous les utilisateurs et si nous voulons être plus directifs, nous forcerons l’utilisation de ce thème.

Tous les thèmes de OWA 2010 SP1 sont présents dans le répertoire :

Exchange Server\V14\ClientAccess\Owa\14.1.218.13\themes

Pour créer nouveau thème, les étapes à suivre sont :

1. Créer un nouveau répertoire dans le chemin indiqué ci-dessus
2. Remplacer ou modifier les fichiers du répertoire
3. Redémarrer IIS

Il est recommandé d’éviter de créer un nouveau répertoire ex-nihilo. Vous pouvez commencer en recopiant les fichiers qui sont dans le thème par défaut de OWA, à savoir le répertoire « base ».

Les fichiers que vous copiez sont des images, des feuilles de style, des sons, et des fichiers xml.

Quelques fichiers sont notables parmi tous ceux que vous allez copier :

• Headerbgmain.png : Image de fond affichée en haut de OWA une fois l’étape de logon effectuée, voir figure 4.
• Headerbgmainrtl.png : Image de fond affichée dans le cas du choix d’une langue écrivant de droite à gauche (arabe, israélien …).
• Headerbgright.png : image de fond utilisée pour combler le manque à droite (ou à gauche) dans le cas de hautes résolutions.

Si vous souhaitez remplacer l’apparence du thème, il faudra modifier ces trois images en gardant le même format (nombre de pixels en hauteur et largeur). Les trois images sont nécessaires pour assurer une cohérence du thème, quelle que soit la langue choisie par l’utilisateur.

• Themepreview.png : Image de prévisualisation du thème dans la fenêtre de sélection. Voir figure 5.
• ThemeInfo.xml : fichier xml décrivant le nom du thème et sa position dans la liste des thèmes proposés (0 étant la première position en haut à gauche de la liste).
• csssprites.png et csssprites2.png sont les deux images regroupant l’ensemble des icônes utilisés par OWA. L’approche d’avoir toutes les icônes dans une seule image a été choisie par l’équipe de construction de OWA pour réduire le nombre d’aller-retour lors du chargement de OWA et donc améliorer les performances de l’application web au global.

Il est donc possible de modifier des icônes utilisées par OWA mais pour cela, il faut aller les remplacer dans les fichiers sprites correspondants.

Attention

il est important de bien respecter la taille des images car la sélection d’une icône se fait en fonction de sa position en pixel dans le fichier csssprites correspondant. Voir figure 6.

Si par exemple vous souhaitez effacer le logo « Outlook Web App » ou remplacer le drapeau d’indicateur de suivi par une cloche dans l’image en figure 6, il suffit d’utiliser un outil gardant le fond transparent et d’obtenir l’image suivante en figure 7.

• Premium.css est la feuille de style utilisée pour générer le rendu de l’affichage lors de la navigation dans OWA avec un navigateur supporté pour l’expérience riche.
  Le plus simple pour s’y retrouver est de suivre la méthode employée dans la première partie avec les outils pour le développeur de Internet Explorer (en appuyant sur F12 dans le navigateur).
  Une fois que vous avez sélectionné la zone que vous souhaitez modifier, il reste à trouver la balise permettant de la repérer dans le fichier css. Par exemple, pour la couleur affichée lors de la sélection d’un message, il faut retrouver la balise « .sel >IMG.selBg »
  Pour rappel, dans le mode utilisé par les outils de développement, il est possible de modifier directement les éléments de la feuille de style mise en cache au niveau du navigateur ce qui permet de voir immédiatement l’impact d’une modification avant de la répercuter dans la feuille de style sur le serveur.
  Pour plus d’informations les feuilles de styles vous pouvez consulter cette rubrique.

Voir figure 8.

Avec OWA d’Exchange 2010 SP1, il est possible d’effectuer relativement simplement des modifications de l’apparence de OWA mais l’architecture utilisée et une bonne exploitation des feuilles de style ainsi que des modifications pertinentes d’images permettent d’aller encore plus loin et de construire un thème totalement cohérent avec la charte graphique d’une société.