Mise à jour de votre style personnalisé

Une fois que vous avez créé un style de thème, utilisez cette procédure pour appliquer une apparence personnalisée et unifiée au thème.

Pourquoi et quand exécuter cette tâche

Les feuilles de style CSS du thème 8.5 HCL Digital Experience Portal ne doivent pas être éditées directement, car ces modifications risquent d'être perdues lors d'une mise à niveau de groupe de correctifs. En revanche, vous pouvez créer un CSS dans une nouvelle feuille de style appartenant à votre thème personnalisé.

Procédure

  1. Appliquez le style personnalisé à une page
    1. Sur la page à laquelle vous souhaitez appliquer le style, activez le Mode Edition.
    2. Cliquez sur Page > Styles dans la barre d'outils.
    3. Cliquez sur le style personnalisé.
  2. Ecrivez les nouveaux styles.
    1. Ouvrez une page de portail dans laquelle votre thème et votre style personnalisé sont appliqués.
    2. Utilisez un outil comme Firebug pour sélectionner et inspecter les règles de style que vous souhaitez modifier.
    3. Après avoir déterminé les styles que vous souhaitez remplacer dans le thème, copiez les substitutions dans la feuille de style personnalisé dans WebDAV.
  3. Appliquez la feuille de style personnalisée à l'intégralité de votre structure de page.
    1. Déterminez la page racine de la zone sur laquelle vous souhaitez appliquer le style personnalisé. Pour qu'il s'applique à l'intégralité du site, sélectionnez Racine de contenu.
    2. Ajoutez des métadonnées à la page racine avec une clé de colorPalette et une valeur pointant vers votre feuille de style personnalisé par rapport au répertoire de thème dans WebDAV.
      Par exemple: css/custom/custom.css.
  4. Utilisation de Firebug pour inspecter le fichier CSS.
    1. Ouvrez le plug-in Firebug dans un navigateur Mozilla Firefox.
    2. Cliquez sur l'icône de sélection d'élément icône Firebug dans la barre de menus Firebug.
    3. Cliquez sur la zone de la page que vous souhaitez modifier.
    4. Vérifiez que la zone appropriée est sélectionnée dans l'onglet HTML.
      Onglet HTML Firebug
    5. Consultez l'onglet Style pour inspecter tous les fichiers CSS appliqués à l'élément HTML.
      Onglet Style de Firebug
    6. Editez le fichier CSS dans l'onglet Style jusqu'à ce que l'élément HTML apparaisse comme vous le souhaitiez. Pour éditer un attribut, cliquez sur le texte.
      Onglet Style de Firebug avec l'élément HTML mis en évidence
    7. Après avoir déterminé que la nouvelle valeur appliquée a l'apparence que vous souhaitez, copiez le fichier CSS que vous avez modifié dans l'onglet Style dans la feuille de style personnalisée.