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

[akashkriz005]

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 ? 

[krishna_sai]

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]

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]

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]

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

[Madhur-Madan · Accepted solution]

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.