CQ5 template CSS conflict with admin interface CSS in edit mode. How to solve it? | Community
Skip to main content
M
massimo_amadei
October 16, 2015
Solved

CQ5 template CSS conflict with admin interface CSS in edit mode. How to solve it?

  • October 16, 2015
  • 5 replies
  • 1367 views

Hello everyone, like in object I have this problem in CQ5 edit mode, when the template of the website have a custom CSS.

If in this css for example i write:

input{height:100px}

there is the problem that the effect of the CSS go for the Edit Interface also. So the input fields of the Admin change also.

How could solve the problem? Thank you

    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 Daniel_Gordon

    input{height:100px}  by definition this style will get applied to all input elements on the page. Instead you should add an additional class to ensure the style is only applied to the elements of the website (and not applied to CQ dialogs). For example say the main content region of the website is a div with a class called main-content. Change the css rule to something like: .main-content input{height:100px}

    In addition you can always include libraries that are only used on the author environment like so:

    <%@page import="com.day.cq.wcm.api.WCMMode" %> ... WCMMode mode = WCMMode.fromRequest(request); if (mode.equals(WCMMode.EDIT) || mode.equals(WCMMode.DESIGN)) { //include author-only libraries here }

    5 replies

    R
    Adobe Employee
    ramyareddygAdobe Employee
    Adobe Employee
    October 16, 2015

    Hi,

    Which CQ version are you using? Also, are these custom styles placed in any clientlibs folder?

    M
    massimo_amadeiAuthor
    October 16, 2015

    Hello!

    Version is 5.6.1!

    The tree is like the image that I attach to this post

    Like you see in Common there is the CSS that make the problem.

    In Author there is a css that for the moment i'm using for fix the problem to rewrite the CSS of common with the id #CQ like:

    #CQ input{...}

    but is a critical solution that is not so good, because could born new problems in future templates

    Daniel_Gordon
    Adobe Employee
    Daniel_GordonAdobe EmployeeAccepted solution
    Adobe Employee
    October 16, 2015

    input{height:100px}  by definition this style will get applied to all input elements on the page. Instead you should add an additional class to ensure the style is only applied to the elements of the website (and not applied to CQ dialogs). For example say the main content region of the website is a div with a class called main-content. Change the css rule to something like: .main-content input{height:100px}

    In addition you can always include libraries that are only used on the author environment like so:

    <%@page import="com.day.cq.wcm.api.WCMMode" %> ... WCMMode mode = WCMMode.fromRequest(request); if (mode.equals(WCMMode.EDIT) || mode.equals(WCMMode.DESIGN)) { //include author-only libraries here }
    R
    Adobe Employee
    ramyareddygAdobe Employee
    Adobe Employee
    October 16, 2015

    What is the categories value given to this clientlibs? Ideally, the styles of your custom clientlibs would be applied only to the sites/pages which use this clientlibs(not your admin screens).

    Not sure why this is happening, but you could append these css styles with some custom id/class specific to your template(which uses this clientlibs) and this would solve your problem!

      M
      massimo_amadeiAuthor
      October 16, 2015

      Yes...just the problem is to use a custome ID each time for each template that someone make. It's not so agile. But yes is the first solution that could come in mind.

      Ideal is if this operation could be automatic from the CMS that understand that the CSS is for the pages template and not for the editor.

      I believe that maybe there is yet something for that but maybe I don't understand

      Terms & ConditionsAccessibility statement

      Loading footer...