Marca personalizada e estilo para sobreposições de texto

Siga esta página para saber como aplicar marcas e estilos personalizados a Sobreposições de texto aplicadas a seus ativos em um canal do AEM Screens.

Criação de marca personalizada e estilo para sobreposições de texto

Siga as etapas abaixo para criar marcas e estilos personalizados para sobreposições de texto:

Crie um projeto do AEM Screens. Este exemplo mostra a funcionalidade ao criar um projeto chamado customstyle e um canal chamado DemoBrand , conforme mostrado na figura abaixo.
No editor, arraste e solte uma imagem e adicione uma sobreposição de texto ao ativo.

OBSERVAÇÃO

Para saber como adicionar uma sobreposição de texto ao seu ativo em um editor de canal, consulte Sobreposição de texto.
Navegue até CRXDE Lite da sua instância de AEM —> ferramentas —> CRXDE Lite.
Você precisa criar um design personalizado em /apps/settings/wcm/designs/<your-project>/, por exemplo, neste caso, navegue até /apps/settings/wcm/designs/customstyle/

Crie o arquivo static.css e defina as seguintes regras de css. Também mostrado como um exemplo na figura abaixo das regras de 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);
 }

imagem

Copie o caminho para seu projeto. Nesse caso, o caminho será /apps/settings/wcm/designs/customstyle.
Navegue até o canal chamado DemoBrand (criado na etapa 1) e clique em Properties na barra de ações depois de selecionar o canal.
Navegue até a guia Advanced e marque o campo Design.

OBSERVAÇÃO

Seja padrão, o campo Design mostra o caminho apontando para designs na pasta libs.
Atualize o campo Design com o caminho para a pasta do projeto. Nesse caso, será /apps/settings/wcm/designs/customstyle.
Clique em Salvar e fechar para atualizar o caminho do design.

IMPORTANTE

Você tem a opção de sobrepor os modelos existentes do Screens para injetar seus próprios designs por padrão ou criar seu próprio modelo completamente. Consulte as etapas abaixo para obter mais detalhes.
Para sobrepor os modelos existentes do Screens para injetar seus próprios designs por padrão:
1. Sobreponha /libs/screens/core/templates/sequencechannel em /apps/screens/core/templates/sequencechannel.
2. Modifique a propriedade cq:designPath em /apps/screens/core/templates/sequencechannel/jcr:content para apontar para o novo design.
Para criar seu próprio template completamente:
1. Copie /libs/screens/core/templates/sequencechannel para /apps/customstyle/templates/styled-sequencechannel.
2. Modifique a propriedade cq:designPath em /apps/customstyle/templates/styled-sequencechannel/jcr:content para apontar para o novo design.

Atualizando ACLs

Você deve atualizar as ACLs desses designs para que elas possam ser baixadas pelo reprodutor.

Navegue até user admin e escolha o screens-<project>-devices group e conceda a ele permissão de leitura para o caminho de design personalizado.
Forneça ao grupo screens-<project>-administrators permissões de leitura e modificação para este caminho.

Visualização do resultado

Depois de concluir as etapas anteriores, você pode atualizar seu arquivo statis.css de CRXDE Lite e, consequentemente, exibir a atualização para sua sobreposição de texto que já está adicionada ao ativo.

Siga as etapas abaixo para exibir o design atualizado para a sobreposição de texto:

Navegue até o projeto do AEM Screens chamado customstyle —> Channels —> DemoBrand. Selecione o canal e clique em Edit na barra de ações para abrir o editor.
Como você adicionou o design ao seu campo Designs, conforme mencionado acima, clique em Preview para exibir o estilo atual na imagem com sobreposição de texto.
Navegue até o arquivo static.css no CRXDE Lite e adicione a fonte, como font-family: "Lucida Console", Courier, monospace;, a esse arquivo, conforme mostrado abaixo.
Depois de salvar as alterações e recarregar a visualização, você verá uma atualização na fonte da sobreposição de texto, como mostrado na figura abaixo.
Além disso, você pode remover os dois últimos blocos de código do arquivo static.css para remover o estilo in a box em torno da sobreposição de texto.
Você visualizará a alteração atualizada na sua visualização, onde a sobreposição de texto é adicionada à imagem.

Agora, você está pronto para atualizar a marca e o estilo personalizado para as sobreposições de texto adicionadas aos ativos.