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

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

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

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

AEM Screens 프로젝트를 만듭니다. 이 예는 아래 그림과 같이 customstyle 및 DemoBrand 라는 채널을 만들어 기능을 소개합니다.
편집기에서 이미지를 끌어서 놓고 텍스트 오버레이를 자산에 추가합니다.

노트

채널 편집기에서 자산에 텍스트 오버레이를 추가하는 방법에 대한 자세한 내용은 텍스트 오버레이를 참조하십시오.
AEM 인스턴스 —> 도구 —> CRXDE Lite에서 CRXDE Lite으로 이동합니다.
/apps/settings/wcm/designs/<your-project>/에서 사용자 지정 디자인을 만들어야 합니다. 예를 들어, 이 경우 /apps/settings/wcm/designs/customstyle/ 로 이동합니다

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);
 }

프로젝트에 대한 경로를 복사합니다. 이 경우 경로가 /apps/settings/wcm/designs/customstyle이 됩니다.
DemoBrand(1단계에서 작성)이라는 채널로 이동한 다음, 채널을 선택한 후 작업 표시줄에서 속성을 클릭합니다.
고급 탭으로 이동하여 디자인 필드를 선택합니다.

노트

기본적으로 디자인 필드에는 libs 폴더의 디자인을 가리키는 경로가 표시됩니다.
디자인 필드를 프로젝트 폴더의 경로로 업데이트합니다. 이 경우 /apps/settings/wcm/designs/customstyle 입니다.
저장 및 닫기를 클릭하여 디자인 경로를 업데이트합니다.

중요

기존 스크린 템플릿을 오버레이하여 기본적으로 고유한 디자인을 주입하거나 자신만의 템플릿을 완전히 만들 수 있습니다. 자세한 내용은 아래 단계를 참조하십시오.
기존 스크린 템플릿을 오버레이하여 기본적으로 고유한 디자인을 주입하려면
1. /apps/screens/core/templates/sequencechannel에 /libs/screens/core/templates/sequencechannel을 오버레이합니다.
2. /apps/screens/core/templates/sequencechannel/jcr:content에서 cq:designPath 속성을 수정하여 새 디자인을 가리킵니다.
완전히 고유한 템플릿을 만들려면:
1. /libs/screens/core/templates/sequencechannel을 /apps/customstyle/templates/styled-sequencechannel에 복사합니다.
2. /apps/customstyle/templates/styled-sequencechannel/jcr:content에서 cq:designPath 속성을 수정하여 새 디자인을 가리킵니다.

ACL 업데이트 중

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

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

결과 보기

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

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

사용자 지정 스타일 —> 채널 —> DemoBrand로 명명된 AEM Screens 프로젝트로 이동합니다. 채널을 선택하고 작업 표시줄에서 편집 을 클릭하여 편집기를 엽니다.
이제 디자인을 디자인 필드에 추가했으므로 미리 보기를 클릭하여 텍스트 오버레이로 이미지에 있는 현재 스타일을 확인합니다.
CRXDE Lite에서 static.css 파일로 이동하고 아래 표시된 대로 font-family: "Lucida Console", Courier, monospace; 등의 글꼴을 이 파일에 추가합니다.
변경 사항을 저장하고 미리 보기를 다시 로드하면 아래 그림과 같이 텍스트 오버레이 글꼴에 대한 업데이트가 표시됩니다.
또한 static.css 파일에서 마지막 두 개의 코드 블록을 제거하여 텍스트 오버레이 주위에 있는 박스형 스타일을 제거할 수 있습니다.
미리 보기에서 텍스트 오버레이가 이미지에 추가된 업데이트된 변경 사항을 확인합니다.

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