Adobe Experience Manager Sites & More

massimo_amadei · 10/15/15

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

Daniel_Gordon · 10/15/15

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 }

View solution in original post

ramyar64794761 · 10/15/15

Hi,

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

massimo_amadei · 10/15/15

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 · 10/15/15

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 }

ramyar64794761 · 10/15/15

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!

massimo_amadei · 10/15/15

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