Is it possible to pass complete CSS for an experience fragment alone in AEM ? | Community
Skip to main content
akashkriz005
akashkriz005
Level 2
March 14, 2023
Solved

Is it possible to pass complete CSS for an experience fragment alone in AEM ?

  • March 14, 2023
  • 3 replies
  • 1408 views

Hello Everyone !

 

I'm trying to implement a footer on experience fragment  using Title , List native available components. But when arranged  using layout container there comes a gap in between and some additional CSS needs to be done. 

So can we pass complete CSS for this experience fragment as a whole which is having these components arranged just like giving css for a component alone ? 

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 Madhur-Madan

Hi @akashkriz005 ,

You can easily apply different styles to the respective component using the styles tab available under the component's policy at the template level.


After adding the styles you can apply them directly to the component by clicking on the brush icon



Without applying any styles the DOM will looks like this

 

Once you apply any style the lass will get added to the parent div of component corresponding to which you can have the required css.
I have applied Dark Background mentioned above and the DOM looks like

 

Hope this helps.

 

3 replies

krishna_sai
Community Advisor
krishna_saiCommunity Advisor
Community Advisor
March 14, 2023

Hi @akashkriz005 When you have CSS written to components already there is no need to have separate clientlibs again to be loaded at experience fragments level.
But if you still want some specific clientlibs to be loaded at experience fragment level you can load them via page policy option at template level.

Hope this helps,

Krishna

    akashkriz005
    akashkriz005Author
    Level 2
    March 14, 2023

    Hi @krishna_sai ,

    I'm using the already available title and list component as it is. But if we pass style for it from the component level reusing the component in some other places will have this style changes as well right since we are using it globally. 

     

    I have given some basic styling for the component using style system also but passing every style through it wont be a good experience to the author right ? So thought of passing a common style for the whole experience fragment.

      krishna_sai
      Community Advisor
      krishna_saiCommunity Advisor
      Community Advisor
      March 14, 2023

      If you want those styles to be applicable to experience fragments you can add them via page policy so that it is applicable to only experience fragments.

       

        arunpatidar
        Community Advisor
        arunpatidarCommunity Advisor
        Community Advisor
        March 14, 2023

        you can provide an id to footer container and use the id selector for parent and the child component targetting.

        Arun Patidar
          Madhur-Madan
          Community Advisor
          Madhur-MadanCommunity AdvisorAccepted solution
          Community Advisor
          March 14, 2023

          Hi @akashkriz005 ,

          You can easily apply different styles to the respective component using the styles tab available under the component's policy at the template level.


          After adding the styles you can apply them directly to the component by clicking on the brush icon



          Without applying any styles the DOM will looks like this

           

          Once you apply any style the lass will get added to the parent div of component corresponding to which you can have the required css.
          I have applied Dark Background mentioned above and the DOM looks like

           

          Hope this helps.

           

            Terms & ConditionsAccessibility statement

            Loading footer...