Benutzerdefiniertes Branding und Stil für Textüberlagerungen creating-custom-branding-styling

Erstellen Sie ein AEM Screens-Projekt. In diesem Beispiel wird die Funktionalität durch Erstellen eines Projekts mit dem Namen customstyle und einen Kanal mit dem Titel DemoBrand , wie in der folgenden Abbildung dargestellt.

Ziehen Sie aus dem Editor ein Bild per Drag-and-Drop und fügen Sie dem Asset eine Textüberlagerung hinzu.

Navigieren Sie von Ihrer AEM-Instanz zu CRXDE Lite > Tools > CRXDE Lite.

Erstellen Sie ein benutzerdefiniertes Design in /apps/settings/wcm/designs/<your-project>/Navigieren Sie in diesem Fall beispielsweise zu /apps/settings/wcm/designs/customstyle/

Erstellen Sie die Datei static.css und legen Sie die folgenden CSS-Regeln fest. Dies wird auch als Beispiel in der Abbildung unter den CSS-Regeln gezeigt.

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

Kopieren Sie den Pfad zu Ihrem Projekt. In diesem Fall lautet der Pfad /apps/settings/wcm/designs/customstyle.

Navigieren Sie zum Kanal mit dem Namen DemoBrand (erstellt in Schritt 1) und klicken Sie nach der Auswahl des Kanals in der Aktionsleiste auf Eigenschaften.

Navigieren Sie zur Registerkarte Erweitert und aktivieren Sie das Feld Design.

Aktualisieren Sie das Feld Design mit dem Pfad zum Projektordner. In diesem Beispiel ist er auf /apps/settings/wcm/designs/customstyle festgelegt.

Klicken Sie auf Speichern und schließen, um den Design-Pfad zu aktualisieren.

So überlagern Sie die vorhandenen Screens-Vorlagen, um Ihre eigenen Designs standardmäßig einzufügen:

1. Überlagern Sie /libs/screens/core/templates/sequencechannel in /apps/screens/core/templates/sequencechannel.
2. Ändern Sie die cq:designPath -Eigenschaft in /apps/screens/core/templates/sequencechannel/jcr:content , damit er auf das neue Design verweist.

So erstellen Sie eine eigene Vorlage:

1. Kopieren Sie /libs/screens/core/templates/sequencechannel nach /apps/customstyle/templates/styled-sequencechannel.
2. Ändern Sie die cq:designPath -Eigenschaft in /apps/customstyle/templates/styled-sequencechannel/jcr:content , damit er auf das neue Design verweist.

Navigieren Sie zu „useradmin“, wählen Sie die screens-<project>-devices group aus und erteilen Sie Leseberechtigung für den benutzerdefinierten Design-Pfad.

Erteilen Sie der Gruppe screens-<project>-administrators Lese- und Änderungsberechtigung für diesen Pfad.

Navigieren Sie zu Ihrem AEM Screens-Projekt mit dem Titel customstyle > Kanäle > DemoBrand. Klicken Sie auf den Kanal und klicken Sie auf Bearbeiten in der Aktionsleiste aus.

Da Sie jetzt das Design, wie oben erwähnt, dem Feld Designs hinzugefügt haben, klicken Sie auf Vorschau, um das aktuelle Bild-Styling mit der Textüberlagerung anzuzeigen.

Navigieren Sie zu Ihrer Datei static.css in CRXDE Lite und fügen Sie dieser Datei wie unten dargestellt die Schrift (z. B. font-family: "Lucida Console", Courier, monospace;) hinzu.

Wenn Sie die Änderungen speichern und die Vorschau neu laden, wird eine Aktualisierung der Schriftart der Textüberlagerung angezeigt, wie in der folgenden Abbildung dargestellt.

Außerdem können Sie die letzten beiden Codeblöcke aus static.css -Datei, um die Textüberlagerung mit dem geboxten Stil zu entfernen.

Zeigen Sie die aktualisierte Änderung in Ihrer Vorschau an, in der die Textüberlagerung zum Bild hinzugefügt wird.

Jetzt können Sie Ihre Marke und Ihr benutzerdefiniertes Styling für Textüberlagerungen aktualisieren, die Ihren Assets hinzugefügt wurden.