Expand my Community achievements bar.

cq:styleDefaultClasses classes are applied to components only on author

Avatar

Level 2

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?

5 Replies

Avatar

Level 10

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

Level 2

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

Level 2

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

Level 10

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

Level 2

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