hi
i have create a client library,it is running with header and footer now i want to change in footer background and something other by using css. so whenever i have try to change through inspect element then effect is coming but if i have make proper change in css in style.css(i have make style.css for header and footer.html) then no change effect is coming, so please help me.
thanks
Solved! Go to Solution.
Views
Replies
Total Likes
Assuming that you newly created your AEM website AEM Project Archetype, and utilising default client library. clientlib-site, We can try to troubleshoot your situation. Please troubleshoot the problems below on the Author instance only.
1. Can view your client library under /apps/my-site/clientlibs/*, within http://localhost:4502/crx/de/index.jsp
2. Does your .content.xml setup properly and configured to be:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:ClientLibraryFolder"
allowProxy="{Boolean}true"
categories="[${appId}.site]" />
3. Do you have a js.txt and css.txt file, configured properly?
If you don't know how to set up a client library, please take a look at these easy to follow tutorial videos:
4. If above step 1, 2 & 3 are validated, we can move on to step 5.
5. Validate the generated .css reference in your page. Go to your page that you are testing and open "view page source", and find the .css reference. Can you find it? Click and View the .css file, does your CSS exist in the code?
6. During development on the AEM Author instance, after a re-build and deploy of your project code, can you see your code changes in /apps/my-site/clientlibs/*? We are trying to troubleshoot the basics so that we can understand what the underlying problems are.
7. Once steps 1-6 have been validated, you can move to the more advanced topics that others have mentioned, like reviewing the cache and recompiling the JS and CSS.
If you are really stuck, I suggest you spin up a new Author Instance, then use your maven skills to set up a brand new AEM project, AEM Project Archetype. With the new AEM project, you can use this as a sandbox for you to learn how client libraries behave and how they are setup. After when the project is built, you can make adjustments to clientlib-site, and just study and observe the behaviours of how your changes are being added into AEM and the outcome of the page.
I hope this helps. Happy Learning AEM!
HI @dhiraj85
Are you trying to say that your change is not coming up in final clientlib css file. Also, on what environment are you trying this, is it your local AEM environment?
Views
Replies
Total Likes
Hi @dhiraj85
It is possible that your CSS changes are getting overridden in your style.css.
Like for example:
if you have a span element like this in footer component:
<span>Test</span>
and style.css is like this to apply background:
span {background-color: black;}
span {background-color: white;}
Then the last property will override the previous property and all span will have background color as white.
Recommended way to solve is that you can give a class to span and target that class in CSS
<span class="test">Test</span>
and style.css is:
span {background-color: white;}
.test {background-color: black;}
In this way, all the span having class other than test will have white background color while the test class span will have black background.
If that is not the issue then try to invalidate cache.
The clientlibs in AEM consists of JS and CSS and in some instances they get cached; which as would be obvious; causes issues.
To remove this cache and rebuild the clientlibs, following link is quite useful:
<host>:<port>/libs/granite/ui/content/dumplibs.rebuild.html
There are individual buttons to invalidate cache and rebuild the libraries on this page.
Regards,
Arpit
Regards,
Arpit
hi arpitv27529355, bro, i am not going to change any thing...the class name is same just i want change background color,it is black now i want to change any other color so i am trying to change in color,,,by the inspect it is ok but but i have changed properly in css then till background colour is black.
Views
Replies
Total Likes
Views
Replies
Total Likes
hi @ArpitVarshney, actually i am new in AEM,can u please tell me how to recompile client library
Views
Replies
Total Likes
Hi @dhiraj85
The clientlibs in AEM consists of JS and CSS and in some instances they get cached; which as would be obvious; causes issues.
To remove this cache and rebuild the clientlibs, following link is quite useful:
<host>:<port>/libs/granite/ui/content/dumplibs.rebuild.html
There are individual buttons to invalidate cache and rebuild the libraries on this page.
Regards,
Arpit
Views
Replies
Total Likes
Try to force clientlibs to recompile within your new changes:
Views
Replies
Total Likes
Hi @dhiraj85
You need to rebuild your clientlibs in order to get the changed css.
Thanks,
Nupur
@dhiraj85 Sometimes your CSS and JS changes won't reflect immediately as soon as you make the changes as the old files gets cached in your browser. So whenever you make any JS or CSS change , to test it , either clear the browser cache and reload the page, or open you page in an Incognito window.
Assuming that you newly created your AEM website AEM Project Archetype, and utilising default client library. clientlib-site, We can try to troubleshoot your situation. Please troubleshoot the problems below on the Author instance only.
1. Can view your client library under /apps/my-site/clientlibs/*, within http://localhost:4502/crx/de/index.jsp
2. Does your .content.xml setup properly and configured to be:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:ClientLibraryFolder"
allowProxy="{Boolean}true"
categories="[${appId}.site]" />
3. Do you have a js.txt and css.txt file, configured properly?
If you don't know how to set up a client library, please take a look at these easy to follow tutorial videos:
4. If above step 1, 2 & 3 are validated, we can move on to step 5.
5. Validate the generated .css reference in your page. Go to your page that you are testing and open "view page source", and find the .css reference. Can you find it? Click and View the .css file, does your CSS exist in the code?
6. During development on the AEM Author instance, after a re-build and deploy of your project code, can you see your code changes in /apps/my-site/clientlibs/*? We are trying to troubleshoot the basics so that we can understand what the underlying problems are.
7. Once steps 1-6 have been validated, you can move to the more advanced topics that others have mentioned, like reviewing the cache and recompiling the JS and CSS.
If you are really stuck, I suggest you spin up a new Author Instance, then use your maven skills to set up a brand new AEM project, AEM Project Archetype. With the new AEM project, you can use this as a sandbox for you to learn how client libraries behave and how they are setup. After when the project is built, you can make adjustments to clientlib-site, and just study and observe the behaviours of how your changes are being added into AEM and the outcome of the page.
I hope this helps. Happy Learning AEM!
Views
Likes
Replies
Views
Likes
Replies