Personalizzazione e stile per le sovrapposizioni di testo

Seguite questa pagina per apprendere come applicare un marchio e uno stile personalizzati per le sovrapposizioni di testo applicate alle risorse in un canale AEM Screens .

Creazione di un marchio personalizzato e stile per le sovrapposizioni di testo

Per creare un marchio e uno stile personalizzati per le sovrapposizioni di testo, effettuate le seguenti operazioni:

  1. Creare un progetto AEM Screens . Questo esempio mostra la funzionalità creando un progetto denominato customstyle e un canale denominato DemoBrand, come illustrato nella figura riportata di seguito.

    immagine

  2. Dall’editor trascinate un’immagine e aggiungete una sovrapposizione di testo alla risorsa.

    immagine

    NOTA

    Per informazioni su come aggiungere una sovrapposizione di testo alla risorsa in un editor canale, consultate Text Overlay.

  3. Andate al CRXDE Lite dall'istanza AEM —> strumenti —> CRXDE Lite.

  4. È necessario creare una progettazione personalizzata in /apps/settings/wcm/designs/<your-project>/, ad esempio in questo caso andate a /apps/settings/wcm/designs/customstyle/

    immagine

  5. Create il file static.css e impostate 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);
     }
    

    immagine

  6. Copiate il percorso del progetto, in questo caso il percorso sarà /apps/settings/wcm/designs/customstyle.

  7. Andate al canale denominato DemoBrand (creato al punto 1)) e fate clic su Properties dalla barra delle azioni dopo aver selezionato il canale.

  8. Passare alla scheda Avanzate e controllare il campo Progettazione.
    immagine

    NOTA

    Per impostazione predefinita, il campo Design mostra il percorso che punta alle strutture nella cartella libs.

  9. Aggiornate il campo Design con il percorso della cartella del progetto. In questo caso, sarà /apps/settings/wcm/designs/customstyle.

    immagine

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

    IMPORTANTE

    È possibile sovrapporre i modelli esistenti di Screens per inserire i propri design per impostazione predefinita o creare un modello personalizzato. Per ulteriori informazioni, fare riferimento ai passaggi descritti di seguito.

  11. Per sovrapporre i modelli Screens esistenti per inserire i propri design per impostazione predefinita:

    1. Sovrapposizione /libs/screens/core/templates/sequencechannel in /apps/screens/core/templates/sequencechannel.
    2. Modificate la proprietà cq:designPath in /apps/screens/core/templates/sequencechannel/jcr:content per puntare alla nuova progettazione.
  12. Per creare un modello personalizzato:

    1. Copiare /libs/screens/core/templates/sequencechannel in /apps/customstyle/templates/styled-sequencechannel.
    2. Modificate la proprietà cq:designPath in /apps/customstyle/templates/styled-sequencechannel/jcr:content per puntare alla nuova progettazione.

Aggiornamento di ACL

È necessario aggiornare gli ACL per queste progettazioni in modo che possano essere scaricati dal lettore.

  1. Passate all'amministratore utente e scegliete screens-<project>-devices group e assegnategli l'autorizzazione di lettura per il percorso di progettazione personalizzato.

  2. Specifica le autorizzazioni di lettura e modifica del gruppo screens-<project>-administrators per questo percorso.

Visualizzazione del risultato

Una volta completati i passaggi precedenti, potete aggiornare il file statis.css da CRXDE Lite e visualizzare di conseguenza l'aggiornamento alla sovrapposizione di testo già aggiunta alla risorsa.

Per visualizzare la struttura aggiornata alla sovrapposizione di testo, effettuate le seguenti operazioni:

  1. Andate al progetto AEM Screens denominato customstyle —> Channels —> DemoBrand. Selezionate il canale e fate clic su Modifica nella barra delle azioni per aprire l'editor.

  2. Poiché la progettazione è stata aggiunta al campo Progettazione, come indicato sopra, fare clic su Anteprima per visualizzare lo stile corrente sull'immagine con sovrapposizione testo.

    immagine

  3. Individuate il file static.css nel CRXDE Lite e aggiungete il font font-family: "Lucida Console", Courier, monospace; al file, come illustrato di seguito.
    immagine

  4. Dopo aver salvato le modifiche e ricaricato l'anteprima, viene visualizzato un aggiornamento al font della sovrapposizione di testo, come illustrato nella figura riportata di seguito.

    immagine

  5. Inoltre, potete rimuovere gli ultimi due blocchi di codice dal file static.css per rimuovere lo stile "boxed" intorno alla sovrapposizione di testo.
    immagine

  6. Nell’anteprima verrà visualizzata la modifica aggiornata in cui la sovrapposizione di testo viene aggiunta all’immagine.

    immagine

    Ora è possibile aggiornare il marchio e lo stile personalizzato per le sovrapposizioni di testo aggiunte alle risorse.

In questa pagina