Aangepaste branding en opmaak voor tekstbedekkingen

Volg deze pagina om te leren hoe u aangepaste branding en opmaak kunt toepassen op tekstbedekkingen die op uw elementen in een AEM Screens-kanaal zijn toegepast.

Aangepaste branding en opmaak maken voor tekstbedekkingen

Volg de onderstaande stappen om aangepaste branding en opmaak voor tekstbedekkingen te maken:

  1. Maak een AEM Screens-project. In dit voorbeeld wordt de functionaliteit weergegeven door een project met de naam customstyle te maken en een kanaal met de naam DemoBrand, zoals in de onderstaande afbeelding wordt getoond.

    afbeelding

  2. Sleep vanuit de editor een afbeelding en zet deze neer en voeg tekstbedekking toe aan het element.

    afbeelding

    OPMERKING

    Zie Tekstbedekking voor meer informatie over het toevoegen van een tekstbedekking aan uw element in een kanaaleditor.

  3. Navigeer naar CRXDE Lite van uw AEM-instantie —> -gereedschappen —> CRXDE Lite.

  4. U moet een aangepast ontwerp maken in /apps/settings/wcm/designs/<your-project>/, in dit geval navigeert u bijvoorbeeld naar /apps/settings/wcm/designs/customstyle/

    afbeelding

  5. Maak static.css bestand en stel de volgende css-regels in. Wordt ook weergegeven als voorbeeld in de afbeelding onder de CSS-regels.

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

    afbeelding

  6. Kopieer het pad naar uw project. In dit geval is het pad /apps/settings/wcm/designs/customstyle.

  7. Navigeer naar het kanaal met de naam DemoBrand (gemaakt in stap(1)) en klik op Eigenschappen op de actiebalk nadat u het kanaal hebt geselecteerd.

  8. Navigeer naar het tabblad Geavanceerd en controleer het veld Design.
    afbeelding

    OPMERKING

    Standaard wordt in het veld Design het pad weergegeven dat naar ontwerpen verwijst in de map libs.

  9. Werk het Ontwerp gebied met de weg aan uw projectomslag bij. In dit geval is dit /apps/settings/wcm/designs/customstyle.

    afbeelding

  10. Klik Opslaan en sluiten om het ontwerppad bij te werken.

    BELANGRIJK

    U kunt de bestaande sjablonen voor schermen bedekken door standaard uw eigen ontwerpen te injecteren of uw eigen sjabloon te maken. Raadpleeg de onderstaande stappen voor meer informatie.

  11. Als u de bestaande sjablonen voor schermen wilt bedekken om uw eigen ontwerpen standaard te injecteren:

    1. Bedekking /libs/screens/core/templates/sequencechannel in /apps/screens/core/templates/sequencechannel.
    2. Wijzig cq:designPath bezit in /apps/screens/core/templates/sequencechannel/jcr:content om aan het nieuwe ontwerp te richten.
  12. Uw eigen sjabloon maken:

    1. Kopieer /libs/screens/core/templates/sequencechannel naar /apps/customstyle/templates/styled-sequencechannel.
    2. Wijzig cq:designPath bezit in /apps/customstyle/templates/styled-sequencechannel/jcr:content om aan het nieuwe ontwerp te richten.

ACLs bijwerken

U moet ACLs voor deze ontwerpen bijwerken zodat zij door de speler kunnen worden gedownload.

  1. Navigeer naar gebruikersbeheerder en kies screens-<project>-devices group en geef deze leesmachtigingen aan het aangepaste ontwerppad.

  2. Geef screens-<project>-administrators groep lees- en wijzigingsmachtigingen op voor dit pad.

Resultaat weergeven

Nadat u de voorgaande stappen hebt uitgevoerd, kunt u het bestand stats.css uit CRXDE Lite bijwerken en als gevolg daarvan de update bekijken van de tekstbedekking die al aan het element is toegevoegd.

Voer de onderstaande stappen uit om het bijgewerkte ontwerp voor tekstbedekking weer te geven:

  1. Navigeer naar uw AEM Screens-project met de naam customstyle —> Channels —> DemoBrand. Selecteer het kanaal en klik Bewerken van de actiebar om de redacteur te openen.

  2. Aangezien u het ontwerp nu hebt toegevoegd aan het veld Ontwerpen, zoals hierboven vermeld, klikt u op Voorvertoning om de huidige opmaak van de afbeelding met tekstbedekking weer te geven.

    afbeelding

  3. Navigeer naar het bestand static.css in CRXDE Lite en voeg het lettertype font-family: "Lucida Console", Courier, monospace; toe aan dit bestand, zoals hieronder wordt weergegeven.
    afbeelding

  4. Nadat u de wijzigingen hebt opgeslagen en de voorvertoning opnieuw hebt geladen, wordt het lettertype voor tekstbedekking bijgewerkt, zoals in de onderstaande afbeelding wordt getoond.

    afbeelding

  5. Bovendien kunt u de laatste twee codeblokken verwijderen uit het bestand static.css om de in vakken geplaatste opmaak rond de tekstbedekking te verwijderen.
    afbeelding

  6. U ziet de bijgewerkte wijziging in de voorvertoning waar de tekstbedekking aan de afbeelding is toegevoegd.

    afbeelding

    Nu kunt u uw merk en aangepaste opmaak bijwerken voor tekstbedekkingen die aan uw elementen zijn toegevoegd.

Op deze pagina