Custom Branding and Styling for Text Overlays creating-custom-branding-styling
Learn how to apply custom branding and styling for text overlays applied to your assets in an AEM Screens channel.
Creating Custom Branding and Styling for Text Overlays steps-custom-branding
Follow the steps below to create custom branding and styling for text overlays:
-
Create an AEM Screens project. This example showcases the functionality by creating a project named
customstyle
and a channel titled DemoBrand, as shown in the figure below. -
From the editor, drag-and-drop an image and add a text overlay to the asset.
note note NOTE To learn how to add a text overlay to your asset in a channel editor, see Text Overlay. -
Navigate to CRXDE Lite from your AEM instance > tools > CRXDE Lite.
-
Create a custom design in
/apps/settings/wcm/designs/<your-project>/
, for example, in this case, navigate to/apps/settings/wcm/designs/customstyle/
-
Create a static.css file and set the following css rules. Also shown as an example in the figure below the css rules.
code language-shell //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); }
-
Copy the path to your project, in this case, the path is
/apps/settings/wcm/designs/customstyle
. -
Navigate to the channel titled as DemoBrand (created in step(1)) and click Properties from the action bar after selecting the channel.
-
Navigate to the Advanced tab and check the Design field.
note note NOTE Be default, the Design field shows the path pointing to designs in the libs folder. -
Update the Design field with the path to your project folder. In this case, it is
/apps/settings/wcm/designs/customstyle
. -
Click Save & Close to update the design path.
note important IMPORTANT You can optionally overlay the existing Screens templates to inject your own designs by default or create your own template altogether. See the steps below for more details. -
To overlay the existing Screens templates to inject your own designs by default:
- Overlay
/libs/screens/core/templates/sequencechannel
in/apps/screens/core/templates/sequencechannel
. - Modify the
cq:designPath
property in/apps/screens/core/templates/sequencechannel/jcr:content
so that it points to the new design.
- Overlay
-
To create your own template altogether:
- Copy
/libs/screens/core/templates/sequencechannel
to/apps/customstyle/templates/styled-sequencechannel
. - Modify the
cq:designPath
property in/apps/customstyle/templates/styled-sequencechannel/jcr:content
so that it points to the new design.
- Copy
Updating ACLs updating-acls
Update the ACLs for these designs so the player can download them.
-
Navigate to user admin and choose the
screens-<project>-devices group
and give it read permission to the custom design path. -
Provide
screens-<project>-administrators
group read and modify permissions to this path.
Viewing the Result viewing-the-result
When you have completed the preceding steps, you can update your statis.css file from CRXDE Lite and therefore view the update to your text overlay that is already added to the asset.
Follow the steps below to view the updated design to text overlay:
-
Navigate to your AEM Screens project titled as
customstyle
> Channels > DemoBrand. Click the channel and click Edit from the action bar. -
Since you have now added the design to your Designs field, as mentioned above, click Preview to view the current styling on the image with text overlay.
-
Navigate to your static.css file in CRXDE Lite, and add the font such as,
font-family: "Lucida Console", Courier, monospace;
to this file, as shown below. -
When you save the changes and reload the preview, you see an update to the text overlay font, as shown in the figure below.
-
Also, you can remove the last two blocks of code from the static.css file to remove the boxed styling around the text overlay.
-
View the updated change in your preview where the text overlay is added to the image.
Now, you are ready to update your brand and custom styling for text overlays added to your assets.