How to create a custom theme for AEM 6.1 Communities

[theo_nicolaou]

Hi,

I'm trying to work out how to create a custom theme for AEM 6.1 Communities. I can see multiple themes already available:

but I would like to create my own. I have tried to do this in CRXDE:

but I have no idea how to upload it so that it appears in AEM like all the other themes.

Searching online for documentation and examples has proved unsuccessful - can anyone help at all?

Thanks very much in advance

Theo

[JK_Kendall · Accepted solution]

Hi Theo,

These are Bootstrap themes.

All you need to do is to generate or create a Boostrap-compatible CSS and upload via the “custom theme” option when creating or modifying a community site (the "Upload CSS" visible in your screenshot). 

There are many tools for generating a Boostrap theme, such as https://pikock.github.io/bootstrap-magic/

I hope this helps.

- Janice

[theo_nicolaou]

Hi,

I understand that is an option, but when I do it this way every time I make a change to that CSS file and upload the file under the same filename it generates another entry in CRXDE and in the View Source for the site it refers to a different file. So for example, if I upload theo.css, it will refer to <link rel="stylesheet" href="/path/to/theo.css" type="text/css"/> in the web page. Then if I make a change to theo.css and I upload it, I expect the reference to stay the same but in CRXDE and the web page it refers to theo_0.css, and then theo_1.css and so on with every change. Is this expected behaviour?

Thanks

Theo

[JK_Kendall]

Hi Theo,

Yes, versioning is expected.

If this is problematic, you could open a support ticket through Customer Care.

- JK