Level 2

Solved

Custom CSS class on parsys

Forum|Forum|9 years ago
August 12, 2016
4 replies
3824 views

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:

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by kautuk_sahni

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:

This results now in the following HTML output:

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

Community Manager

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

S

sud_varunAuthor

Level 2

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.

smacdonald2008

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”