Het lettertype in de interface wijzigen changing-the-font-on-the-interface

U kunt het lettertype wijzigen dat in de AEM Forms-werkruimte wordt weergegeven. Lettertypen die in een specifieke sectie van de gebruikersinterface worden gebruikt, worden gedefinieerd in de bijbehorende sectie van het stijlblad. U kunt de lettertypen in de gebruikersinterface selectief wijzigen.

Volg de Algemene stappen voor aanpassing van de AEM Forms-werkruimte en voert u, afhankelijk van uw vereisten, de stappen uit voor het aanpassen van CSS, HTML of beide.

  1. Wijzig of voeg de lettertypefamilie toe aan een bestaande stijl.
  2. Wijzig of voeg de lettertypefamilie inline voor het HTML-element toe.
  3. Voeg een stijl toe en gebruik deze voor het HTML-element.

Voer bijvoorbeeld de volgende stappen uit als u het font van het ankerpunt op de bovenste navigatiebalk wilt wijzigen in Courier New:

  1. Log in bij CRXDE Lite door toegang te krijgen https://'[server]:[port]'/lc/crx/de/index.jsp.

  2. Voer een van de volgende handelingen uit:

    1. Als u de lettertypefamilie wilt wijzigen in een bestaande stijl, voegt u het volgende toe in het bestand newStyle.css op /apps/ws/css.

      code language-css
      #topnav a {
         font-family: "Courier New";
      }
      
    2. Als u de lettertypefamilie inline voor het HTML-element wilt toevoegen, kopieert u de /libs/ws/js/runtime/templates/appnavigation.html bestand naar /apps/ws/js/runtime/templates/appnavigation.html.

      Werk het bestand /apps/ws/js/runtime/templates/appnavigation.html als volgt bij:

      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>
      

      Het bestand /apps/ws/js/registry.js openen voor bewerken en vervangen text!/lc/libs/ws/js/runtime/templates/appnavigation.html with text!/lc/apps/ws/js/runtime/templates/appnavigation.html.

    3. Als u een stijl wilt toevoegen die de lettertypefamilie definieert, voegt u het volgende toe in het bestand newStyle.css op /apps/ws/css.

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

      Als u inline font-family voor het HTML-element wilt toevoegen, voegt u het volgende toe in het bestand appnavigation.html op /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. Start de werkruimte opnieuw en wis de browsercache zodat de wijzigingen zichtbaar zijn.

change_font_before

Bovenste navigatiebalk voor aanpassing van lettertypen

change_font_after

Bovenste navigatiebalk na aanpassing van lettertype van eerste tab

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