테마 사용자 지정

HTML 코드 및 CSS 파일을 사용자 지정하여 AEM Forms 앱에 고유한 룩앤필을 제공할 수 있습니다. 예를 들어 작업의 배경색과 높이를 변경하거나 시작점을 변경할 수 있습니다. 다음 예제에서는 변경 지침을 제공합니다.

  • 설명 대신 표시 지침
  • 표시 경로 수
  • 배경 그레이디언트 색상

단계

  1. 프로젝트를 엽니다.

    • iOS의 경우 Xcode에서 Capture.xcodeproj을(를) 엽니다.
    • Android의 경우 Eclipse에서 Android 프로젝트를 엽니다.
    • Windows의 경우 Visual Studio에서 MWSWindows.sln을 엽니다.
  2. 템플릿 폴더로 이동합니다.

    • Xcode에서 캡처 > www > 모바일 > js > 런타임 > templates 폴더로 이동합니다.
    • Eclipse에서 자산 > www > 모바일 > js > 런타임 > templates 폴더로 이동합니다.
    • Visual Studio에서 MWSWindows > www > Mobile > js > 런타임 > templates 폴더로 이동합니다.
  3. 편집할 template.html 파일을 엽니다.

  4. 다음 문자열을 찾습니다.

    <%if ( (task.description !== "") && (task.description !== null) && (typeof task.description !== null) && (typeof task.description !== 'undefined') ) {%>
                   <div class="description_details">
                     <%= task.description %>
                   </div>
                  <%} else 
    

    <%으로 대체합니다.

  5. template.html 파일에서 다음 코드를 찾습니다.

    <ul id="task_menu_list">
                                    <li class="approve" title="<%= task.availableCommands.directCommands[0]%>" data-routename="<%= task.availableCommands.directCommands[0]%>">
                                        <%= task.availableCommands.directCommands[0]%>
                                    </li>
                                    <li class="reject last" title="<%= task.availableCommands.directCommands[1]%>" data-routename="<%= task.availableCommands.directCommands[1]%>">
                                        <%= task.availableCommands.directCommands[1]%>
                                    </li>
    
  6. 다음 줄의 주석을 달고 파일을 저장합니다.

    task.availableCommands.directCommands[1]%>">
    <%= task.availableCommands.directCommands[1]%>
    </li>
    
  7. css 폴더로 이동합니다.

    • Xcode에서 캡처 > www > 동영상 > css​로 이동합니다.
    • Eclipse에서 자산 > www > 모바일 > css​로 이동합니다.
    • Visual Studio에서 MWSWindows > www > Mobile > css​로 이동합니다.
  8. 편집할 _style.css 파일을 엽니다.

  9. 배경 이미지의 경우 #323232#fff(으)로 변경합니다.

  10. 변경 내용을 저장하고 _style.css 파일을 닫습니다.

  11. AEM Forms 앱을 엽니다.

    이제 AEM Forms 앱에 설명 대신 지침이 표시됩니다.

이 페이지에서는

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now