cq:styleDefaultClasses classes are applied to components only on author

Avatar

Avatar
Ignite 1
Level 2
filipa4436634
Level 2

Likes

3 likes

Total Posts

4 posts

Correct reply

0 solutions
Top badges earned
Ignite 1
Give Back 3
Give Back
Boost 3
Boost 1
View profile

Avatar
Ignite 1
Level 2
filipa4436634
Level 2

Likes

3 likes

Total Posts

4 posts

Correct reply

0 solutions
Top badges earned
Ignite 1
Give Back 3
Give Back
Boost 3
Boost 1
View profile
filipa4436634
Level 2

27-08-2019

We are using the Style System in order to apply classes for our components. In one of our components, we are using the cq:styleDefaultClasses option, which applies the correct classes by default on the author environment. However, when published, the default css classes are not applied. We are using AEM 6.5


When the author manually selects a style, the css classes are applied on both author and publish environment. The issue only occurs with default css classes, when the author does not select any style.

Has anyone faced this issue?

Replies

Avatar

Avatar
Validate 1
MVP
Theo_Pendle
MVP

Likes

238 likes

Total Posts

251 posts

Correct reply

105 solutions
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 10
Ignite 1
View profile

Avatar
Validate 1
MVP
Theo_Pendle
MVP

Likes

238 likes

Total Posts

251 posts

Correct reply

105 solutions
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 10
Ignite 1
View profile
Theo_Pendle
MVP

27-08-2019

I've just tested this, also on 6.5 and I can't reproduce your issue :S

Just to get this right, you have a default class, slay "redTextClass" for example, which you entered as a default class. You also created a style which adds that same class (called "Red" for example). On publisher the your component does not have the redTextClass class unless you select the Red style, correct?

Could you also show us the policy node for the component in question? Here is the policy for my title component for example:

1822123_pastedImage_7.png

Export the XML and post it here so we can have a look

Avatar

Avatar
Ignite 1
Level 2
filipa4436634
Level 2

Likes

3 likes

Total Posts

4 posts

Correct reply

0 solutions
Top badges earned
Ignite 1
Give Back 3
Give Back
Boost 3
Boost 1
View profile

Avatar
Ignite 1
Level 2
filipa4436634
Level 2

Likes

3 likes

Total Posts

4 posts

Correct reply

0 solutions
Top badges earned
Ignite 1
Give Back 3
Give Back
Boost 3
Boost 1
View profile
filipa4436634
Level 2

27-08-2019

Yes, that is the correct scenario. We have "l-container lcontainer--narrow" classes applied by default, and they are also applied when the "narrowContent" style is selected.
On our author instance, the classes are applied to the component by default when nothing is selected and when author selects the style manually. But on our publish instance the styles are applied only when the author selects the "narrowContent" style

Here is the extract from the policy file:

<container
   jcr:primaryType="nt:unstructured"
   jcr:title="Content"
   sling:resourceType="wcm/core/components/policy/policy"
   backgroundImageEnabled="true"
   columns="4"
   cq:styleDefaultClasses="l-container l-container--narrow"
   components="[group:Base]">

   <jcr:content jcr:primaryType="nt:unstructured"/>

   <cq:styleGroups jcr:primaryType="nt:unstructured">

   <width
   cq:styleGroupLabel="Width"
   jcr:primaryType="nt:unstructured">

   <cq:styles jcr:primaryType="nt:unstructured">

   <narrowContent
   cq:styleClasses="l-container l-container--narrow"
   cq:styleId="narrowContent"
   cq:styleLabel="Narrow Content"
   jcr:primaryType="nt:unstructured"/>

   <fullContentWidth
   cq:styleClasses="l-container"
   cq:styleId="fullContentWidth"
   cq:styleLabel="Full content width"
   jcr:primaryType="nt:unstructured"/>

   </cq:styles>

   </width>

   </cq:styleGroups>

</container>

Avatar

Avatar
Ignite 1
Level 2
filipa4436634
Level 2

Likes

3 likes

Total Posts

4 posts

Correct reply

0 solutions
Top badges earned
Ignite 1
Give Back 3
Give Back
Boost 3
Boost 1
View profile

Avatar
Ignite 1
Level 2
filipa4436634
Level 2

Likes

3 likes

Total Posts

4 posts

Correct reply

0 solutions
Top badges earned
Ignite 1
Give Back 3
Give Back
Boost 3
Boost 1
View profile
filipa4436634
Level 2

27-08-2019

Sorry, the issue is no longer happening. I just created a new page and styles are working correctly. Maybe it was a caching issue for component or policy that was leading to this behavior
Thank you!

Avatar

Avatar
Validate 1
MVP
Theo_Pendle
MVP

Likes

238 likes

Total Posts

251 posts

Correct reply

105 solutions
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 10
Ignite 1
View profile

Avatar
Validate 1
MVP
Theo_Pendle
MVP

Likes

238 likes

Total Posts

251 posts

Correct reply

105 solutions
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 10
Ignite 1
View profile
Theo_Pendle
MVP

27-08-2019

Okay, well I'm happy to hear it's fixed

Just one more question: is "l-container" a class you always want to be applied to your component? Because I think the styles associated with it might belong in the default.less file if that's the case.

Avatar

Avatar
Ignite 1
Level 2
filipa4436634
Level 2

Likes

3 likes

Total Posts

4 posts

Correct reply

0 solutions
Top badges earned
Ignite 1
Give Back 3
Give Back
Boost 3
Boost 1
View profile

Avatar
Ignite 1
Level 2
filipa4436634
Level 2

Likes

3 likes

Total Posts

4 posts

Correct reply

0 solutions
Top badges earned
Ignite 1
Give Back 3
Give Back
Boost 3
Boost 1
View profile
filipa4436634
Level 2

27-08-2019

Yes, most probably we will need this class in all cases. Will move it to the dafault.less file. Thanks for the advice!!