change in header/footer

Avatar

dhiraj85

08-06-2020

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 

 

 

 

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

BrianKasingli

MVP

08-06-2020

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

 

Answers (4)

Answers (4)

Avatar

Veena_Vikram

MVP

08-06-2020

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

Avatar

Nupur_Jain

MVP

08-06-2020

Hi @dhiraj85 

 

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

Thanks,

Nupur

Avatar

ArpitVarshney

MVP

08-06-2020

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