Documentatie AEM 6.4 Gids voor formulieren

Het lettertype in de interface wijzigen

Laatst bijgewerkt: 4 mei 2023

Gemaakt voor:

User

CAUTION

AEM 6.4 heeft het einde van de uitgebreide ondersteuning bereikt en deze documentatie wordt niet meer bijgewerkt. Raadpleeg voor meer informatie onze technische ondersteuningsperioden. Ondersteunde versies zoeken hier.

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.

Wijzig of voeg de lettertypefamilie toe aan een bestaande stijl.
Wijzig of voeg de lettertypefamilie inline voor het HTML-element toe.
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:

Aanmelden bij CRXDE Lite via toegang https://[server]:[port]/lc/crx/de/index.jsp.

Voer een van de volgende handelingen uit:

Als u de lettertypefamilie wilt wijzigen in een bestaande stijl, voegt u het volgende toe in het bestand newStyle.css op /apps/ws/css.
#topnav a { font-family: "Courier New"; }

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:

<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 om te bewerken en te vervangen text!/lc/libs/ws/js/runtime/templates/appnavigation.html with text!/lc/apps/ws/js/runtime/templates/appnavigation.html.

Als u een stijl wilt toevoegen die de lettertypefamilie definieert, voegt u het volgende toe in het bestand newStyle.css op /apps/ws/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.

<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>

Start de werkruimte opnieuw en wis de browsercache zodat de wijzigingen zichtbaar zijn.

change_font_before
Afbeelding: Bovenste navigatiebalk voor aanpassing van lettertypen

Afbeelding: Bovenste navigatiebalk na aanpassing van lettertype van eerste tab

recommendation-more-help