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

Créez un projet AEM Screens. Cet exemple présente 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 une image et 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 ce cas, 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 ce cas, le 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 variable cq:designPath dans /apps/screens/core/templates/sequencechannel/jcr:content pour qu'il 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 variable cq:designPath dans /apps/customstyle/templates/styled-sequencechannel/jcr:content pour qu'il 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 des autorisations de lecture et de modification de groupe screens-<project>-administrators à 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, par exemple font-family: "Lucida Console", Courier, monospace;, à ce fichier, comme illustré ci-dessous.

Lorsque vous enregistrez les modifications et rechargez l’aperçu, une mise à jour de la police de superposition de texte s’affiche, comme illustré dans la figure ci-dessous.

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

Affichez la modification mise à jour dans l’aperçu où la superposition de texte est ajoutée à l’image.

Vous êtes maintenant prêt à actualiser votre marque et à appliquer votre style personnalisé pour les incrustations de texte ajoutées à vos ressources.