How to custom class in <main> element of the page | Community
Skip to main content
S
SahilDh1
Level 2
November 27, 2024

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

  • November 27, 2024
  • 5 replies
  • 1519 views

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?

5 replies

S
SahilDh1Author
Level 2
November 27, 2024

 

    PRATHYUSHA_VP
    Community Advisor
    PRATHYUSHA_VPCommunity Advisor
    Community Advisor
    November 27, 2024

    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/src/main/webpack/static/index.html

     

    Hope this helps

     

    Thanks

      S
      SahilDh1Author
      Level 2
      November 27, 2024

      Hi @prathyusha_vp 

      I tried this, but not working for me.

      arunpatidar
      Community Advisor
      arunpatidarCommunity Advisor
      Community Advisor
      November 27, 2024

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

       

      Arun Patidar
        S
        SahilDh1Author
        Level 2
        November 27, 2024

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

          narendiran_ravi
          narendiran_ravi
          Level 6
          November 27, 2024

          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

           

            S
            SahilDh1Author
            Level 2
            November 27, 2024

            @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


             

             

            narendiran_ravi
            narendiran_ravi
            Level 6
            November 27, 2024
            • 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/wcm/components/container/v1/container/simple.html 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 
              kautuk_sahni
              Community Manager
              kautuk_sahniCommunity Manager
              Community Manager
              December 16, 2024

              @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!

              Kautuk Sahni
              Terms & ConditionsAccessibility statement

              Loading footer...