DocumentatieAEM 6.5Handboek

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

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Gemaakt voor:

  • Gebruiker
  • Ontwikkelaar

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 de werkruimteaanpassing van AEM Formsen afhankelijk van uw vereisten, volg de stappen voor het aanpassen van CSS, HTML, of allebei.

  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. Meld u aan bij CRXDE Lite door https://'[server]:[port]'/lc/crx/de/index.jsp te openen.

  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 lettertype-familie inline wilt toevoegen voor het HTML-element, kopieert u het /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>

      Open het bestand /apps/ws/js/registry.js en vervang text!/lc/libs/ws/js/runtime/templates/appnavigation.html door 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