DocumentazioneAEM 6.5Guida utente

Modifica del tipo di carattere nell'interfaccia changing-the-font-on-the-interface

Last update: Wed Mar 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Puoi modificare il font visualizzato nell’area di lavoro di AEM Forms. I font utilizzati in una sezione specifica dell'interfaccia utente sono definiti nella sezione corrispondente del foglio di stile. È possibile modificare i caratteri nell'interfaccia utente in modo selettivo.

Segui le Passaggi generici per la personalizzazione dell’area di lavoro AEM Forms e a seconda delle tue esigenze, segui i passaggi per personalizzare CSS, HTML o entrambi.

  1. Modificate o aggiungete la famiglia font in uno stile esistente.
  2. Modificare o aggiungere la famiglia di caratteri in linea per l'elemento HTML.
  3. Aggiungi uno stile e utilizzalo per l’elemento HTML.

Ad esempio, per modificare il tipo di carattere del testo di ancoraggio della barra di navigazione superiore in Courier New, effettuare le seguenti operazioni:

  1. Accedi a CRXDE Liti accedendo a https://'[server]:[port]'/lc/crx/de/index.jsp.

  2. Effettua una delle operazioni seguenti:

    1. Per modificare la famiglia di caratteri in uno stile esistente, aggiungi quanto segue nel file newStyle.css in /apps/ws/css.

      code language-css 
      #topnav a {
   font-family: "Courier New";
}

    2. Per aggiungere la famiglia di caratteri in linea per l'elemento HTML, copiare /libs/ws/js/runtime/templates/appnavigation.html file in /apps/ws/js/runtime/templates/appnavigation.html.

      Aggiornare il file /apps/ws/js/runtime/templates/appnavigation.html come segue:

      code language-jsp 
      <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>

      Apri il file /apps/ws/js/registry.js per la modifica e la sostituzione text!/lc/libs/ws/js/runtime/templates/appnavigation.html con text!/lc/apps/ws/js/runtime/templates/appnavigation.html.

    3. Per aggiungere uno stile che definisca la famiglia font, aggiungi quanto segue nel file newStyle.css in /apps/ws/css.

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

      Per aggiungere la famiglia font in linea per l’elemento HTML, aggiungi quanto segue nel file appnavigation.html in /apps/ws/js/runtime/templates.

      code language-jsp 
      <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. Riavvia l’area di lavoro e cancella la cache del browser per rendere visibili le modifiche.

change_font_before

Barra di navigazione superiore prima della personalizzazione dei caratteri

change_font_after

Barra di navigazione superiore dopo la personalizzazione del font della prima scheda

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2