Show Menu
ARGOMENTI×

Personalizzazione e stile per le sovrapposizioni di testo

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

Creazione di stili e marchi personalizzati 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.
  2. Dall’editor trascinate un’immagine e aggiungete una sovrapposizione di testo alla risorsa.
    Per informazioni su come aggiungere una sovrapposizione di testo alla risorsa in un editor canale, consultate Sovrapposizione Sovrapposizione testo testo.
  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, passare a /apps/settings/wcm/designs/customstyle/
  5. Create un 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);
     }
    
    
  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 Proprietà dalla barra delle azioni dopo aver selezionato il canale.
  8. Passare alla scheda Avanzate e selezionare il campo Progettazione .
    Per impostazione predefinita, il campo Progettazione mostra il percorso che punta alle strutture nella cartella libs.
  9. Aggiornate il campo Progettazione con il percorso della cartella del progetto. In questo caso, sarà, /apps/settings/wcm/designs/customstyle .
  10. Fate clic su Salva e chiudi per aggiornare il percorso di progettazione.
È 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.
  1. 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 modo da puntare alla nuova progettazione.
  2. Per creare un modello personalizzato:
    1. Copia /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 modo da puntare alla nuova progettazione.

Aggiornamento degli ACL

È necessario aggiornare gli ACL per queste progettazioni in modo che possano essere scaricati dal lettore.
  1. Passate all'amministratore utente e scegliete il percorso di progettazione personalizzato screens-<project>-devices group e assegnategli l'autorizzazione di lettura.
  2. Specifica le autorizzazioni di lettura e modifica del screens-<project>-administrators gruppo 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 custom style —> Channels —> DemoBrand . Select the channel and click Edit from the action bar to open the editor.
  2. Poiché la progettazione è stata aggiunta al campo Progettazione , come indicato sopra, fate clic su Anteprima per visualizzare lo stile corrente sull'immagine con sovrapposizione di testo.
  3. Individuate il file static.css in CRXDE Lite e aggiungete il font, ad esempio, font-family: "Lucida Console", Courier, monospace; a questo file, come illustrato di seguito.
  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.
  5. Inoltre, potete rimuovere gli ultimi due blocchi di codice dal file static.css per rimuovere lo stile "in box" intorno alla sovrapposizione di testo.
  6. Nell’anteprima verrà visualizzata la modifica aggiornata in cui la sovrapposizione di testo viene aggiunta all’immagine.
Con riferimento all’esercitazione, ora potete aggiornare il vostro marchio e lo stile personalizzato per le sovrapposizioni di testo aggiunte alle risorse.