Changing the font on the interface

Changing the font on the interface

Search
Adobe LiveCycle ES4 User Guide
Applies to: Adobe LiveCycle

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

You can change the font displayed in HTML Workspace. Fonts used in a specific section of the user interface are defined in the corresponding section of the style sheet. You can change the fonts on the user interface selectively.

Follow the Generic steps for HTML Workspace customization and depending on your requirements, follow the steps for customizing CSS, HTML, or both.

  1. Change or add the font-family in an existing style.
  2. Change or add the font-family inline for the HTML element.
  3. Add a style and use it for the HTML element.

As an example, to change the font of the top navigation bar anchor text to Courier New, follow these steps:

  1. Log in to CRXDE Lite by accessing http://[server]:[port]/lc/crx/de/index.jsp.

  2. Do one of the following:

    1. To change the font-family in an existing style, add the following in the newStyle.css file at /apps/ws/css.

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

    2. To add the font-family inline for the HTML element, copy the /libs/ws/js/runtime/templates/appnavigation.html file to /apps/ws/js/runtime/templates/appnavigation.html.

      Update the /apps/ws/js/runtime/templates/appnavigation.html file as follows:

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

      Open the /apps/ws/js/registry.js file for editing and replace text!/lc/libs/ws/js/runtime/templates/appnavigation.html with text!/lc/apps/ws/js/runtime/templates/appnavigation.html.

    3. To add a style defining the font-family, add the following in the newStyle.css file at /apps/ws/css.

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

      To add the font-family inline for the HTML element, add the following in the appnavigation.html file at /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. Relaunch the Workspace and clear the browser cache for the changes to be visible.

Top navigation bar before font customization

Top navigation bar after font customization of first tab

More like this