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

Erstellen Sie ein AEM Screens-Projekt. In diesem Beispiel wird die Funktionalität veranschaulicht, indem ein Projekt mit dem Namen customstyle und ein Kanal mit dem Namen DemoBrand erstellt werden (siehe Abbildung unten).

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 „Tools“ > CRXDE Lite.

Erstellen Sie beispielsweise ein benutzerdefiniertes Design in /apps/settings/wcm/designs/<your-project>/. In diesem Fall navigieren Sie 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 ist 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 Eigenschaft cq:designPath in /apps/screens/core/templates/sequencechannel/jcr:content so, dass sie 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 Eigenschaft cq:designPath in /apps/customstyle/templates/styled-sequencechannel/jcr:content so, dass sie 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 eine Lese- und Änderungsberechtigung für diesen Pfad.

Navigieren Sie zu Ihrem AEM Screens-Projekt mit dem Titel customstyle > Channels > DemoBrand. Klicken Sie auf den Kanal und dann in der Aktionsleiste auf Bearbeiten.

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 gespeichert und die Vorschau neu geladen haben, wird die Schrift der Textüberlagerung aktualisiert, wie in der Abbildung unten dargestellt.

Darüber hinaus können Sie die letzten beiden Code-Blöcke aus der Datei static.css entfernen, um die Rahmen um die Textüberlagerung zu entfernen.

Die aktualisierte Änderung wird in Ihrer Vorschau angezeigt, wo 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.