AEM Forms 6.3 - guidetheme2 css being included | Community
Skip to main content
James_R_Green
James_R_Green
Level 6
October 31, 2018
Solved

AEM Forms 6.3 - guidetheme2 css being included

  • October 31, 2018
  • 10 replies
  • 5491 views

Hi,

I want to remove all default css from my forms as it is clashing with the CSS for the project.

I can see a CSS file I want to stop being included in the following in the HTML:

I matched this up to the JSP file in the guidecontainer via  /libs/fd/af/components/guideContainer/guideContainer.jsp

This calls /libs/fd/af/components/guideContainer/includeTheme.jsp which does the following:

        String themeOverride = request.getParameter(GuideThemeConstants.PARAMETER_THEME_OVERRIDE);
        if(StringUtils.isBlank(themeOverride)){
            themeOverride = (String) request.getAttribute(GuideThemeConstants.PARAMETER_THEME_OVERRIDE);
        }
        else{
            //We are appending "jcr:content" because 'themeOverride' parameter gives path to theme resource and not it's content resource
            themeOverride += GuideThemeConstants.RELATIVE_PATH_JCR_CONTENT;
        }
        String pageFallbackClientlib = (String) request.getAttribute(GuideConstants.PAGE_FALLBACK_CLIENTLIB_CATEGORY);
        ThemeClientLibData clientLibData = GuideThemeUtils.getClientLibNames(resource, themeOverride, pageFallbackClientlib);
        if(clientLibData.getCommonClientLib() != null) {%>
            <cq:includeClientLib  css="<%=clientLibData.getCommonClientLib()%>"/>
        <%} %>

Outputting the variables involved into the html for debugging I can see that the following:

themeOverride =  /content/dam/formsanddocuments-themes/<MY_THEME>/jcr:content

pageFallbackClientlib = guide.theme2.default

clientLibData.getCommonClientLib() = guide.theme2.common

Here is where I am stuck....given the parameters being passed to clientLibData.getCommonClientLib()  would we expect guide.theme2.common.

  • Can I prevent guide.theme2.common being included without overlaying the guideContainer?
  • I would be interested to know what clientLibData.getCommonClientLib()  does - but don't have the source.

Can anyone help?

Thanks,

Jim

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 Lee__A

FYI, I created a client library with the reset css that was applied to the form and it looked like it did a decent reset on all the objects in the form. Note that if you will need to apply this on and off in crx though as the touch ui editor won't work after this is applied so add it at runtime or edit your template to only add the CSS at runtime.

GitHub - jtrost/Complete-CSS-Reset: This CSS file resets all styles for every HTML tag.

10 replies

Mayank_Gandhi
Adobe Employee
Mayank_GandhiAdobe Employee
Adobe Employee
October 31, 2018

Hi James,

Is your form currently associated with any Theme?

James_R_Green
James_R_GreenAuthor
Level 6
October 31, 2018

Hi Mayank,

Yes the form also references a "blank" theme I created and edited outside of aem(yes I know its hacky but this is a test) in an atrempt to remove all ootb css overrides applied.

Happy to change approach, my goal is to remove all of the ootb styling  as it clashed with the css we are using. Feel free to restart the thought process. How would you achieve this?

James_R_Green
James_R_GreenAuthor
Level 6
November 1, 2018

Mayank Gandhi​

I removed the reference to the theme from both the form and the aem form component. I thought that this resolved the issue, but unfortunately the following 2 css files are still included ...

/etc/clientlibs/fd/af/guidetheme2/default.css

/etc/clientlibs/fd/af/guidetheme2/common.css

Can you tell me how to create a form with none of the OOTB styling?

Thanks,

Jim

James_R_Green
James_R_GreenAuthor
Level 6
November 2, 2018

Hi,

I have a workaround but I don't particularly like it.

Once the document is ready, I use JQuery to remove the stylesheets:

/etc/clientlibs/fd/af/guidetheme2/default.css

/etc/clientlibs/fd/af/guidetheme2/common.css

Urgh!

Mayank Gandhi​ smacdonald2008​

Would be great if it was possible in future versions of AEM Forms to remove the default styling altogether. Although good for demo purposes, for production code where client's have exact expectations of style, the default css only gets in the way. Can someone query this with the dev team and see if it can be put in as a feature please?

Thanks.

Jim

Mayank_Gandhi
Adobe Employee
Mayank_GandhiAdobe Employee
Adobe Employee
November 2, 2018

Jquery has always been a good friend to me as well when it come to solving DOM problems.

I can check internally for the second part of the question, Please expect something by early next week.

Thanks,

mayank

    smacdonald2008
    smacdonald2008
    Level 10
    November 2, 2018

    thank you!

    James_R_Green
    James_R_GreenAuthor
    Level 6
    November 7, 2018

    Hey Mayank Gandhi​ - Did the development team get back to you on this?

    L
    Adobe Employee
    Lee__AAdobe Employee
    Adobe Employee
    November 22, 2018

    I'd probably approach this with a 'browser reset' type of approach where you have an intermediary reset that is applied to your form CSS prior to your css being added. Much like the browser resets that are out here but adapted to your forms.

    What's the framework that you're using for your site pages that you'd like to have the forms adapt to?

    L
    Adobe Employee
    Lee__AAdobe EmployeeAccepted solution
    Adobe Employee
    November 22, 2018

    FYI, I created a client library with the reset css that was applied to the form and it looked like it did a decent reset on all the objects in the form. Note that if you will need to apply this on and off in crx though as the touch ui editor won't work after this is applied so add it at runtime or edit your template to only add the CSS at runtime.

    GitHub - jtrost/Complete-CSS-Reset: This CSS file resets all styles for every HTML tag.

    U
    umair8621
    March 15, 2023

    This issue persists in AEM 6.5 as well. I don't think using a CSS reset is an option if we select the 'Form covers entire width of the page' option. In this case, the form will not be embedded in an iframe but rather will be a div element. I believe that both the OOB default and common CSS files should use the BEM methodology to avoid any conflicts with other components used on an AEM website.

     

    James_R_Green
    James_R_GreenAuthor
    Level 6
    November 22, 2018

    Nice.

    If this does what it says then this also fixes another issue that I have:

    When my form is embedded on a site page the css from the rest of the site is clashing with my form styles.

    Applying this reset on my form would potentially solve that issue too.

    Thanks for sharing lesutton1​ I will test it out and update the answer if it works as expected.

    Terms & ConditionsAccessibility statement

    Loading footer...