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.
Solved! Go to Solution.
Views
Replies
Total Likes
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>
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>
@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.
-AG