Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

CSS for Experience Fragments Not Applying in AEM Author Mode and "View as Published"

Avatar

Level 3

Hello Adobe Community,

 

I’m encountering an issue in Adobe Experience Manager as a Cloud Service (AEMaaCS) where CSS is not applying to my Experience Fragments (XFs) authoring environment or in the "View as Published" mode. However, when I add the Experience Fragment to a page and check, the CSS loads correctly.

How to apply the CSS directly to XF alone?

Any insights or solutions would be greatly appreciated!

 

 

@arunpatidar 

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

4 Replies

Avatar

Level 4

hi @SRC_AEM_DEV ,

My thoughts here based on the understanding, There are multiple ways to achieve this, providing a sample example below

  • How did you include the component CSS (assuming via client libraries)? If it is included along with all the other components in the page level (e.g. customheader.html), the css would render only on the pages which is using that page resource type.
  • Create the custom XF page template by including the respective client libraries respectively and use that xf template to create XF so that the component specific css will be rendered on the XF as well. 

 

Thanks,

Anil

Avatar

Level 6

Hi @SRC_AEM_DEV,

can you share your code so we can see how you inject the CSS? Are you using a ClientLib?

 

Daniel

Avatar

Community Advisor

You can simply include the required clientlib in your exp fragment template. 
You can take reference https://github.com/adobe/aem-guides-wknd/blob/main/ui.apps/src/main/content/jcr_root/apps/wknd/compo... 

Avatar

Community Advisor

Hi @SRC_AEM_DEV ,
XF does not load project client libs by default, you need to specify in the XF page to load your project clientlibs.

If you are using dynamic/editable template then you can use policy to load clientlibs

 

Example

<!-- Template Policy -->
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="cq:Page">
    <jcr:content 
        cq:policy="myapp/components/structure/xf-page/policy_xf_page" 
        jcr:primaryType="nt:unstructured" 
        sling:resourceType="wcm/core/components/policies/mappings">
        <root 
            cq:policy="wcm/foundation/components/responsivegrid/policy_xf_allow_comp" 
            jcr:primaryType="nt:unstructured" 
            sling:resourceType="wcm/core/components/policies/mapping" />
    </jcr:content>
</jcr:root>

<!-- Policy -->
<xf-page 
    jcr:primaryType="nt:unstructured">
    <policy_xf_page 
        jcr:primaryType="nt:unstructured" 
        jcr:title="XF Page Policy" 
        sling:resourceType="wcm/core/components/policy/policy" 
        clientlibs="[myapps.main]" />
</xf-page>


Arun Patidar