change in header/footer

[dhiraj85]

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 

[Nupur_Jain]

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?

[ArpitVarshney]

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 

[dhiraj85]

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. 

[ArpitVarshney]

Hi @dhiraj85 

try to clear your browser cache or open your page in incognito mode of browser and validate.

If that doesn't work then recompile your clientlib as @berliant says.

Regards

Arpit

[dhiraj85]

hi @ArpitVarshney, actually i am new in AEM,can u please tell me how to recompile client library

[ArpitVarshney]

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

[berliant]

Try to force clientlibs to recompile within your new changes:

https://helpx.adobe.com/ca/experience-manager/kb/How-to-force-a-recompilation-of-all-Sling-scripts-j...

[dhiraj85]

Hi @Nupur_Jain , yes mam,change effect is not coming, it is coming same as previous

[Nupur_Jain]

Hi @dhiraj85 

You need to rebuild your clientlibs in order to get the changed css.

• Go to http://localhost:4502/libs/granite/ui/content/dumplibs.rebuild.html
• Click on rebuild libraries button
• It will start the process and take upto several minutes. Do not refresh the page or close tab until all the clientlibs are rebuild. Otherwise you won't be able to keep track on when the clientlibs rebuilding got completed.

Thanks,

Nupur

[VeenaVikraman]

@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. 

[BrianKasingli · Accepted solution]

@dhiraj85,

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:

1. AEM(client library part 1) - https://youtu.be/nF_btgaUTIM
2. AEM(client library part 2) - https://youtu.be/caJa4i35UPI
3. AEM(client library part 3) - https://youtu.be/mFeieUsaMDY

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!