Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

How to create a custom theme for AEM 6.1 Communities

theo_nicolaou
Level 2
Level 2

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

1 Accepted Solution
JK_Kendall
Correct answer by
Level 8
Level 8

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

View solution in original post

0 Replies
JK_Kendall
Correct answer by
Level 8
Level 8

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

View solution in original post

theo_nicolaou
Level 2
Level 2

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
Level 8
Level 8

Hi Theo,

Yes, versioning is expected.

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

- JK