How to change styles for built in community website

[alwinaugustin]

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. 

[Sady_Rifat]

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]

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

[Sady_Rifat · Accepted solution]

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.

[alwinaugustin]

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 ?