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_before

Barra di navigazione superiore prima della personalizzazione dei font

change_font_after

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

In questa pagina

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now