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

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

Crear 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 al proyecto; en este caso, la ruta es /apps/settings/wcm/designs/customstyle.

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

Vaya a Avanzadas y marque la Diseño field.

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

Clic 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 in /apps/screens/core/templates/sequencechannel.
2. Modifique la cq:designPath propiedad 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 cq:designPath propiedad en /apps/customstyle/templates/styled-sequencechannel/jcr:content para que apunte al nuevo diseño.

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

Proporcionar screens-<project>-administrators permisos de lectura y modificación de grupo para esta ruta.

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

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

Navegue hasta su static.css en el CRXDE Lite y agregue la fuente, como, 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 de static.css para quitar el estilo de la 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.