Customizing AEM dialog - increasing all field's sizes

Viewed 21

I have a carousel component for which there is a touch UI dialog naming '''cq:dialog''' .I need to increase size of all the fields of AEM dialog. Can anybody help me with this?

1 Answers

You can extend the aem style sheets by creating a clientLib:

Create a folder on file system. In this folder put a file with name content.xml. The content of this must be

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:ClientLibraryFolder"
    categories="[coralui3]" />

The most important thing is categories=[...]. The name of categoriy must be "coralui3".

During deployment your own css styles will be virtuelly added to your enviroment.

Then put two files into the folder. One file must be named with css.txt. The name for your other one can be named by your own. In example 'myown.css'. Open css.txtand put the name of your css file into it. See also this video on youtube.

If you want to apply your style on all dialog widgets, you style classes must be named like the classes from AEM itself.

In case you want to apply partially, you have create your own css class. Then open your dialogs xmls and add the keyword "granitCss=" to you prefered widget. See also here.

Related