AEM Forms 작업 공간에 표시되는 글꼴을 변경할 수 있습니다. 사용자 인터페이스의 특정 섹션에 사용되는 글꼴은 스타일 시트의 해당 섹션에 정의됩니다. 사용자 인터페이스의 글꼴을 선택적으로 변경할 수 있습니다.
AEM Forms 작업 공간 사용자 지정을 위한 일반 단계를 따르고 요구 사항에 따라 CSS, HTML 또는 둘 다 사용자 지정하는 단계를 따릅니다.
예를 들어, 위쪽 탐색 모음 앵커 텍스트의 글꼴을 Courier New 로 변경하려면 다음 단계를 따르십시오.
https://[server]:[port]/lc/crx/de/index.jsp
에 액세스하여 CRXDE Lite에 로그인합니다.
다음 중 하나를 수행하십시오.
기존 스타일의 font-family를 변경하려면 /apps/ws/css의 newStyle.css 파일에 다음을 추가하십시오.
#topnav a {
font-family: "Courier New";
}
HTML 요소에 대한 font-family 인라인을 추가하려면 /libs/ws/js/runtime/templates/appnavigation.html
파일을 /apps/ws/js/runtime/templates/appnavigation.html
에 복사합니다.
다음과 같이 /apps/ws/js/runtime/templates/appnavigation.html 파일을 업데이트합니다.
<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>
편집할 /apps/ws/js/registry.js 파일을 열고 text!/lc/libs/ws/js/runtime/templates/appnavigation.html
을 text!/lc/apps/ws/js/runtime/templates/appnavigation.html
(으)로 바꿉니다.
font-family를 정의하는 스타일을 추가하려면 /apps/ws/css의 newStyle.css 파일에 다음을 추가하십시오.
.myNewFontStyle a {
font-family: "Courier New";
}
HTML 요소에 대해 font-family 인라인을 추가하려면 /apps/ws/js/runtime/templates의 appnavigation.html 파일에 다음을 추가하십시오.
<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>
작업 공간을 다시 실행하고 변경 사항이 표시되도록 브라우저 캐시를 지웁니다.
beforeFigure: 글꼴 사용자 정의 전 위쪽 탐색 모음
afterFigure: 첫 번째 탭의 글꼴 사용자 지정 후 위쪽 탐색 모음