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.

Seguite i passaggi Generici per 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 al CRXDE Lite accedendo a 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 file /libs/ws/js/runtime/templates/appnavigation.html 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.

change_font_
beforeFigure:Barra di navigazione principale prima della personalizzazione dei font

change_font_
afterFigure:Barra di navigazione principale dopo la personalizzazione dei font della prima scheda

In questa pagina