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.
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.
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);
}
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.
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.
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:
/libs/screens/core/templates/sequencechannel
em /apps/screens/core/templates/sequencechannel
./apps/screens/core/templates/sequencechannel/jcr:content
para apontar para o novo design.Para criar seu próprio template completamente:
/libs/screens/core/templates/sequencechannel
para /apps/customstyle/templates/styled-sequencechannel
./apps/customstyle/templates/styled-sequencechannel/jcr:content
para apontar para o novo design.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.
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.