Modifica del font nell’interfaccia changing-the-font-on-the-interface

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Creato per:

User

CAUTION

AEM 6.4 ha raggiunto la fine del supporto esteso e questa documentazione non viene più aggiornata. Per maggiori dettagli, consulta la nostra periodi di assistenza tecnica. Trova le versioni supportate qui.

È possibile modificare il font visualizzato nell’area di lavoro di AEM Forms. I font utilizzati in una sezione specifica dell’interfaccia utente sono definiti nella sezione corrispondente del foglio di stile. È possibile modificare selettivamente i font nell’interfaccia utente.

Segui Passaggi generici per la personalizzazione dell’area di lavoro AEM Forms e, a seconda dei requisiti, segui i passaggi per personalizzare CSS, HTML o entrambi.

Modificare o aggiungere la famiglia di font in uno stile esistente.
Modifica o aggiungi il font-family in linea per l’elemento HTML.
Aggiungi uno stile e utilizzalo per l’elemento HTML.

Ad esempio, per modificare il font del testo di ancoraggio della barra di navigazione superiore in Courier New, effettua le seguenti operazioni:

Accedi a CRXDE Lite accedendo a https://[server]:[port]/lc/crx/de/index.jsp.

Effettua una delle operazioni seguenti:

Per modificare la famiglia di font in uno stile esistente, aggiungi quanto segue nel file newStyle.css in /apps/ws/css.

code language-css
`#topnav a { font-family: "Courier New"; }`

Per aggiungere il font-family in linea per l’elemento HTML, copia il /libs/ws/js/runtime/templates/appnavigation.html file a /apps/ws/js/runtime/templates/appnavigation.html.

Aggiorna il file /apps/ws/js/runtime/templates/appnavigation.html come segue:

code language-none

code language-none
<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>

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

Apri il file /apps/ws/js/registry.js per la modifica e la sostituzione text!/lc/libs/ws/js/runtime/templates/appnavigation.html con text!/lc/apps/ws/js/runtime/templates/appnavigation.html.

Per aggiungere uno stile che definisca la famiglia di font, aggiungi quanto segue nel file newStyle.css in /apps/ws/css.

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

Per aggiungere il font-family in linea per l’elemento HTML, aggiungi quanto segue nel file appnavigation.html in /apps/ws/js/runtime/templates.

code language-css

code language-css
<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>

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

Riavvia l’area di lavoro e cancella la cache del browser per rendere visibili le modifiche.

change_font_before
Figura: Barra di navigazione superiore prima della personalizzazione del font

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

recommendation-more-help

a6ebf046-2b8b-4543-bd46-42a0d77792da