Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED
Custom CSS class on parsys
1 Accepted Solution
Correct answer by
wrote...
Let me explain more clearly:
Suppose I add an image component in my parsys: I would want to have custom CSS class on my image component. Similarly, when I add list component on the same parsys, I would like to have the same custom CSS class on the list component added.
Hi
Please have a look at the point 4,
//Create a new folder “aproject” in /etc/designs, then create the structure as shown below. The js.txt and css.txt should be empty files.
[img]http://blogs.adobe.com/experiencedelivers/files/2012/12/clientlibs6.jpg[/img]
The “clientlib” node has the following properties:
[img]http://blogs.adobe.com/experiencedelivers/files/2012/12/clientlibs7.jpg[/img]
With the “embed” property it embeds all the resources of “myproject.components”
Now change the call in the <head> section to:
<sly data-sly-call="${clientLib.css @ categories='myproject.all'}" data-sly-unwrap/>
<sly data-sly-call="${clientLib.js @ categories='myproject.all'}" data-sly-unwrap/>
This results now in the following HTML output:
<link rel="stylesheet" href="https://forums.adobe.com/etc/designs/aproject/clientlib.css" type="text/css">
<script type="text/javascript" src="/etc/designs/aproject/clientlib.js"></script>
If you open these files, you will see that the three JS and CSS resources are merged into one file. And although the resources are located in the /apps-folder all references are now done via the /etc/designs folder.
This is the way to apply CSS/JS on whole page.
~kautuk
Kautuk Sahni
Hi
Please have a look at this Adobe blog post:-
Link:- http://blogs.adobe.com/experiencedelivers/experience-management/clientlibs-explained-example
This post explains:
1. global JavaScript and CSS files
2. multiple components with their own JavaScript and CSS files
I hope this would help you achieve global css.
Thanks and Regards
Kautuk Sahni
Kautuk Sahni
Correct answer by
wrote...
Let me explain more clearly:
Suppose I add an image component in my parsys: I would want to have custom CSS class on my image component. Similarly, when I add list component on the same parsys, I would like to have the same custom CSS class on the list component added.
Hi
Please have a look at the point 4,
//Create a new folder “aproject” in /etc/designs, then create the structure as shown below. The js.txt and css.txt should be empty files.
[img]http://blogs.adobe.com/experiencedelivers/files/2012/12/clientlibs6.jpg[/img]
The “clientlib” node has the following properties:
[img]http://blogs.adobe.com/experiencedelivers/files/2012/12/clientlibs7.jpg[/img]
With the “embed” property it embeds all the resources of “myproject.components”
Now change the call in the <head> section to:
<sly data-sly-call="${clientLib.css @ categories='myproject.all'}" data-sly-unwrap/>
<sly data-sly-call="${clientLib.js @ categories='myproject.all'}" data-sly-unwrap/>
This results now in the following HTML output:
<link rel="stylesheet" href="https://forums.adobe.com/etc/designs/aproject/clientlib.css" type="text/css">
<script type="text/javascript" src="/etc/designs/aproject/clientlib.js"></script>
If you open these files, you will see that the three JS and CSS resources are merged into one file. And although the resources are located in the /apps-folder all references are now done via the /etc/designs folder.
This is the way to apply CSS/JS on whole page.
~kautuk
Kautuk Sahni
