L’un des changements les plus directement visibles que vous pouvez apporter à la personnalisation du tableau de bord est la couleur de l’onglet. C’est à partir de ce moment que vous avez vraiment l’impression de travailler avec une version personnalisée du logiciel. Je suppose que l’entête du tableau de bord est déjà un minimum personnalisée, et que vous souhaitez modifier la couleur des onglets pour rendre l’interface homogène, tout au moins dans son aspect visuel.
Malheureusement, ce n’est pas un processus simple. Il existe de nombreux fichiers d’image qui doivent être modifiées en cohérence avec des modifications dans des fichiers HTML.
Avant de commencer, vous devez choisir une couleur pour les différents états de votre onglets « sélectionné » et « non sélectionné ». Il est généralement admis d’avoir l’onglet sélectionné du même ton, mais une nuance légèrement plus foncée que l’onglet non sélectionné. Chaque onglet (sélectionné et non sélectionné) est composé de 2 images, soit un total de 4 modifications d’image sont nécessaire pour achever cette tâche. N’oubliez pas de faire des copies de tous les fichiers pour les images originales afin que vous puissiez les réutiliser le cas échéant.
1. Ouvrez le fichier « bg_tab.gif » en utilisant un logiciel d’édition d’image comme Photoshop par exemple.
2. Réglez la teinte, le contraste et la luminosité jusqu’à obtenir les paramètres de votre choix pour l’onglet « sélectionné « . Documentez les modifications de paramètres car vous en aurez besoin à l’étape suivante. Enregistrez le fichier.
3. Ouvrez le fichier « subtabr.gif » et appliquez précisément les mêmes réglages que ceux effectués à l’étape 2. Enregistrez le fichier.
4. Répétez les étapes 1 à 3 avec les fichiers « bg_tab_dim.gif » et « subdimtabr.gif » en utilisant la couleur pour l’onglet « non sélectionné » que vous avez choisi.
5. Pour changer la couleur du texte dans l’onglet « sélectionné », vous devrez adapter le code de couleur HEX (« color: # XXXXXX; ») dans le fichier « PortalContent.css », pour l’étiquette – TabHiFont.
6. Pour changer la couleur du texte dans l’onglet « non sélectionné », vous devrez adapter le code de couleur HEX (color: # xxxxxx;) dans le fichier « PortalContent.css », pour les étiquettes suivantes :
TabDimFont: link – onglet non sélectionné
TabDimFont: visited – onglet sélectionné
TabDimFont: hover – onglet survolé
Dans notre exemple : Modification de la couleur de TabDimFont: link en noir (#000000) Modification de la couleur de TabDimFont: visited en bleu (#4F6070) Modification de la couleur de TabDimFont: hover en violet très clair (#9999FF)
Utilisez une couleur de texte un peu moins gras que celle de l’onglet « sélectionné ». Je vous recommande également de choisir une couleur différente pour utiliser la fonctionnalité de survol. Choisissez soit noir (# 000000) soit blanc (# FFFFFF) pour l’étiquette « TabDimFont: hover », ou toute autre couleur apportant suffisamment de contraste avec votre couleur de fond.
La dernière tâche consiste à définir la couleur de la ligne de l’onglet pour correspondre à la couleur la plus foncée de l’onglet « sélectionné ». Le but ici est de prolonger la couleur de fond de l’onglet « sélectionné » dans la ligne de celui-ci.
7. Ouvrez le fichier « bg_tab.gif » vous avez modifié à l’étape 2. Identifiez le code couleur hexadécimal de l’onglet à son point le plus bas. Notez ce code.
8. Ouvrez le fichier « PortalContent.css », et recherchez l’entrée « TabLineCell ». Modifiez l’entrée avec la valeur « XXXXXX » du code couleur HEX que vous avez identifié précédemment lors de l’étape 7.
TabLineCell (background-color: # XXXXXX;)
9. Rafraîchissez votre navigateur pour voir les changements et faire des ajustements si nécessaire.
Vous aurez besoin de répéter les étapes 1 à 6 plusieurs fois jusqu’à obtenir exactement le visuel que vous cherchez. Vous pouvez vous amuser à modifier la couleur de l’onglet « sélectionné » avec une couleur complètement différente de l’onglet « non sélectionné » et observez ainsi le contraste.
Attention : les modifications des fichiers cités ci-dessus seront effectuées pour les deux emplacements (environnement Windows).
- <Disque d’installation> :OracleBIoc4j_bij2eehomeapplicationsanalyticsanalyticsress_oracle10 b_mozilla_4
- <Disque d’installation> :OracleBIwebappress_oracle10 b_mozilla_4
Le processus n’est pas simple et nécessite en général de nombreux essais avant d’obtenir un résultat acceptable. Cela est très consommateur de ressource, mais il est quand même plus agréable de travailler avec une interface plus ou moins personnalisée. Le niveau de personnalisation reste, bien entendu, à votre appréciation et dépend de votre niveau d’exigence.
