How to custom class in <main> element of the page | Adobe Higher Education
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 respuestas
  • 1519 visualizaciones

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 respuestas

S
SahilDh1Autor
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
      SahilDh1Autor
      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
        SahilDh1Autor
        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
            SahilDh1Autor
            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


             

             

            A
            Anil_Chennapragada
            Level 4
            November 27, 2024

            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

             

              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
              Términos y condicionesAccessibility statement

              Loading footer...