Show Menu
TÓPICOS×

Alteração da fonte na interface

Você pode alterar a fonte exibida na área de trabalho do AEM Forms. As fontes usadas em uma seção específica da interface do usuário são definidas na seção correspondente da folha de estilos. É possível alterar as fontes na interface do usuário de forma seletiva.
Siga as etapas genéricas para personalização do espaço de trabalho do AEM Forms e, dependendo de seus requisitos, siga as etapas para personalizar CSS, HTML ou ambos.
  1. Altere ou adicione a família de fontes em um estilo existente.
  2. Altere ou adicione a família de fontes em linha para o elemento HTML.
  3. Adicione um estilo e use-o para o elemento HTML.
Por exemplo, para alterar a fonte do texto de ancoragem da barra de navegação superior para Courier New, siga estas etapas:
  1. Faça logon no CRXDE Lite acessando https://[server]:[port]/lc/crx/de/index.jsp .
  2. Faça uma das seguintes opções:
    1. Para alterar a família de fontes em um estilo existente, adicione o seguinte no arquivo newStyle.css em /apps/ws/css.
      #topnav a {
         font-family: "Courier New";
      }
      
      
    2. Para adicionar a família de fontes em linha para o elemento HTML, copie o /libs/ws/js/runtime/templates/appnavigation.html arquivo para /apps/ws/js/runtime/templates/appnavigation.html .
      Atualize o arquivo /apps/ws/js/runtime/templates/appnavigation.html da seguinte maneira:
      <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 o arquivo /apps/ws/js/registry.js para edição e substitua text!/lc/libs/ws/js/runtime/templates/appnavigation.html por text!/lc/apps/ws/js/runtime/templates/appnavigation.html .
    3. Para adicionar um estilo que defina a família de fontes, adicione o seguinte no arquivo newStyle.css em /apps/ws/css.
      .myNewFontStyle a {
         font-family: "Courier New";
      }
      
      
      Para adicionar a família de fontes em linha para o elemento HTML, adicione o seguinte no arquivo appnavigation.html em /apps/ws/js/runtime/models.
      <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. Reinicie o espaço de trabalho e limpe o cache do navegador para que as alterações fiquem visíveis.
​Figura: Barra de navegação superior antes da personalização de fontes
​Figura: Barra de navegação superior após personalização da primeira guia