How to CSS styles to cq:dialogue in AEM

Question

How can we add styles to the cq:dialogue tab in AEM instance?

we can change the styles in console via jQuery but can't apply when it's loaded within the javaScript(jQuery) file of any component used in the specific page.

$('.coral-Form-field.coral3-Multifield').css('background-color', 'black');

Here i am able to change the background color of opened cq:dialogue box to black (After closing and opening of dialogue the change goes away i.e background-color returns to normal ash color).

How and where should we write this code so that the style gets applied to the cq:dialogue box.

Answer 1

Add the property extraClientlibs to the cq:dialog with value, the category of your clientlib.

Suppose you have a clientlib with category 'x', add the property extraClientlibs to your cq:dialog and set its value as 'x'. Styles and JS scripts can be applied in this way. The clientlib folder could simply reside anywhere.

This link might help: https://wcmaem.blogspot.com/2016/08/how-to-load-touchui-dialog-specific.html

Answer 2

Add this line under your cq.dialog config:

extraClientlibs="[my.site]"

In case you are not sure where the category is, here is my sample:

My category sample

Also add granite class in your fields where you want to add the css class, example: