Unable to apply component-level CSS.

[Former Community Member]

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.

[edubey]

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_Solu · Accepted solution]

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:

<sly data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}" data-sly-unwrap/>

<sly data-sly-call="${clientLib.css @ categories='myproject.components'}" data-sly-unwrap/>

<sly data-sly-call="${clientLib.js @ categories='myproject.components'}" data-sly-unwrap/>

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]

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

[Former Community Member]

Hello smacdonald2008​,

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

Thanks & Regards

[smacdonald2008]

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]

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