Anpassad profilering och formatering för textövertäckningar

Följ den här sidan om du vill lära dig hur du använder anpassade märkesinställningar och format för textövertäckningar på dina resurser i en AEM Screens-kanal.

Skapa anpassad profilering och formatering för textövertäckningar

Följ stegen nedan för att skapa anpassade märkesnamn och format för textövertäckningar:

Skapa ett AEM Screens-projekt. I det här exemplet visas funktionaliteten genom att ett projekt med namnet customStyle och en kanal med namnet DemoBrand skapas, vilket visas i bilden nedan.
Dra och släpp en bild från redigeraren och lägg till textövertäckning till resursen.

OBSERVERA

Mer information om hur du lägger till en textövertäckning i resursen i en kanalredigerare finns i Textövertäckning.
Navigera till CRXDE Lite från din AEM instans —> tools —> CRXDE Lite.
Du måste skapa en anpassad design i /apps/settings/wcm/designs/<your-project>/, t.ex. navigera till /apps/settings/wcm/designs/customstyle/

Skapa filen static.css och ange följande css-regler. Visas också som ett exempel i figuren under CSS-reglerna.

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

bild

Kopiera sökvägen till ditt projekt. I det här fallet är sökvägen /apps/settings/wcm/designs/customstyle.
Navigera till kanalen DemoBrand (skapad i steg(1)) och klicka på Egenskaper i åtgärdsfältet när du har valt kanalen.
Gå till fliken Avancerat och kontrollera fältet Design.

OBSERVERA

Som standard visar fältet Design sökvägen till designen i mappen libs.
Uppdatera fältet Design med sökvägen till projektmappen. I det här fallet blir det /apps/settings/wcm/designs/customstyle.
Klicka på Spara och stäng för att uppdatera designsökvägen.

VIKTIGT

Du kan välja att täcka över de befintliga skärmmallarna för att mata in dina egna designer som standard eller skapa en egen mall helt och hållet. Mer information finns i stegen nedan.
Så här övertäcker du de befintliga skärmmallarna så att du kan mata in din egen design som standard:
1. Lägg över /libs/screens/core/templates/sequencechannel i /apps/screens/core/templates/sequencechannel.
2. Ändra egenskapen cq:designPath i /apps/screens/core/templates/sequencechannel/jcr:content så att den pekar på den nya designen.
Så här skapar du en egen mall:
1. Kopiera /libs/screens/core/templates/sequencechannel till /apps/customstyle/templates/styled-sequencechannel.
2. Ändra egenskapen cq:designPath i /apps/customstyle/templates/styled-sequencechannel/jcr:content så att den pekar på den nya designen.

Uppdaterar åtkomstkontrollistor

Du måste uppdatera åtkomstkontrollistorna för dessa designer så att de kan hämtas av spelaren.

Navigera till användaradministratören och välj screens-<project>-devices group och ge den läsbehörighet till den anpassade designsökvägen.
Ange screens-<project>-administrators-gruppbehörighet för att läsa och ändra i den här sökvägen.

Visa resultatet

När du har utfört de föregående stegen kan du uppdatera din statis.css-fil från CRXDE Lite och följaktligen visa uppdateringen av textöverlägget som redan har lagts till i resursen.

Följ stegen nedan för att visa den uppdaterade designen för textövertäckning:

Gå till ditt AEM Screens-projekt med namnet custom style —> Channels —> DemoBrand. Markera kanalen och klicka på Redigera i åtgärdsfältet för att öppna redigeraren.
Eftersom du nu har lagt till designen i fältet Designs, som nämnts ovan, klickar du på Förhandsgranska för att visa den aktuella formateringen i bilden med textövertäckning.
Navigera till filen static.css i CRXDE Lite och lägg till teckensnittet font-family: "Lucida Console", Courier, monospace; i den här filen, som visas nedan.
När du har sparat ändringarna och läst in förhandsvisningen igen visas en uppdatering av teckensnittet för textövertäckning, vilket visas i bilden nedan.
Du kan även ta bort de två sista kodblocken från filen static.css för att ta bort den rutformade formateringen runt textövertäckningen.
Du kommer att se den uppdaterade ändringen i förhandsvisningen där textöverlägget läggs till i bilden.

Nu kan ni uppdatera ert varumärke och anpassa formateringen för textöverlägg som läggs till i ert material.