Personalizar la marca y el estilo para las superposiciones de texto

Siga esta página para aprender a aplicar personalización de marca y estilo para las superposiciones de texto aplicadas a sus recursos en un canal de AEM Screens.

Creación de diseños y marcas personalizados para superposiciones de texto

Siga los pasos a continuación para crear una marca y un estilo personalizados para las superposiciones de texto:

1. Cree un proyecto de AEM Screens. En este ejemplo se muestra la funcionalidad creando un proyecto denominado customstyle y un canal denominado DemoBrand , como se muestra en la figura siguiente.

   

2. Desde el editor, arrastre y suelte una imagen y agregue superposición de texto al recurso.

   

   NOTA

   Para obtener información sobre cómo añadir una superposición de texto al recurso en un editor de canales, consulte Superposición de texto.

3. Vaya al CRXDE Lite desde la instancia de AEM —> herramientas —> CRXDE Lite.

4. Debe crear un diseño personalizado en /apps/settings/wcm/designs/<your-project>/, por ejemplo, en este caso, vaya a /apps/settings/wcm/designs/customstyle/

   

5. Cree el archivo static.css y establezca las siguientes reglas css. También se muestra como ejemplo en la figura debajo de las reglas 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);
    }
   

   

6. Copie la ruta al proyecto; en este caso, la ruta será /apps/settings/wcm/designs/customstyle.

7. Vaya al canal denominado DemoBrand (creado en el paso 1) y haga clic en Properties en la barra de acciones después de seleccionar el canal.

8. Vaya a la pestaña Advanced y marque el campo Design.
   

   NOTA

   De forma predeterminada, el campo Design muestra la ruta que señala a los diseños en la carpeta de bibliotecas.

9. Actualice el campo Design con la ruta a la carpeta del proyecto. En este caso, será /apps/settings/wcm/designs/customstyle.

   

10. Haga clic en Guardar y cerrar para actualizar la ruta de diseño.

    IMPORTANTE

    Tiene la opción de superponer las plantillas Screens existentes para insertar sus propios diseños de forma predeterminada o crear su propia plantilla por completo. Consulte los pasos a continuación para obtener más información.

11. Para superponer las plantillas de Screens existentes para insertar sus propios diseños de forma predeterminada:

    1. Superponga /libs/screens/core/templates/sequencechannel en /apps/screens/core/templates/sequencechannel.
    2. Modifique la propiedad cq:designPath en /apps/screens/core/templates/sequencechannel/jcr:content para que apunte al nuevo diseño.

12. Para crear su propia plantilla por completo:

    1. Copie /libs/screens/core/templates/sequencechannel en /apps/customstyle/templates/styled-sequencechannel.
    2. Modifique la propiedad cq:designPath en /apps/customstyle/templates/styled-sequencechannel/jcr:content para que apunte al nuevo diseño.

Actualización de ACL

Debe actualizar las ACL para estos diseños para que el reproductor pueda descargarlos.

1. Vaya al administrador de usuarios, elija screens-<project>-devices group y asígnele permiso de lectura a la ruta de diseño personalizada.

2. Proporcione screens-<project>-administrators permisos de lectura y modificación del grupo a esta ruta.

Visualización del resultado

Una vez completados los pasos anteriores, puede actualizar el archivo statis.css desde CRXDE Lite y, en consecuencia, ver la actualización de la superposición de texto que ya se ha agregado al recurso.

Siga los pasos a continuación para ver el diseño actualizado de la superposición de texto:

1. Vaya al proyecto de AEM Screens titulado como customstyle —> Channels —> DemoBrand. Seleccione el canal y haga clic en Edit en la barra de acciones para abrir el editor.

2. Como ahora ha añadido el diseño al campo Diseños, como se ha mencionado anteriormente, haga clic en Vista previa para ver el estilo actual de la imagen con superposición de texto.

   

3. Vaya al archivo static.css en el CRXDE Lite y añada la fuente como font-family: "Lucida Console", Courier, monospace; a este archivo, como se muestra a continuación.
   

4. Una vez que guarde los cambios y vuelva a cargar la vista previa, verá una actualización de la fuente de superposición de texto, como se muestra en la figura siguiente.

   

5. Además, puede quitar los dos últimos bloques de código del archivo static.css para eliminar el estilo en caja que rodea la superposición de texto.
   

6. Verá el cambio actualizado en la vista previa, donde la superposición de texto se agrega a la imagen.

   

   Ya está listo para actualizar su marca y el estilo personalizado para las superposiciones de texto agregadas a sus recursos.