Modification de la police de l’interface

Vous pouvez modifier la police affichée dans l’espace de travail AEM Forms. Les polices utilisées dans une section spécifique de l’interface utilisateur sont définies dans la section correspondante de la feuille de style. Vous pouvez modifier les polices sur l’interface utilisateur de manière sélective.

Follow the Generic steps for AEM Forms workspace customization and depending on your requirements, follow the steps for customizing CSS, HTML, or both.

  1. Modifiez ou ajoutez la famille de police dans un style existant.
  2. Modifiez ou ajoutez la famille de police en ligne pour l’élément HTML.
  3. Ajoutez un style et utilisez-le pour l’élément HTML.

Par exemple, pour remplacer la police du texte de la barre de navigation supérieure par Courier New, procédez comme suit :

  1. Connectez-vous au CRXDE Lite en accédant à https://[server]:[port]/lc/crx/de/index.jsp.

  2. Utilisez l’une des méthodes suivantes :

    1. Pour modifier la famille de police dans un style existant, ajoutez la ligne suivante dans le fichier newStyle.css sous /apps/ws/css.

      #topnav a {
         font-family: "Courier New";
      }
      
    2. To add the font-family inline for the HTML element, copy the /libs/ws/js/runtime/templates/appnavigation.html file to /apps/ws/js/runtime/templates/appnavigation.html.

      Mettez à jour le fichier apps/ws/js/runtime/templates/appnavigation.html comme suit :

      <li class="process"><a href="#" title="<%= $.t('index.header.topnav.startprocess.detail')%>" style="font-family:Courier New;" ><%= $.t('index.header.topnav.startprocess.name')%></a></li>
      <li class="todo"><a href="#/todo" title="<%= $.t('index.header.topnav.todo.detail')%>" style="font-family:Courier New;" ><%= $.t('index.header.topnav.todo.name')%></a></li>
      <li class="track"><a href="#/tracking" title="<%= $.t('index.header.topnav.tracking.detail')%>" style="font-family:Courier New;" ><%= $.t('index.header.topnav.tracking.name')%></a></li>
      <li class="preference"><a href="#/preferences" title="<%= $.t('index.header.topnav.preferences.detail')%>" style="font-family:Courier New;" ><%= $.t('index.header.topnav.preferences.name')%></a></li>
      

      Open the /apps/ws/js/registry.js file for editing and replace text!/lc/libs/ws/js/runtime/templates/appnavigation.html with text!/lc/apps/ws/js/runtime/templates/appnavigation.html.

    3. Pour ajouter un style qui définit la famille de police, ajoutez la ligne suivante dans le fichier newStyle.css sous /apps/ws/css.

      .myNewFontStyle a {
         font-family: "Courier New";
      }
      

      Pour ajouter la famille de police en ligne pour l’élément HTML, ajoutez le code suivant dans le fichier appnavigation.html sous /apps/ws/js/runtime/templates.

      <div id="topnav" class="myNewFontStyle">
          <ul>
              <li class="process"><a href="#" title="<%= $.t('index.header.topnav.startprocess.detail')%>" ><%= $.t('index.header.topnav.startprocess.name')%></a></li>
              <li class="todo"><a href="#/todo" title="<%= $.t('index.header.topnav.todo.detail')%>"><%= $.t('index.header.topnav.todo.name')%></a></li>
              <li class="track"><a href="#/tracking" title="<%= $.t('index.header.topnav.tracking.detail')%>" ><%= $.t('index.header.topnav.tracking.name')%></a></li>
              <li class="preference"><a href="#/preferences" title="<%= $.t('index.header.topnav.preferences.detail')%>" ><%= $.t('index.header.topnav.preferences.name')%></a></li>
          </ul>
      </div>
      
  3. Relancez l’espace de travail et effacez le cache du navigateur pour que les modifications soient visibles.

change_font_before​Figure : Barre de navigation supérieure avant la personnalisation de la police

change_font_after​Figure : Barre de navigation supérieure après la personnalisation de la police du premier onglet

Sur cette page