How to custom class in <main> element of the page

[SahilDh1]

I'm trying to add custom class in the <main> element of the page. I tried to search the <main> element location in the crx/de, but could not find it. Can someone help me finding where to locate this file and made changes?

[SahilDh1]

[PRATHYUSHA_VP]

Hi @SahilDh1 

If you're using latest archetype version, below is the structure where you can find <main> section in index.html

https://github.com/adobe/aem-project-archetype/blob/develop/src/main/archetype/ui.frontend.general/s...

Hope this helps

Thanks

[SahilDh1]

Hi @PRATHYUSHA_VP 

I tried this, but not working for me.

[arunpatidar]

Hi @SahilDh1 
Please check your page component. The HTML tags are derived from there, example head, body etc.

[SahilDh1]

@arunpatidar Yes I found the body, head elements but not able to locate the <main> element to add the custom class. 

[narendiran_ravi]

From the HTML image you have shared, it appears that the element is loading from your container component added in the editable template.

• Open your template in structure mode and edit the container.
• You will see the main option selected in the "Default element" dropdown field.
• Check the respective template in your codebase:

main/content/jcr_root/conf/yourproject/settings/wcm/templates

1. Add new classes:
   • To introduce new styles, you can add style system classes for the container in its policy

[SahilDh1]

@narendiran_ravi Yes you are correct the element is loading from the container component. But my requirement is to add a custom page property(classname) different for every page to be added in the <main> element as a class. I still didn't found the <main> element location and how to add this page property in it.
Thanks

[Anil_Chennapragada]

hi @SahilDh1 ,

If its loading from the container component and the requirement is to add custom classes. I think you can add the styles and select it based on the page type at template level

[narendiran_ravi]

• Actually, I got it mixed up with my custom implementation. In your case, it is coming from container policies, not from its component dialog as I mentioned previously.
• Both the class and HTML default element are applied from the style system. This is handled by the OOB style system to add a wrapper element and class around the component.
• You cannot add the class dynamically for each page here.

Recommendation:

• Override the core container component in your project.
• Add a default element in the dialog of the container, similar to the one present in policies.
• Use the sling model delegation pattern to inject this property into the model.
• Add the logic in this model to fetch the page properties and derive the class that is needed.
• Also, update the simple.html file:https://github.com/adobe/aem-core-wcm-components/blob/main/content/src/content/jcr_root/apps/core/wc... in line number 23 - data-sly-element="${container.defaultElement}"
• Also, ⁠in line number 20 you can add the class you newly added to the model.
  class="cmp-container${wcmmode.edit ? ' {0}': '' @ format=[allowed.cssClass]}"
• The main div will be present one level below the component wrapper div 

[arunpatidar]

Hi,

you can write a sling filter if wants to just add additional class to a component(e.g. container) based on condition

Example - 

https://github.com/arunpatidar02/aemaacs-aemlab/blob/master/core/src/main/java/com/community/aemlab/... 

here is the simplified version of above example : https://github.com/arunpatidar02/aem63app-repo/blob/master/java/XFFilter.java 

[kautuk_sahni]

@SahilDh1 Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!