Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

How do you point to styles css in column control component

Avatar

Level 6

I am trying to change the dialog in a custom control component.

I have copied the component out of /libs/foundation/components/parsys into my own application folder.

However, the dialog no longer picks up the Coulmn Layout in the Selection.

I assume it is not able to find the css to set the columns.

My question is how do I point the Column Control Component to my own custom css.

 

Regards

Clive Stewart

1 Accepted Solution

Avatar

Correct answer by
Level 10

"how do I point the Column Control Component to my own custom css"

A column component is no different from any other AEM component - it is only javascript logic. In any AEM component - you can point to CSS by using this syntax in the component's JS logic:

<cq:includeClientLib categories="jquerysamples" />

You define the  clientlibs and define the categories property to - in this case jquerysamples. Make sure that the clientlib contains the CSS file you want to use in the given component. 

if you want to see this article - it shows you how to define a clientlibs and use it in a JSP file. 

https://helpx.adobe.com/experience-manager/using/querying-experience-manager-data-using1.html

You can also overlay an AEM component and make it point to your own clientlibs folder as well

Hope this helps. 

View solution in original post

4 Replies

Avatar

Level 10

Include the clientlibs which has the custom css to your component.

Avatar

Level 6

How do I point the column control to look at any specific css.

It does not look at the clientlib by default.

 

The dialog appears to point to a default path or it is using one of the dialog properties in the JCR to point to the style sheet.

Avatar

Correct answer by
Level 10

"how do I point the Column Control Component to my own custom css"

A column component is no different from any other AEM component - it is only javascript logic. In any AEM component - you can point to CSS by using this syntax in the component's JS logic:

<cq:includeClientLib categories="jquerysamples" />

You define the  clientlibs and define the categories property to - in this case jquerysamples. Make sure that the clientlib contains the CSS file you want to use in the given component. 

if you want to see this article - it shows you how to define a clientlibs and use it in a JSP file. 

https://helpx.adobe.com/experience-manager/using/querying-experience-manager-data-using1.html

You can also overlay an AEM component and make it point to your own clientlibs folder as well

Hope this helps. 

Avatar

Level 6

Thank you, that does answer my question.

 

Regards

Clive