Personalizza branding e stile per sovrapposizioni testo creating-custom-branding-styling

Crea un progetto AEM Screens. In questo esempio vengono illustrate le funzionalità mediante la creazione di un progetto denominato customstyle e di un canale denominato DemoBrand, come illustrato nella figura seguente.

Dall’editor, trascina e rilascia un’immagine e aggiungi una sovrapposizione di testo alla risorsa.

Passa a CRXDE Lite dalla tua istanza AEM > Strumenti > CRXDE Liti.

Creare una progettazione personalizzata in /apps/settings/wcm/designs/<your-project>/. In questo caso, ad esempio, passare a /apps/settings/wcm/designs/customstyle/

Crea un file static.css e imposta le seguenti regole css. Anche mostrato come esempio nella figura sotto le regole 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);
 }

Copiare il percorso nel progetto. In questo caso, il percorso è /apps/settings/wcm/designs/customstyle.

Passa al canale con titolo DemoBrand (creato nel passaggio(1)) e fai clic su Proprietà nella barra delle azioni dopo aver selezionato il canale.

Passa alla scheda Avanzate e controlla il campo Progettazione.

Aggiorna il campo Progettazione con il percorso della cartella del progetto. In questo caso, è /apps/settings/wcm/designs/customstyle.

Fai clic su Salva e chiudi per aggiornare il percorso di progettazione.

Per sovrapporre i modelli Screens esistenti per inserire le proprie progettazioni per impostazione predefinita:

1. Sovrapposizione di /libs/screens/core/templates/sequencechannel in /apps/screens/core/templates/sequencechannel.
2. Modificare la proprietà cq:designPath in /apps/screens/core/templates/sequencechannel/jcr:content in modo che punti alla nuova struttura.

Per creare completamente un modello personalizzato:

1. Copia /libs/screens/core/templates/sequencechannel in /apps/customstyle/templates/styled-sequencechannel.
2. Modificare la proprietà cq:designPath in /apps/customstyle/templates/styled-sequencechannel/jcr:content in modo che punti alla nuova struttura.

Passare all'amministratore utenti, scegliere screens-<project>-devices group e concedere l'autorizzazione di lettura per il percorso di progettazione personalizzato.

Fornire al gruppo screens-<project>-administrators le autorizzazioni di lettura e modifica per questo percorso.

Passa al progetto AEM Screens con titolo customstyle > Canali > DemoBrand. Fai clic sul canale e fai clic su Modifica nella barra delle azioni.

Poiché hai aggiunto la progettazione al campo Progettazioni, come indicato in precedenza, fai clic su Anteprima per visualizzare lo stile corrente dell'immagine con sovrapposizione di testo.

Passa al file static.css in CRXDE Lite e aggiungi al file il tipo di carattere font-family: "Lucida Console", Courier, monospace;, come illustrato di seguito.

Quando salvi le modifiche e ricarichi l’anteprima, viene visualizzato un aggiornamento del font di sovrapposizione del testo, come illustrato nella figura riportata di seguito.

È inoltre possibile rimuovere gli ultimi due blocchi di codice dal file static.css per rimuovere lo stile del riquadro attorno alla sovrapposizione di testo.

Visualizza la modifica aggiornata nell’anteprima in cui la sovrapposizione di testo viene aggiunta all’immagine.

Ora puoi aggiornare il brand e lo stile personalizzato per le sovrapposizioni di testo aggiunte alle risorse.