Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Opacity of AEM Component in Author mode

Avatar

Community Advisor

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.

 

ksh_20799_0-1641276728123.png

 

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

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>




View solution in original post

2 Replies

Avatar

Correct answer by
Employee Advisor

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>




Avatar

Community Advisor

@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