How to change the main/root div css class in AEM pages | Community
Skip to main content
T
TheAfro
Level 2
September 9, 2021
Solved

How to change the main/root div css class in AEM pages

  • September 9, 2021
  • 4 replies
  • 7516 views

Hi, this is to ask for a solution on how to gai access to css classe for the main/ root div of a page in AEM.

I'm working with archetype 23.

archetype.properties:
 

 

archetypeVersion=23 frontendModule=general aemVersion=6.5.3

 

The problem is that AEM OOTB adds a container class to the root div element:

In another project, created using different archetype this was not the case:

 

I tried many places and I can't seam to find the answer.

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by TheAfro

Thank you for all your replies. @rajeevduggal @kishore_kumar_ @asutosh_jena_ @albinis1 

 

We decided to add css styling to ".container.responsivegrid" (elements with both calsses). No padding and min-width: 100% in this file: ui.apps\src\main\content\jcr_root\apps\our-app\clientlibs\clientlib-grid\less\grid.less

 

We considered other possibilities presented here and this seamed as the fastest and easiest to get the job done.

As of now it works fine.

4 replies

Asutosh_Jena_
Community Advisor
Asutosh_Jena_Community Advisor
Community Advisor
September 9, 2021

Hi @theafro 

 

You cannot add any class to the wrapper div of the component i.e., here the "root responsivegrid" refers to the layout container so you cannot add any class at the same level. But if you want to add any class at the parent i.e., at the body level you can do it by overlaying the page.html located at /apps/core/wcm/components/page/v2/page/page.html

 

As you can see below I have 2 classes added at the body level as well as the container level.

 

page.html

body.html

 

Thanks!

    T
    TheAfroAuthor
    Level 2
    September 10, 2021

    @asutosh_jena_and @albinis1 Thank You for your replys.

    I was not clear. I need to remove the container class as it collides with the CSS that I'm implementing.

    So both propositions don't solve my problem. 

     

      Asutosh_Jena_
      Community Advisor
      Asutosh_Jena_Community Advisor
      Community Advisor
      September 10, 2021

      Hi @theafro 

       

      If you want to remove the container class then it's pretty simple. As you can see in the above screenshot for body.html we have the container class. Removing this class from HTML will remove the container class from all the page.

       

      Having said please remember, if you are using any component named as "container", and when the component will be rendered on the page, a wrapper div with the component name will be added which will be "container" in this case and it cannot be removed. So the workarround for that will be to rename the component with some other name than "container".

       

      Let me know if you have any questions.

       

      Thanks!

        A
        Community Advisor
        AlbinIs1Community Advisor
        Community Advisor
        September 9, 2021

        You may not be able to modify the default claasess added OOBTB but try adding the custom class names through policy style tab if that helps - not sure if this will be added into the same element or on the wrapped element

         

         

        Regards

        Albin I

        www.albinsblog.com

         

         

          Kishore_Kumar_
          Kishore_Kumar_
          Level 9
          September 12, 2021

          Hi @theafro ,

           

          If you check the root node in structure mode of Editable Templates, earlier the responsivegrid (wcm/foundation/components/responsivegrid) was directly used. So you didn't get container class and you would have got "root responsivegrid" class in your root div.

           

           

          But later container component was introduced in core components which extends responsivegrid. This component now is being used. So the class name is "root container responsivegrid". 

           

           

          And if you want to change only the root container div I don't think it is possible. Only it can be done through some custom JS I believe.

           

          But if you want to change the class name wherever this component is used. it is possible with cq:htmlTag.

           

          Create a cq:htmlTag to the Container component and add class to it.

           

           

           

           

           

            RajeevDuggal
            RajeevDuggal
            Level 2
            September 13, 2021

            This certainly worked in our case. Thanks 

              T
              TheAfroAuthorAccepted solution
              Level 2
              September 14, 2021

              Thank you for all your replies. @rajeevduggal @kishore_kumar_ @asutosh_jena_ @albinis1 

               

              We decided to add css styling to ".container.responsivegrid" (elements with both calsses). No padding and min-width: 100% in this file: ui.apps\src\main\content\jcr_root\apps\our-app\clientlibs\clientlib-grid\less\grid.less

               

              We considered other possibilities presented here and this seamed as the fastest and easiest to get the job done.

              As of now it works fine.

                Terms & ConditionsAccessibility statement

                Loading footer...