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

Erfahren Sie, wie Sie benutzerdefiniertes Branding und Styling für Textüberlagerungen anwenden, die auf Ihre Assets in einem AEM Screens-Kanal angewendet werden.

Erstellen von benutzerdefiniertem Branding und Styling für Textüberlagerungen steps-custom-branding

Gehen Sie wie folgt vor, um benutzerdefiniertes Branding und Styling für Textüberlagerungen zu erstellen:

  1. 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.

    Bild

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

    Bild

    note note
    NOTE
    Informationen zum Hinzufügen einer Textüberlagerung zu einem Asset in einem Kanaleditor finden Sie unter Textüberlagerung.
  3. Navigieren Sie von Ihrer AEM-Instanz zu „Tools“ > CRXDE Lite.

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

    Bild

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

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

    image

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

  7. 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.

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

    note note
    NOTE
    Die Standardeinstellung ist die Design zeigt den Pfad zu Designs im Ordner "libs"an.
  9. Aktualisieren Sie das Feld Design mit dem Pfad zum Projektordner. In diesem Beispiel ist er auf /apps/settings/wcm/designs/customstyle festgelegt.

    image

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

    note important
    IMPORTANT
    Sie können optional die vorhandenen Screens-Vorlagen überlagern, um Ihre eigenen Designs standardmäßig einzufügen oder eine eigene Vorlage zu erstellen. Führen Sie die folgenden Schritte aus, um mehr zu erfahren.
  11. 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.
  12. 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.

Aktualisieren von ACLs updating-acls

Aktualisieren Sie die ACLs für diese Designs, damit der Player sie herunterladen kann.

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

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

Anzeigen des Ergebnisses viewing-the-result

Wenn Sie die vorherigen Schritte ausgeführt haben, können Sie Ihre statis.css Datei aus CRXDE Lite und sehen Sie sich daher die Aktualisierung Ihrer Textüberlagerung an, die bereits zum Asset hinzugefügt wurde.

Gehen Sie wie folgt vor, um die Textüberlagerung mit dem aktualisierten Design anzuzeigen:

  1. 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.

  2. 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.

    image

  3. 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.

    image

  4. 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.

    Bild

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

Bild

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

    Bild

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

recommendation-more-help
adce462a-f916-4dbe-9ab5-0b62cfb0f053