Search code examples
aemaem-6

How to CSS styles to cq:dialogue in AEM

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');

enter image description here

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.

Solution

  • 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