Changer l'apparence du site avec des thèmes

Vous pouvez modifier l'apparence de l'application Web IBM® Rational Asset Manager en créant des feuilles de style en cascade personnalisées et en fournissant des images personnalisées.

Avant de commencer

Si vous avez modifié les fichiers par défaut pour personnaliser votre thème pour une version antérieure de Rational Asset Manager, téléchargez le thème courant avant de passer à la version 7.5.2.3. Lors d'une mise à jour, il est remplacé par le thème par défaut de la version. Une fois la mise à jour de Rational Asset Manager sur le serveur terminée, réappliquez le thème à une installation de test afin de voir les éventuels problèmes provenant de versions antérieures.

Pourquoi et quand exécuter cette tâche

Un administrateur de référentiels peut télécharger une archive contenant les images et les feuilles de style en cascade qui définissent l'apparence de l'application Web. Une fois ces fichiers personnalisés, il remonte l'archive mise à jour pour implémenter la modification.

Procédure

  1. Connectez-vous au client Web en tant qu'administrateur de référentiels.
  2. Cliquez sur Administration.
  3. Cliquez sur Outils dans la barre latérale Administration du référentiel.
  4. Dans la page Outils, localisez la section Gérer le thème.
  5. Cliquez sur Télécharger le thème actuel.
  6. Enregistrez le fichier d'archive currentTheme.zip sur votre système local. Ce fichier archive contient les feuilles de style en cascade (CSS), les JSP (JavaServer Pages) et les fichiers image.
  7. Extrayez le contenu de l'archive. Conservez la structure des dossiers.
  8. Créez un ou plusieurs fichiers CSS et enregistrez-les dans le répertoire theme/custom/css.
  9. Examinez les feuilles de style par défaut installées avec Rational Asset Manager. Pour tous les styles que vous voulez modifier, copiez les règles de style dans votre fichier CSS et éditez les styles. Les modifications effectuées dans les nouveaux fichiers CSS remplacent les règles de style des feuilles de style par défaut.
    Important : Ne modifiez pas les feuilles de style par défaut dans le fichier archive de thème. Elles changent d'une version à l'autre et sont remplacées lors de la mise à niveau de Rational Asset Manager.
  10. Ajoutez vos feuilles de style personnalisées à theme/custom/cssIncludes.jspf sous forme de liens. Exemple :

    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/${applicationScope.themePath}/custom/css/jkeEnterprises.css" />

  11. Créez un dossier images dans le répertoire personnalisé et enregistrez-y les fichiers image utilisés dans votre thème. Exemple : theme/custom/images-jke-enterprises
  12. Créez une archive contenant les fichiers mis à jour. Vous pouvez personnaliser le nom de l'archive mais son dossier racine doit être le dossier "theme". L'archive de thème doit comprendre les fichiers suivants en plus des fichiers CSS personnalisés que vous avez créés, même si aucune modification n'a été effectuée :
    • theme/custom/header.jspf : image du logo, nom de l'utilisateur connecté et liens Connexion, Déconnexion, Aide et Extensions
    • theme/custom/cssIncludes.jspf : balises de <lien> vers vos fichiers CSS personnalisés
    • theme/custom/homeContent.jspf : zone de contenu de la page d'accueil
    • theme/custom/jspHeader.jspf : contient les détails de la bannière supplémentaires
    • theme/custom/requestAccess.jspf : ce fichier apparaît sous le formulaire d'ouverture de session dans la page de connexion. Dans le thème par défaut, ce fragment ne contient rien, mais vous pouvez y ajouter des liens tels que "Mot de passe oublié" ou "Enregistrement", souvent rencontrés dans les applications Web.
    • theme/custom/requestAccessForm.jspf : ce fichier apparaît dans la page d'accueil, sous le formulaire d'ouverture de session. Dans le thème par défaut, ce fragment ne contient rien, mais vous pouvez y ajouter des liens tels que "Mot de passe oublié" ou "Enregistrement", souvent rencontrés dans les applications Web.
    • theme/custom/css/advanced.css : feuille de style en cascade avancée pour le dimensionnement et le positionnement
    • theme/custom/css/basic.css : feuille de style en cascade basique pour les images, les arrière-plans et les styles de police.
    • theme/custom/css/hideRightColumn.css : feuille de style en cascade pour les pages sans colonne de droite
    • theme/custom/css/pageLayout.css : feuille de style en cascade pour l'agencement général des pages
    • theme/custom/css/showLeftColumn.css: feuille de style en cascade pour les pages sans colonne de gauche
  13. Dans la section Gérer le thème de la page Outils, cliquez sur Parcourir.
  14. Localisez l'archive mise à jour.
  15. Cliquez sur Remonter.

Résultats

Le nouveau thème est appliqué. Si les changements n'apparaissent pas, cliquez sur le bouton d'actualisation ou de rechargement du navigateur. Vous devez aussi éventuellement effacer le cache de votre navigateur Web. Vous n'avez pas besoin de redémarrer l'application Web. Pour vérifier que le thème a été appliqué correctement, affichez plusieurs pages de l'application Web. Si vous voyez des résultats inattendus, modifiez les fichiers CSS personnalisés et remontez à nouveau le thème.

Que faire ensuite

Conservez une copie de l'archive de votre thème. Si vous souhaitez rétablir le thème d'origine, cliquez sur le lien Rétablir le thème par défaut.

Si l'application Web est redéployée ou mise à niveau vers une nouvelle version, le thème par défaut sera à nouveau appliqué et vous devrez télécharger votre thème personnalisé.


Vos commentaires