Targeting CSS in the Editor.html for AEM Components for AEMaaCS

Sometimes as developers, we would need to inject some CSS into our pages in the edit-modes to enhance the experience of our authors. One key skill as an AEM developer knowing how to customize the authoring experience in the editor.html (while content authors are editing the page). This article explores the techniques of targeting CSS for AEM components in various authoring modes to optimize the content creation process.

This has only been tested on AEMaaCS.

Quick Links

Understanding Authoring Modes in AEM
Targeting Components in Different Authoring Modes
Benefits of Targeting CSS in AEM Editor
Conclusion

1. Understanding Authoring Modes in AEM:

AEM’s editor.html supports multiple authoring modes, each serving a specific purpose in the content creation workflow. These modes include edit mode, preview mode, layout mode, developer mode, MSM (Multi-Site Manager) mode, and time warp mode. To enhance the authoring experience, it’s crucial to apply targeted CSS to components based on the current authoring mode.

2. Targeting Components in Different Authoring Modes:

To achieve a seamless authoring experience, developers can leverage specific CSS classes associated with each authoring mode in AEM. The following example demonstrates how to target a custom component called “.my-component” in different authoring modes:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

/* Edit Mode */
.aem-AuthorLayer-Edit .my-component {
background: red;
}

/* Preview Mode */
.aem-AuthorLayer-Preview .my-component {
background: blue;
}

/* Layout Mode */
.aem-AuthorLayer-Layouting .my-component {
background: green;
}

/* Developer Mode */
.aem-AuthorLayer-Developer .my-component {
border: 2px solid yellow;
}

/* Time Warp Mode */
.aem-AuthorLayer-Timewarp .my-component {
opacity: 0.7;
}

/* MSM Mode */
.aem-AuthorLayer-MSM .my-component {
background: purple;
}

In the above example, each CSS rule targets the “.my-component” class in a specific authoring mode, applying distinct styles to improve visibility or provide context for authors working in that mode.

3. Benefits of Targeting CSS in AEM Editor:

Improved Visibility: By applying different background colors or borders in various authoring modes, developers can enhance the visibility of components, making it easier for authors to identify and manipulate them.
Contextual Styling: Tailoring styles based on the authoring mode provides contextual information to content authors. For instance, applying a distinctive style in developer mode can signify that the component is currently being modified at a code level.
Optimized Workflows:
Optimized Workflows: Targeted CSS in the editor.html file optimizes authoring workflows by reducing confusion and streamlining the content creation process. Authors can quickly grasp the current mode and focus on the relevant tasks.

4. Conclusion:

Customizing the authoring experience in AEM by targeting CSS in the editor.html file is a powerful way to enhance usability and streamline content creation workflows. By understanding and leveraging the specific CSS classes associated with each authoring mode, developers can provide a more intuitive and visually informative environment for content authors using AEMaaCS.

And one more last thing to note is, please ensure that these rules are added into your clientlibs.author structure, so that these rules will never be exposed on production.

Targeting CSS in the Editor.html for AEM Components for AEMaaCS