Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.

How to override coralui3.css

Avatar

Level 2

Hi,

When opening a component, a dialog box opens for editing the contents, I see some css style applies on it (a blue color applies on an active tab - please take a look at the attachment).  I inspect and see a css file - localhost:4502/etc.clientlibs/clientlibs/granite/coralui3.css .

I need to override some style in coralui3.css file.  I try to locate this file, but don't see it anywhere.  Please give me a hand how to override some styles in this file.

Thanks! 

 

AEM-dialog-box.gif

5 Replies

Avatar

Community Advisor

I won’t recommend to override the coralui3.css instead you can create your custom client libs css files to override the css properties and add those client line for the components for you want to override 

Avatar

Level 2

Hi DPrakashRaj, Thanks for recommendation!  But in this case, I want to override/edit style for a dialog box component.

I have tried some CSS style in clientlibs, but it doesn't reflect on dialog box component.

Avatar

Community Advisor

First check that when you open the component your custom css files are loading or not the. You can play with some properties like !important to make sure your css is final and try to add css with the class name that ootb component is using

Avatar

Community Advisor

If you put the categories as cq.authoring.dialog it will load the clientlibs for all component while editing and if you want to load it only for some specific clientlibs than you can use extraclientlibs property on your aem dialog xml. There are lots of document available for this one as well. One for reference http://aemtool.blogspot.com/2016/12/enabling-extra-clientlibs-for.html?m=1