How to override coralui3.css

[PD04]

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! 

[DPrakashRaj]

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 

[PD04]

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.

[DPrakashRaj]

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

[PD04]

Sorry, my custom css files are not loading.

[DPrakashRaj]

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