텍스트 오버레이에 대한 사용자 지정 브랜딩 및 스타일링

AEM Screens 채널의 자산에 적용된 텍스트 오버레이에 사용자 지정 브랜딩 및 스타일링을 적용하는 방법을 배우려면 이 페이지를 따르십시오.

텍스트 오버레이에 대한 사용자 지정 브랜딩 및 스타일링 만들기

텍스트 오버레이에 대한 사용자 지정 브랜딩 및 스타일링을 만들려면 아래 단계를 따르십시오.

  1. AEM Screens 프로젝트를 만듭니다. 이 예는 아래 그림과 같이 customstyle 및 DemoBrand 라는 채널을 만들어 기능을 소개합니다.

    이미지

  2. 편집기에서 이미지를 끌어서 놓고 텍스트 오버레이를 자산에 추가합니다.

    이미지

    노트

    채널 편집기에서 자산에 텍스트 오버레이를 추가하는 방법에 대한 자세한 내용은 텍스트 오버레이를 참조하십시오.

  3. AEM 인스턴스 —> 도구 —> CRXDE Lite​에서 CRXDE Lite으로 이동합니다.

  4. /apps/settings/wcm/designs/<your-project>/에서 사용자 지정 디자인을 만들어야 합니다. 예를 들어, 이 경우 /apps/settings/wcm/designs/customstyle/ 로 이동합니다

    이미지

  5. static.css 파일을 만들고 다음 css 규칙을 설정합니다. 또한 css 규칙 아래 그림에서 예로서 표시됩니다.

     //global styles
 cq-Screens-textOverlay {
 padding: 1em;
 font-size: 3rem;
 line-height: 1em;
  }
 //authoring overrides
.aem-AuthorLayer-Edit .cq-Screens-textOverlay {
 display: none;
 padding: 0;
 font-size: 1rem;
 }
  // light text variant
 .cq-Screens-textOverlay-color--light {
  background-color: rgba(0, 0, 0, .6);
  }
  // dark text variant
  .cq-Screens-textOverlay-color--dark {
   background-color: rgba(255, 255, 255, .6);
 }

    이미지

  6. 프로젝트에 대한 경로를 복사합니다. 이 경우 경로가 /apps/settings/wcm/designs/customstyle이 됩니다.

  7. DemoBrand(1단계에서 작성)이라는 채널로 이동한 다음, 채널을 선택한 후 작업 표시줄에서 속성​을 클릭합니다.

  8. 고급 탭으로 이동하여 디자인 필드를 선택합니다.
    이미지

    노트

    기본적으로 디자인 필드에는 libs 폴더의 디자인을 가리키는 경로가 표시됩니다.

  9. 디자인 필드를 프로젝트 폴더의 경로로 업데이트합니다. 이 경우 /apps/settings/wcm/designs/customstyle 입니다.

    이미지

  10. 저장 및 닫기​를 클릭하여 디자인 경로를 업데이트합니다.

    중요

    기존 스크린 템플릿을 오버레이하여 기본적으로 고유한 디자인을 주입하거나 자신만의 템플릿을 완전히 만들 수 있습니다. 자세한 내용은 아래 단계를 참조하십시오.

  11. 기존 스크린 템플릿을 오버레이하여 기본적으로 고유한 디자인을 주입하려면

    1. /apps/screens/core/templates/sequencechannel에 /libs/screens/core/templates/sequencechannel을 오버레이합니다.
    2. /apps/screens/core/templates/sequencechannel/jcr:content에서 cq:designPath 속성을 수정하여 새 디자인을 가리킵니다.

  12. 완전히 고유한 템플릿을 만들려면:

    1. /libs/screens/core/templates/sequencechannel을 /apps/customstyle/templates/styled-sequencechannel에 복사합니다.
    2. /apps/customstyle/templates/styled-sequencechannel/jcr:content에서 cq:designPath 속성을 수정하여 새 디자인을 가리킵니다.

ACL 업데이트 중

플레이어에서 다운로드할 수 있도록 이러한 디자인에 대한 ACL을 업데이트해야 합니다.

  1. 사용자 관리자로 이동하여 screens-<project>-devices group 을(를) 선택하고 사용자 지정 디자인 경로에 대한 읽기 권한을 부여합니다.

  2. 이 경로에 대한 screens-<project>-administrators 그룹 읽기 및 수정 권한을 제공합니다.

결과 보기

앞의 단계를 완료하면 statis.css 파일을 CRXDE Lite​에서 업데이트하고 따라서 이미 자산에 추가된 텍스트 오버레이에 대한 업데이트를 볼 수 있습니다.

업데이트된 디자인을 텍스트 오버레이로 보려면 아래 절차를 따르십시오.

  1. 사용자 지정 스타일 —> 채널 —> DemoBrand​로 명명된 AEM Screens 프로젝트로 이동합니다. 채널을 선택하고 작업 표시줄에서 편집 을 클릭하여 편집기를 엽니다.

  2. 이제 디자인을 디자인 필드에 추가했으므로 미리 보기​를 클릭하여 텍스트 오버레이로 이미지에 있는 현재 스타일을 확인합니다.

    이미지

  3. CRXDE Lite에서 static.css 파일로 이동하고 아래 표시된 대로 font-family: "Lucida Console", Courier, monospace; 등의 글꼴을 이 파일에 추가합니다.
    이미지

  4. 변경 사항을 저장하고 미리 보기를 다시 로드하면 아래 그림과 같이 텍스트 오버레이 글꼴에 대한 업데이트가 표시됩니다.

    이미지

  5. 또한 static.css 파일에서 마지막 두 개의 코드 블록을 제거하여 텍스트 오버레이 주위에 있는 박스형 스타일을 제거할 수 있습니다.
    이미지

  6. 미리 보기에서 텍스트 오버레이가 이미지에 추가된 업데이트된 변경 사항을 확인합니다.

    이미지

    이제 자산에 추가된 텍스트 오버레이에 대한 브랜드 및 사용자 지정 스타일을 업데이트할 준비가 되었습니다.

이 페이지에서는