Cambiar la fuente en la interfaz

Puede cambiar la fuente que se muestra en AEM Forms Workspace. Las fuentes utilizadas en una sección específica de la interfaz de usuario se definen en la sección correspondiente de la hoja de estilo. Puede cambiar las fuentes de la interfaz de usuario de forma selectiva.

Siga los Pasos genéricos para personalizar AEM Forms Workspace y según sus necesidades, siga los pasos para personalizar CSS, HTML o ambos.

1. Cambie o agregue la familia de fuentes en un estilo existente.
2. Cambie o agregue la familia de fuentes en línea para el elemento HTML.
3. Agregue un estilo y utilícelo para el elemento HTML.

Por ejemplo, para cambiar la fuente del texto de anclaje de la barra de navegación superior a Courier New, siga los siguientes pasos:

1. Inicie sesión en CRXDE Lite accediendo a https://[server]:[port]/lc/crx/de/index.jsp.

2. Realice una de las siguientes acciones:

   1. Para cambiar la familia de fuentes en un estilo existente, agregue lo siguiente en el archivo newStyle.css en /apps/ws/css.

      #topnav a {
         font-family: "Courier New";
      }
      

   2. Para agregar la familia de fuentes en línea para el elemento HTML, copie el archivo /libs/ws/js/runtime/templates/appnavigation.html en /apps/ws/js/runtime/templates/appnavigation.html.

      Actualice el archivo /apps/ws/js/runtime/templates/appnavigation.html de la siguiente manera:

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

      Abra el archivo /apps/ws/js/registry.js para editarlo y reemplace text!/lc/libs/ws/js/runtime/templates/appnavigation.html con text!/lc/apps/ws/js/runtime/templates/appnavigation.html.

   3. Para agregar un estilo que defina la familia de fuentes, agregue lo siguiente en el archivo newStyle.css en /apps/ws/css.

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

      Para agregar la familia de fuentes en línea para el elemento HTML, agregue lo siguiente en el archivo appnavigation.html en /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>
      

3. Vuelva a iniciar el espacio de trabajo y borre la memoria caché del explorador para que los cambios sean visibles.

Figura: Barra de navegación superior antes de la personalización de la fuente

Figura: Barra de navegación superior después de personalizar la fuente de la primera ficha