Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

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

View solution in original post

0 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

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