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

Crea un progetto AEM Screens. Questo esempio mostra la funzionalità creando un progetto denominato customstyle e un canale con titolo DemoBrand , come illustrato nella figura seguente.

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

Passa a CRXDE Liti dall’istanza AEM > Strumenti > CRXDE Liti.

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

Crea 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);
 }

Copia 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 fare clic su Proprietà dalla barra delle azioni dopo aver selezionato il canale.

Accedi a Avanzate e controllare la Progettazione campo.

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

Clic 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 /libs/screens/core/templates/sequencechannel in /apps/screens/core/templates/sequencechannel.
2. Modifica il cq:designPath proprietà in /apps/screens/core/templates/sequencechannel/jcr:content in modo che punti al nuovo design.

Per creare completamente un modello personalizzato:

1. Copia /libs/screens/core/templates/sequencechannel a /apps/customstyle/templates/styled-sequencechannel.
2. Modifica il cq:designPath proprietà in /apps/customstyle/templates/styled-sequencechannel/jcr:content in modo che punti al nuovo design.

Accedi all’amministratore utenti e scegli il screens-<project>-devices group e concedergli l'autorizzazione di lettura per il percorso di progettazione personalizzato.

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

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

Poiché ora hai aggiunto il design al tuo Progettazioni come indicato in precedenza, fai clic su Anteprima per visualizzare lo stile corrente dell'immagine con sovrapposizione testo.

Accedi al tuo static.css file in CRXDE Liti e aggiungi il font, ad esempio, font-family: "Lucida Console", Courier, monospace; a questo file, 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, puoi rimuovere gli ultimi due blocchi di codice da 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.