Image de marque et styles personnalisés pour les superpositions de texte creating-custom-branding-styling

Créez un projet AEM Screens. Cet exemple illustre la fonctionnalité en créant un projet nommé customstyle et un canal intitulé DemoBrand, comme illustré dans la figure ci-dessous.

Dans l’éditeur, faites glisser et déposez une image, puis ajoutez une superposition de texte à la ressource.

Accédez à CRXDE Lite à partir de votre instance AEM > Outils > CRXDE Lite.

Créez une conception personnalisée dans /apps/settings/wcm/designs/<your-project>/, par exemple. Dans le cas présent, accédez à /apps/settings/wcm/designs/customstyle/.

Créez le fichier static.css et définissez les règles CSS suivantes. À ce propos, la figure ci-dessous illustre un exemple de règles 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);
 }

Copiez le chemin vers votre projet. Dans le cas présent, ce chemin est /apps/settings/wcm/designs/customstyle.

Accédez au canal intitulé DemoBrand (créé à l’étape(1)), puis cliquez sur Propriétés dans la barre d’actions après avoir sélectionné le canal.

Accédez à l’onglet Avancé et cliquez sur le champ Conception.

Mettez à jour le champ Conception en indiquant le chemin d’accès de votre dossier de projet. En l’occurrence, il s’agit de /apps/settings/wcm/designs/customstyle.

Cliquez sur Enregistrer et fermer pour mettre à jour le chemin de la conception.

Pour superposer les modèles Screens existants afin d’incorporer vos propres conceptions par défaut :

1. Superposez /libs/screens/core/templates/sequencechannel à /apps/screens/core/templates/sequencechannel.
2. Modifiez la propriété cq:designPath dans /apps/screens/core/templates/sequencechannel/jcr:content pour qu’elle pointe vers la nouvelle conception.

Pour créer intégralement votre propre modèle :

1. Copiez /libs/screens/core/templates/sequencechannel dans /apps/customstyle/templates/styled-sequencechannel.
2. Modifiez la propriété cq:designPath dans /apps/customstyle/templates/styled-sequencechannel/jcr:content pour qu’elle pointe vers la nouvelle conception.

Accédez à la page d’administration des utilisateurs, sélectionnez le fichier screens-<project>-devices group et autorisez-le à accéder en lecture au chemin de conception personnalisé.

Accordez au groupe screens-<project>-administrators des autorisations de lecture et de modification sur ce chemin.

Accédez à votre projet AEM Screens intitulé customstyle  > Canaux  > DemoBrand. Cliquez sur le canal, puis sur Modifier dans la barre d’actions.

La conception ayant été ajoutée à votre champ Conceptions comme mentionné ci-dessus, cliquez sur Aperçu pour voir les styles actuels de l’image avec la superposition de texte.

Accédez à votre fichier static.css dans CRXDE Lite, puis ajoutez la police telle que font-family: "Lucida Console", Courier, monospace; à ce fichier, comme illustré ci-dessous.

Lorsque vous enregistrez les modifications et chargez à nouveau la prévisualisation, vous voyez une mise à jour de la police de superposition de texte, comme illustré dans la figure ci-dessous.

Vous pouvez également supprimer les deux derniers blocs de code du fichier static.css pour supprimer le style encadré autour de la superposition de texte.

Voyez la modification mise à jour dans la prévisualisation, avec la superposition de texte ajoutée à l’image.

Vous pouvez à présent mettre à jour votre marque et à appliquer votre style personnalisé pour les superpositions de texte ajoutées à vos ressources.