Segui questa pagina per scoprire come applicare il branding e lo stile personalizzati per le sovrapposizioni di testo applicate alle risorse in un canale AEM Screens.
Per creare un marchio e uno stile personalizzati per le sovrapposizioni di testo, effettua le seguenti operazioni:
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.
Per informazioni su come aggiungere una sovrapposizione di testo alla risorsa in un editor di canali, consulta Sovrapposizione testo.
Passa a CRXDE Lite dalla tua istanza AEM —> strumenti —> CRXDE Lite.
Devi 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 sarà /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.
Per impostazione predefinita, Progettazione mostra il percorso che punta alle progettazioni nella cartella libs.
Aggiornare il Progettazione con il percorso della cartella del progetto. In questo caso, sarà /apps/settings/wcm/designs/customstyle
.
Clic Salva e chiudi per aggiornare il percorso di progettazione.
Puoi sovrapporre i modelli Screens esistenti per inserire le progettazioni personalizzate per impostazione predefinita o creare un modello completamente personalizzato. Per ulteriori informazioni, consulta i passaggi seguenti.
Per sovrapporre i modelli Screens esistenti per inserire le proprie progettazioni per impostazione predefinita:
/libs/screens/core/templates/sequencechannel
in /apps/screens/core/templates/sequencechannel
./apps/screens/core/templates/sequencechannel/jcr:content
per puntare al nuovo design.Per creare completamente un modello personalizzato:
/libs/screens/core/templates/sequencechannel
a /apps/customstyle/templates/styled-sequencechannel
./apps/customstyle/templates/styled-sequencechannel/jcr:content
per puntare al nuovo design.Devi aggiornare gli ACL per queste progettazioni in modo che possano essere scaricate dal lettore.
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.
Dopo aver completato i passaggi precedenti, puoi aggiornare statis.css file da CRXDE Lite e di conseguenza visualizza l’aggiornamento della sovrapposizione di testo già aggiunto alla risorsa.
Per visualizzare la progettazione aggiornata in sovrapposizione testo, attenersi alla procedura descritta di seguito.
Passa al progetto AEM Screens con titolo customstyle —> Canali —> DemoBrand. Seleziona il canale e fai clic su Modifica dalla barra delle azioni per aprire l’editor.
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 Lite e aggiungi il font, ad esempio, font-family: "Lucida Console", Courier, monospace;
a questo file, come illustrato di seguito.
Dopo aver salvato le modifiche e ricaricato l’anteprima, verrà 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.
Visualizzerai la modifica aggiornata nell’anteprima nel punto 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.