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:

  1. 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.

    image

  2. From the editor, drag-and-drop an image and add a text overlay to the asset.

    image

    note note
    NOTE
    To learn how to add a text overlay to your asset in a channel editor, see Text Overlay.
  3. Navigate to CRXDE Lite from your AEM instance > tools > CRXDE Lite.

  4. Create a custom design in /apps/settings/wcm/designs/<your-project>/, for example, in this case, navigate to /apps/settings/wcm/designs/customstyle/

    image

  5. 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);
     }
    

    image

  6. Copy the path to your project, in this case, the path is /apps/settings/wcm/designs/customstyle.

  7. Navigate to the channel titled as DemoBrand (created in step(1)) and click Properties from the action bar after selecting the channel.

  8. Navigate to the Advanced tab and check the Design field.
    image

    note note
    NOTE
    Be default, the Design field shows the path pointing to designs in the libs folder.
  9. Update the Design field with the path to your project folder. In this case, it is /apps/settings/wcm/designs/customstyle.

    image

  10. 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.
  11. To overlay the existing Screens templates to inject your own designs by default:

    1. Overlay /libs/screens/core/templates/sequencechannel in /apps/screens/core/templates/sequencechannel.
    2. Modify the cq:designPath property in /apps/screens/core/templates/sequencechannel/jcr:content so that it points to the new design.
  12. To create your own template altogether:

    1. Copy /libs/screens/core/templates/sequencechannel to /apps/customstyle/templates/styled-sequencechannel.
    2. Modify the cq:designPath property in /apps/customstyle/templates/styled-sequencechannel/jcr:content so that it points to the new design.

Updating ACLs updating-acls

Update the ACLs for these designs so the player can download them.

  1. Navigate to user admin and choose the screens-<project>-devices group and give it read permission to the custom design path.

  2. 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:

  1. Navigate to your AEM Screens project titled as customstyle > Channels > DemoBrand. Click the channel and click Edit from the action bar.

  2. 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.

    image

  3. 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.

    image

  4. When you save the changes and reload the preview, you see an update to the text overlay font, as shown in the figure below.

    image

  5. Also, you can remove the last two blocks of code from the static.css file to remove the boxed styling around the text overlay.

image

  1. View the updated change in your preview where the text overlay is added to the image.

    image

    Now, you are ready to update your brand and custom styling for text overlays added to your assets.

recommendation-more-help
adce462a-f916-4dbe-9ab5-0b62cfb0f053