Aangepaste branding en opmaak voor tekstbedekkingen creating-custom-branding-styling

Maak een AEM Screens-project. Dit voorbeeld toont de functionaliteit door een project te creëren genoemd customstyle en een kanaal genoemd DemoBrand, zoals aangetoond in het hieronder cijfer.

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

Navigeer aan CRXDE Lite van uw instantie van AEM > hulpmiddelen > CRXDE Lite.

Een aangepast ontwerp maken in /apps/settings/wcm/designs/<your-project>/ , navigeer in dit geval naar /apps/settings/wcm/designs/customstyle/

Creeer a static.css dossier en plaats de volgende css regels. 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);
 }

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

Navigeer aan het kanaal dat als wordt genoemd DemoBrand (in stap (1) wordt gecreeerd) en klik Eigenschappen van de actiebar na het selecteren van het kanaal.

Navigeer aan het Geavanceerde lusje en controleer het 3} gebied van het Ontwerp {.

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

Klik sparen & dicht om de ontwerppad bij te werken.

Als u de bestaande Screens-sjablonen wilt bedekken om uw eigen ontwerpen standaard te injecteren:

1. Bedekking /libs/screens/core/templates/sequencechannel in /apps/screens/core/templates/sequencechannel .
2. Wijzig de eigenschap cq:designPath in /apps/screens/core/templates/sequencechannel/jcr:content zodat deze naar het nieuwe ontwerp wijst.

Uw eigen sjabloon maken:

1. Kopieer /libs/screens/core/templates/sequencechannel naar /apps/customstyle/templates/styled-sequencechannel .
2. Wijzig de eigenschap cq:designPath in /apps/customstyle/templates/styled-sequencechannel/jcr:content zodat deze naar het nieuwe ontwerp wijst.

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

Geef screens-<project>-administrators machtigingen voor het lezen en wijzigen van dit pad op.

Navigeer aan uw project van AEM Screens dat als customstyle wordt genoemd > Kanalen > DemoBrand. Klik het kanaal en klik uitgeven van de actiebar.

Aangezien u nu het ontwerp aan uw Ontwerpen gebied, zoals hierboven vermeld hebt toegevoegd, klik Voorproef om het huidige stileren op het beeld met tekstbedekking te bekijken.

Navigeer aan uw static.css dossier in CRXDE Lite, en voeg de doopvont zoals font-family: "Lucida Console", Courier, monospace; aan dit dossier toe, zoals hieronder getoond.

Wanneer u de wijzigingen opslaat en de voorvertoning opnieuw laadt, wordt het lettertype voor tekstbedekking bijgewerkt, zoals in de onderstaande afbeelding wordt getoond.

Ook, kunt u de laatste twee blokken van code uit het {dossier verwijderen 0} static.css om het in dozen vervaardigde stileren rond de tekstbedekking te verwijderen.

Bekijk de bijgewerkte wijziging in de voorvertoning waar de tekstbedekking aan de afbeelding is toegevoegd.

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