Estilo y marca personalizados para superposiciones de texto creating-custom-branding-styling

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

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

Vaya al CRXDE Lite AEM desde la instancia de la > Herramientas > CRXDE Lite.

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

Cree un 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);
 }

Copie la ruta de acceso a su proyecto; en este caso, la ruta de acceso es /apps/settings/wcm/designs/customstyle.

Vaya al canal con el título DemoBrand (creado en el paso ) y haga clic en Propiedades de la barra de acciones después de seleccionar el canal.

Vaya a la pestaña Avanzado y marque el campo Diseño.

Actualice el campo Diseño con la ruta a la carpeta del proyecto. En este caso, es /apps/settings/wcm/designs/customstyle.

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

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

1. Superposición /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.

Para crear su propia plantilla:

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.

Vaya a la administración de usuarios, elija screens-<project>-devices group y asígnele permiso de lectura en la ruta de diseño personalizada.

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

Vaya a su proyecto de AEM Screens titulado customstyle > Canales > DemoBrand. Haga clic en el canal y luego en Editar en la barra de acciones.

Dado que ahora ha agregado el diseño a su campo Diseños, como se mencionó anteriormente, haga clic en Vista previa para ver el estilo actual en la imagen con superposición de texto.

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

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

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

Vea el cambio actualizado en la vista previa donde se agrega la superposición de texto a la imagen.

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