Hello,
AEM 6.*
I have a parsys within which I can add some components. Now, I would like to add CSS classes to all the added components of the parsys.
I have tried:
<div class="customCSSClass" data-sly-resource="${'marginCol' @ resourceType='wcm/foundation/components/parsys'}"></div>
But, this statement does not add the custom CSS to the added components of the parsys. Is there any way I could achieve this?
Thanks,
Varun
Solved! Go to Solution.
Views
Replies
Total Likes
sud.varun 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
Views
Replies
Total Likes
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
Views
Replies
Total Likes
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.
Views
Replies
Total Likes
Look at the doc that kautuk referenced. In that- refer to the section:
Step 4: redirecting resources via /etc/designs and merging into single files - this is how you can get CSS to impact files under /apps.
With the “embed” property it embeds all the resources of “myproject.components”
Views
Replies
Total Likes
sud.varun 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
Views
Replies
Total Likes
Views
Like
Replies