A

Anonymous

Solved

Unable to apply component-level CSS.

Forum|Forum|8 years ago
September 20, 2017
6 replies
3697 views

Hello,

I'm trying to add CSS for a component. I've created a cq:ClientLibraryNode and then created two new files under it >> css.txt and component.css. Please advise how to load this file for the component as the styles in component.css are not getting applied.

Thanks in advance.

Regards.

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 Techaspect_Solu

Hi,

Assuming that you have created your clientLibs under /apps/yourProjectFolder which might be root cause of your styles not being loaded. Creating component level clientLibs has few downsides such as below -

The resources are retrieved from /apps, but /apps will have to be blocked on the publish instance which might be the reason behind your css styles not being loaded. For this to be resolved, we will have to redirect resources via /etc/designs and merge into single files. Please refer below community article for clear understanding. This talks about :

1. Components with their own Javascript and CSS files

2. Global Javascript and CSS files

So here, you can learn to create a component specific javascripts/css and global javascripts/css.

http://blogs.adobe.com/experiencedelivers/experience-management/clientlibs-explained-example/

Note:

For example - To include a client lib that contains JQuery Libs/CSS - you would use:

Also make sure that you will have to you will have to register your component.css in css.txt file as shown below:

#base=css

component.css

Regards,

TechAspect Solutions

edubey

Level 10

A client library will not be loaded unless you embed it or call it template include or define the same category which is being already loaded by someone

I think you are looking to embed this into main client lib.

Go to project global client lib and add a property embed with value as the category of component client lib.

https://docs.adobe.com/docs/en/aem/6-3/develop/the-basics/clientlibs.html#Embedding Code From Other Libraries

Thanks

Techaspect_SoluAccepted solution

Level 7

Hi,

Assuming that you have created your clientLibs under /apps/yourProjectFolder which might be root cause of your styles not being loaded. Creating component level clientLibs has few downsides such as below -

The resources are retrieved from /apps, but /apps will have to be blocked on the publish instance which might be the reason behind your css styles not being loaded. For this to be resolved, we will have to redirect resources via /etc/designs and merge into single files. Please refer below community article for clear understanding. This talks about :

1. Components with their own Javascript and CSS files

2. Global Javascript and CSS files

So here, you can learn to create a component specific javascripts/css and global javascripts/css.

http://blogs.adobe.com/experiencedelivers/experience-management/clientlibs-explained-example/

Note:

For example - To include a client lib that contains JQuery Libs/CSS - you would use:

Also make sure that you will have to you will have to register your component.css in css.txt file as shown below:

#base=css

component.css

Regards,

TechAspect Solutions

smacdonald2008

Level 10

We have a lot of examples here -- see this article where we turn a page component blue via CSS: Adobe Experience Manager Help | Submitting Adobe Experience Manager form data to Java Sling Servlets

A

Anonymous

Hello smacdonald2008,

The article you have linked is about Sling Servlets . Request you to update with the correct link.

Thanks & Regards

smacdonald2008

Level 10

In this article, we have site.css, which makes page component blue background. Look how we reference it. This will help you understand how to get CSS at component level...

Adobe Experience Manager Help | Creating custom Adobe Experience Manager email services

smacdonald2008

Level 10

To see how to apply CSS at site level, see Scott's Digital Community: Creating your First Adobe Experience Manager 6.3 website