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

Saiba como aplicar marca e estilo personalizados a sobreposições de texto aplicadas aos seus ativos em um canal do AEM Screens.

Criação de marca e estilo personalizados para sobreposições de texto steps-custom-branding

Siga as etapas abaixo para criar marca e estilo personalizados para sobreposições de texto:

  1. 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.

    imagem

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

    imagem

    note note
    NOTE
    Para saber como adicionar uma sobreposição de texto ao seu ativo em um editor de canal, consulte Sobreposição de texto.
  3. Navegue até CRXDE Lite da instância AEM > ferramentas > CRXDE Lite.

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

    imagem

  5. Crie um arquivo static.css e defina as seguintes regras de css. Também é mostrado como exemplo na figura abaixo das regras de css.

    code language-shell
     //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

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

  7. 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.

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

    note note
    NOTE
    Por padrão, o campo Design mostra o caminho que aponta para designs na pasta libs.
  9. Atualize o campo Design com o caminho para a pasta do projeto. Nesse caso, é /apps/settings/wcm/designs/customstyle.

    imagem

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

    note important
    IMPORTANT
    Opcionalmente, é possível sobrepor os modelos existentes do Screens para inserir seus próprios designs por padrão ou criar seu próprio modelo completamente. Consulte as etapas abaixo para obter mais detalhes.
  11. 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.
  12. 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.

Atualizando ACLs updating-acls

Atualize as ACLs desses designs para que o reprodutor possa baixá-los.

  1. 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.

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

Exibir o resultado viewing-the-result

Ao concluir as etapas anteriores, você pode atualizar o arquivo statatis.css de CRXDE Lite e, portanto, exibir a atualização da sobreposição de texto que já foi adicionada ao ativo.

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

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

  2. 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.

    imagem

  3. 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.

    imagem

  4. 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.

    imagem

  5. 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.

imagem

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

    imagem

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

recommendation-more-help
adce462a-f916-4dbe-9ab5-0b62cfb0f053