Show Menu
ARGOMENTI×

Modifica del font nell'interfaccia

È possibile modificare il font visualizzato nell'area di lavoro Moduli AEM. I font utilizzati in una sezione specifica dell'interfaccia utente sono definiti nella sezione corrispondente del foglio di stile. È possibile modificare i font nell'interfaccia utente in modo selettivo.
Seguite i passaggi Generici per la personalizzazione dell'area di lavoro AEM Forms e, a seconda dei requisiti, seguite i passaggi per personalizzare CSS, HTML o entrambi.
  1. Modificate o aggiungete la famiglia di font in uno stile esistente.
  2. Modificate o aggiungete l'agganciamento font-family per l'elemento HTML.
  3. Aggiungete uno stile e utilizzatelo per l'elemento HTML.
Ad esempio, per modificare il font del testo di ancoraggio della barra di navigazione superiore in Courier New, effettuate le seguenti operazioni:
  1. Accedete a CRXDE Lite accedendo https://[server]:[port]/lc/crx/de/index.jsp .
  2. Effettua una delle operazioni seguenti:
    1. Per modificare la famiglia di font in uno stile esistente, aggiungete quanto segue nel file newStyle.css in /apps/ws/css.
      #topnav a {
         font-family: "Courier New";
      }
      
      
    2. Per aggiungere la famiglia di font in linea per l'elemento HTML, copiate il /libs/ws/js/runtime/templates/appnavigation.html file in /apps/ws/js/runtime/templates/appnavigation.html .
      Aggiornate il file /apps/ws/js/runtime/templates/appnavigation.html come segue:
      <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>
      
      
      Aprite il file /apps/ws/js/registry.js per la modifica e sostituite 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 di font, aggiungete quanto segue nel file newStyle.css in /apps/ws/css.
      .myNewFontStyle a {
         font-family: "Courier New";
      }
      
      
      Per aggiungere la famiglia di font in linea per l'elemento HTML, aggiungete quanto segue nel file appnavigation.html in /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. Riavviate l’area di lavoro e cancellate la cache del browser affinché le modifiche siano visibili.
​Figure: Barra di navigazione superiore prima della personalizzazione dei font
​Figure: Barra di navigazione superiore dopo la personalizzazione del font della prima scheda