CSS for Experience Fragments Not Applying in AEM Author Mode and "View as Published" | Community
Skip to main content
S
SRC_AEM_DEV
Level 2
October 29, 2024
Solved

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

  • October 29, 2024
  • 4 replies
  • 1081 views

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 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by arunpatidar

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>

4 replies

A
Anil_Chennapragada
Level 4
October 29, 2024

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

    daniel-strmecki
    Community Advisor and Adobe Champion
    daniel-strmeckiCommunity Advisor and Adobe Champion
    Community Advisor and Adobe Champion
    October 29, 2024

    Hi @src_aem_dev,

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

     

    Daniel

      h_kataria
      Community Advisor
      h_katariaCommunity Advisor
      Community Advisor
      October 29, 2024

      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/components/xfpage/customheaderlibs.html#L18 

        arunpatidar
        Community Advisor
        arunpatidarCommunity AdvisorAccepted solution
        Community Advisor
        October 29, 2024

        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
          Terms & ConditionsAccessibility statement

          Loading footer...