Opacity of AEM Component in Author mode

[ksh_ingole7]

Hi, some of my components in AEM Author have opacity issue. The appear to be slightly transparent. An 0.55 opacity is set to the component in Author mode only (background-color : rgba(255,255,255,0.55)). How can I remove the opacity. Please refer to the screenshot below. Links are not appearing clearly due to the opacity value.

[milind_bachani · Accepted solution]

hi @ksh_ingole7 ,

This seems to be an issue with custom component you need to specifically override the CSS for author mode and call that particular clientlib css in author mode only, if you are using sightly do :

<sly data-sly-test.author="${wcmmode.edit || wcmmode.design}" 
data-sly-call="${clientlib.css @categories='custom.authorcss'}" >
</sly>

or you can directly add style as :

<sly data-sly-test.author="${wcmmode.edit || wcmmode.design}" >
    <style>
         // Override the CSS here for particular component 
    </style>
</sly>

[Anudeep_Garnepudi]

@ksh_ingole7  The overlay opacity will be applied to the components which are having placeholder text.

Ideal use case is to have the component placeholder text when the component is dragged and dropped for the first time(authoring for the first time) just to recognize. For the components already authored, no need of placeholder text. Refer core components.

1. Remove the placeholder text after authoring the component (like core components).
2. Do not render the component in edit mode (just keep placeholder always).
3. If you want placeholder text along with component content, you need to create a custom clientlib and use categories "cq.authoring.editor.sites.page" and override the default styles.

-AG