Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Custom CSS class on parsys

Avatar

Level 3

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

1 Accepted Solution

Avatar

Correct answer by
Administrator

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



Kautuk Sahni

View solution in original post

4 Replies

Avatar

Administrator

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

Avatar

Level 3

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.

Avatar

Level 10

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

Avatar

Correct answer by
Administrator

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



Kautuk Sahni