Marca e estilo personalizados para sobreposições de texto creating-custom-branding-styling

Crie um projeto do AEM Screens. Este exemplo mostra a funcionalidade criando um projeto chamado customstyle e um canal chamado DemoBrand, como mostrado na figura abaixo.

No editor, arraste e solte uma imagem e adicione uma sobreposição de texto ao ativo.

Navegue até o CRXDE Lite na instância do AEM > ferramentas > CRXDE Lite.

Crie um design personalizado em /apps/settings/wcm/designs/<your-project>/. Por exemplo, neste caso, navegue até /apps/settings/wcm/designs/customstyle/

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

Copie o caminho para o seu projeto, neste caso, o caminho é /apps/settings/wcm/designs/customstyle.

Navegue até o canal intitulado como DemoBrand (criado na etapa(1)) e clique em Propriedades na barra de ações depois de selecionar o canal.

Navegue até a guia Avançado e verifique o campo Design.

Atualize o campo Design com o caminho para a pasta do projeto. Nesse caso, é /apps/settings/wcm/designs/customstyle.

Clique em Salvar e fechar para atualizar o caminho de design.

Para sobrepor os modelos existentes do Screens para inserir seus próprios designs por padrão:

1. Sobreposição /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 que ela aponte para o novo design.

Para criar seu próprio template completamente:

1. Copiar /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 que ela aponte para o novo design.

Navegue até o administrador de usuários e escolha o screens-<project>-devices group e dê a ele permissão de leitura para o caminho de design personalizado.

Forneça permissões de leitura e modificação de grupo screens-<project>-administrators para este caminho.

Navegue até o projeto do AEM Screens intitulado como customstyle > Canais > DemoBrand. Clique no canal e em Editar na barra de ações.

Como você adicionou o design ao campo Designs, como mencionado acima, clique em Visualizar 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.

Ao salvar as alterações e recarregar a visualização, você verá uma atualização da fonte de 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 em caixa ao redor da sobreposição de texto.

Visualize a alteração atualizada em sua visualização, onde a sobreposição de texto é adicionada à imagem.

Agora você está pronto para atualizar sua marca e estilo personalizado para sobreposições de texto adicionadas aos seus ativos.