Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

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

Avatar

Level 3

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 ? 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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.


madhurmadan2296_2-1678826223569.png

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

madhurmadan2296_3-1678826346768.png



Without applying any styles the DOM will looks like this

madhurmadan2296_4-1678826463535.png

 

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

madhurmadan2296_5-1678826567642.png

 

Hope this helps.

 

View solution in original post

5 Replies

Avatar

Community Advisor

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

Avatar

Level 3

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.

Avatar

Community Advisor

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.

krishna_sai_0-1678791780706.png

 

Avatar

Community Advisor

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



Arun Patidar

Avatar

Correct answer by
Community Advisor

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.


madhurmadan2296_2-1678826223569.png

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

madhurmadan2296_3-1678826346768.png



Without applying any styles the DOM will looks like this

madhurmadan2296_4-1678826463535.png

 

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

madhurmadan2296_5-1678826567642.png

 

Hope this helps.