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

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

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

Navigeer naar CRXDE Lite via AEM > Gereedschappen > CRXDE Lite.

Een aangepast ontwerp maken in /apps/settings/wcm/designs/<your-project>/In dit geval navigeert u bijvoorbeeld naar /apps/settings/wcm/designs/customstyle/

Maken static.css en stelt 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);
 }

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

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

Ga naar de Geavanceerd en controleer de Ontwerp veld.

Werk de Ontwerp veld met het pad naar de projectmap. In dit geval is het /apps/settings/wcm/designs/customstyle.

Klikken Opslaan en sluiten om het ontwerppad bij te werken.

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 de cq:designPath eigenschap in /apps/screens/core/templates/sequencechannel/jcr:content zodat het naar het nieuwe ontwerp verwijst.

Uw eigen sjabloon maken:

1. Kopiëren /libs/screens/core/templates/sequencechannel tot /apps/customstyle/templates/styled-sequencechannel.
2. Wijzig de cq:designPath eigenschap in /apps/customstyle/templates/styled-sequencechannel/jcr:content zodat het naar het nieuwe ontwerp verwijst.

Navigeer naar gebruikersbeheerder en kies de optie screens-<project>-devices group en geeft deze leesmachtigingen aan het aangepaste ontwerppad.

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

Ga naar uw AEM Screens-project met de naam customstyle > Kanalen > DemoBrand. Selecteer het kanaal en klik op Bewerken in de actiebalk.

Aangezien u het ontwerp nu aan uw Ontwerpen , zoals hierboven vermeld, klikt u op Voorvertoning Hiermee geeft u de huidige opmaak op de afbeelding weer met tekstbedekking.

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

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

Bovendien kunt u de laatste twee codeblokken verwijderen uit static.css bestand om de opmaakcode van de vakken 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.