Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

template level css change

Avatar

Level 4

is it possible to change css on basis of template selection.

all the components will be same.

but css should change like font colour, size, bg color etc.

i do not find any point of recreating components just because css changed. as backend execution even html classes id are same.

please help for understanding the process

or is there any work around for such situation.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

You can also try wrapping the parsys added in the template with some html tag (div/span etc) and add class to the tag.  Using the class the styles can be modified.

Ex:

Template --> Page Component --> JSP (Where template parsys is added)

<div class="templatename">

<cq:include path="par" resourceType="foundation/components/parsys" />

</div>

By adding this all the components will be wrapped under div having class (templatename) and styles can be added based on templatename.

Hope this helps!

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

You can also try wrapping the parsys added in the template with some html tag (div/span etc) and add class to the tag.  Using the class the styles can be modified.

Ex:

Template --> Page Component --> JSP (Where template parsys is added)

<div class="templatename">

<cq:include path="par" resourceType="foundation/components/parsys" />

</div>

By adding this all the components will be wrapped under div having class (templatename) and styles can be added based on templatename.

Hope this helps!