Ändra teckensnitt i gränssnittet changing-the-font-on-the-interface
Du kan ändra vilket teckensnitt som visas på arbetsytan i AEM Forms. Teckensnitt som används i ett visst avsnitt i användargränssnittet definieras i motsvarande avsnitt i formatmallen. Du kan ändra teckensnitten i användargränssnittet selektivt.
Följ de allmänna stegen för anpassning av AEM Forms-arbetsytan och, beroende på dina krav, följ stegen för att anpassa CSS, HTML eller båda.
- Ändra eller lägg till teckensnittsfamiljen i en befintlig stil.
- Ändra eller lägg till teckensnittsfamiljen för elementet HTML.
- Lägg till ett format och använd det för elementet HTML.
Om du till exempel vill ändra teckensnittet för den översta navigeringsfältets ankartext till Courier New följer du de här stegen:
-
Logga in på CRXDE Lite med åtkomst till
https://'[server]:[port]'/lc/crx/de/index.jsp
. -
Gör något av följande:
-
Om du vill ändra font-family i en befintlig stil lägger du till följande i filen newStyle.css på /apps/ws/css.
code language-css #topnav a { font-family: "Courier New"; }
-
Om du vill lägga till teckensnittsfamiljen för elementet HTML kopierar du filen
/libs/ws/js/runtime/templates/appnavigation.html
till/apps/ws/js/runtime/templates/appnavigation.html
.Uppdatera /apps/ws/js/runtime/templates/appnavigation.html så här:
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>
Öppna /apps/ws/js/registry.js för redigering och ersättning av
text!/lc/libs/ws/js/runtime/templates/appnavigation.html
medtext!/lc/apps/ws/js/runtime/templates/appnavigation.html
. -
Om du vill lägga till en stil som definierar teckensnittsfamiljen lägger du till följande i filen newStyle.css på /apps/ws/css.
code language-css .myNewFontStyle a { font-family: "Courier New"; }
Lägg till följande i filen appnavigation.html på /apps/ws/js/runtime/templates om du vill lägga till teckensnittsfamiljen för elementet HTML.
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>
-
-
Starta om arbetsytan och rensa webbläsarcachen så att ändringarna syns.
Övre navigeringsfält före teckensnittsanpassning
Det övre navigeringsfältet efter teckensnittsanpassning på den första fliken