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 intitulado DemoBrand , conforme mostrado na figura abaixo.

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

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

Criar um design personalizado no /apps/settings/wcm/designs/<your-project>/, por exemplo, nesse caso, navegue até /apps/settings/wcm/designs/customstyle/

Criar 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 projeto. Nesse caso, o caminho é /apps/settings/wcm/designs/customstyle.

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

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

Atualize o Design com o caminho para a pasta do projeto. No caso em apreço, /apps/settings/wcm/designs/customstyle.

Selecionar Salvar e fechar para atualizar o caminho de design.

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

1. Sobreposição /libs/screens/core/templates/sequencechannel in /apps/screens/core/templates/sequencechannel.
2. Modifique o cq:designPath propriedade no /apps/screens/core/templates/sequencechannel/jcr:content para que 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 o cq:designPath propriedade no /apps/customstyle/templates/styled-sequencechannel/jcr:content para que aponte para o novo design.

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

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

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

Como você adicionou o design ao seu Designs como mencionado acima, selecione Visualizar para exibir o estilo atual na imagem com sobreposição de texto.

Navegue até o static.css arquivo no CRXDE Lite e adicione a fonte como, font-family: "Lucida Console", Courier, monospace; nesse 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 static.css arquivo 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.