Show Menu
ARGOMENTI×

Modifica del font nell'interfaccia

Potete modificare il font visualizzato nell'area di lavoro AEM Forms. 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.
Attenetevi alla procedura Generico 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.
Barra di navigazione superiore prima della personalizzazione dei font
Barra di navigazione superiore dopo la personalizzazione del font della prima scheda