Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

How to change styles for built in community website

Avatar

Level 2

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. 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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

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.

View solution in original post

4 Replies

Avatar

Community Advisor

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

 

Sady_Rifat_0-1681376763850.png

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.

Avatar

Level 2

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

Avatar

Correct answer by
Community Advisor

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

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.

Avatar

Level 2

I have downloaded the /etc/designs/mysite-design from another AEM website. Now is it possible to use those styles in my site ? If so, how can I configure it ?