Anpassad profilering och formatering för textövertäckningar creating-custom-branding-styling

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 en textövertäckning till resursen.

Navigera till CRXDE Lite från AEM > verktyg > CRXDE Lite.

Skapa en anpassad design i /apps/settings/wcm/designs/<your-project>/, till exempel navigera till /apps/settings/wcm/designs/customstyle/ i det här fallet

Skapa en static.css-fil 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);
 }

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.

Navigera till fliken Avancerat och kontrollera fältet Design.

Uppdatera fältet Design med sökvägen till projektmappen. I det här fallet är det /apps/settings/wcm/designs/customstyle.

Klicka på Spara och stäng för att uppdatera designsökvägen.

Så här övertäcker du de befintliga Screens-mallarna för att mata in din egen design som standard:

1. Överlägg /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.

Navigera till användaradministratören, välj screens-<project>-devices group och ge den läsbehörighet till den anpassade designsökvägen.

Ange screens-<project>-administrators-gruppens läs- och ändringsbehörigheter till den här sökvägen.

Navigera till ditt AEM Screens-projekt med namnet customstyle > Kanaler > DemoBrand. Klicka på kanalen och klicka på Redigera i åtgärdsfältet.

Eftersom du nu har lagt till designen i fältet Designs klickar du på Förhandsgranska för att visa den aktuella stilen på 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 sparar ändringarna och läser 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 boxade formateringen runt textövertäckningen.

Visa den uppdaterade ändringen i förhandsgranskningen där textöverlägget läggs till i bilden.

Nu kan ni uppdatera ert varumärke och era anpassade format för textöverlägg som lagts till i era resurser.