Expand my Community achievements bar.

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