How to change styles for built in community website | Community
Skip to main content
alwinaugustin
alwinaugustin
Level 2
April 13, 2023
Solved

How to change styles for built in community website

  • April 13, 2023
  • 1 reply
  • 965 views

I am new to AEM and I have created a Community website using the Communities functionality in AEM. Now I need to customise some of the styles, but I am not able to find the CSS files associated with it. Main things I need to change is the header navigation colour and some font sizes. Is there any option to overwrite the styles ? I am running AEM on my local machine and using the default bootstrap theme. My site path is /content/sites/my-community/en/ . The default quickstart install already has a community called We-Retail, but I am not sure how it is styled. 

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 Sady_Rifat

Yes, there is a lot more way you can edit in CRX.

One of the simple solution you can write code in clientlib directly: /apps/my-project/clientlibs/clientlib-site/css/site.css 

Since ui.frontend module is not deployed in CRX, only the build file is available in CRX, the components item will not be found.

 

Again if you don't want to edit in clientlib-site directly you can create your own clientlib. 

Detail about Clientlib: https://experienceleague.adobe.com/docs/experience-manager-65/developing/introduction/clientlibs.html?lang=en  

But for learning purpose, you can edit the clientlib-site on CRX.


Note: Once you deploy the code using the maven command all the changes which are done manually in CRX will reset.

1 reply

Sady_Rifat
Community Advisor
Sady_RifatCommunity Advisor
Community Advisor
April 13, 2023

Hello @alwinaugustin ,

Welcome to the AEM Development.

The AEM Component styles are basically in ui.frontend module. The frontend developers are writing CSS in this module and running an npm build command. This command actually generates a clientlib under the ui.apps folder.

The header main navigation style is in the path: ui.frontend/src/main/webpack/components/_navigation.scss

 

When you deploy the project using maven command a plugin is triggered and created a clientlib under ui.apps/src/main/content/jcr_root/apps/my-project/clientlibs/clientlib-site

<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>

This clientlib-site is actually attached to the page and it will load all the CSS and JS in your project.
Hope you understand this.

    alwinaugustin
    alwinaugustinAuthor
    Level 2
    April 13, 2023

    Thanks for the reply @sady_rifat . But is there anyway that I can edit it in CRXDE ? 

      Sady_Rifat
      Community Advisor
      Sady_RifatCommunity AdvisorAccepted solution
      Community Advisor
      April 13, 2023

      Yes, there is a lot more way you can edit in CRX.

      One of the simple solution you can write code in clientlib directly: /apps/my-project/clientlibs/clientlib-site/css/site.css 

      Since ui.frontend module is not deployed in CRX, only the build file is available in CRX, the components item will not be found.

       

      Again if you don't want to edit in clientlib-site directly you can create your own clientlib. 

      Detail about Clientlib: https://experienceleague.adobe.com/docs/experience-manager-65/developing/introduction/clientlibs.html?lang=en  

      But for learning purpose, you can edit the clientlib-site on CRX.


      Note:       Once you deploy the code using the maven command all the changes which are done manually in CRX will reset.

        Terms & ConditionsAccessibility statement

        Loading footer...