what is the recommended way to override aem ootb stylesheet?

Avatar

Avatar

kiranv40650953

Avatar

kiranv40650953

kiranv40650953

18-07-2019

I have override /libs/cq/gui/components/authoring/editors/clientlibs/core/css/overlay.less to apps/cq/gui/components/authoring/editors/clientlibs/core/css/overlay.less. and i have change changed background color like below.

/* placeholder */

.cq-Overlay--placeholder {

    color: rgba(0,0,0,.3);

    border-color:  rgba(0,0,0,.3);

  /* background-color: rgba(255,255,255,.05);*/

     background-color: rgba(255,255,255,.25);

    border-style: solid;

    border-width: 0.125rem;

    margin: -0.125rem;

}

Still i am getting old values. what is the recommended way to override aem ootb stylesheet?

Thanks,

Kiran

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

kiranv40650953

Avatar

kiranv40650953

kiranv40650953

29-07-2019

It is working fine. I have override the /libs/cq/gui/components/authoring/editors/clientlibs/core/css/overlay.less into apps and declared in css.txt. After that it is working fine. Previously i have not added css.txt.

1802027_pastedImage_0.png

Thanks for your help.

Answers (7)

Answers (7)

Avatar

Avatar

vivekanand-mishra

Employee

Avatar

vivekanand-mishra

Employee

vivekanand-mishra
Employee

14-10-2019

kiranv43511543​ Overlaying of OOTB should be avoided to reduce tech debt to AEM upgrades . Recommended way is to create a separate client lib with just one css as mentioned by arunpatidar26​. Just make sure, the client lib category is same as of the OOTB client lib which you want to change. As long as you follow it, it will work for you. For this case, the correct category is - cq.authoring.editor.core, cq.authoring.editor

Avatar

Avatar

vivekanand-mishra

Employee

Avatar

vivekanand-mishra

Employee

vivekanand-mishra
Employee

14-10-2019

Agreed with Arun. Instead of overlaying file, creating a custom clientlib is cleaner approach. That way you would be upgrade safe.

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

3.0K

Likes

1.1K

Correct Reply

840

Avatar

Arun_Patidar

MVP

Total Posts

3.0K

Likes

1.1K

Correct Reply

840
Arun_Patidar
MVP

19-07-2019

I think we cannot overlay clientlibs in aem,  all clientlibs which has same category will be loaded.

If you just want to change a single style then create a new clientlibs with category cq.authoring.dialog and add css rule for background

/* placeholder */

.cq-Overlay .cq-Overlay--placeholder {

     background-color: rgba(255,255,255,.25);

  }

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

3.0K

Likes

1.1K

Correct Reply

840

Avatar

Arun_Patidar

MVP

Total Posts

3.0K

Likes

1.1K

Correct Reply

840
Arun_Patidar
MVP

22-07-2019

I am trying in 6.3, works for me.

It could be caching issue, could you please clear browser cache or try in incognito mode.

If doesn't work try with

?debugClientLibs=true

Avatar

Avatar

kiranv40650953

Avatar

kiranv40650953

kiranv40650953

21-07-2019

Hi Arun,

Thank you for looking into this issue. I am checking at page edit. If you need any further information let me know?

Thanks,

Kiran

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

3.0K

Likes

1.1K

Correct Reply

840

Avatar

Arun_Patidar

MVP

Total Posts

3.0K

Likes

1.1K

Correct Reply

840
Arun_Patidar
MVP

19-07-2019

could you please let me know which page you are checking?Is it site console or editing page?

I am checking page edit

Screenshot 2019-07-19 at 5.21.04 PM.png

Avatar

Avatar

kiranv40650953

Avatar

kiranv40650953

kiranv40650953

19-07-2019

Hi Arun,

I have created a new clientlibs, under that created new less file and add the above code.

cq.authoring.dialog i have added as dependency in my clientlibs, but still it is loading from libs.

1794985_pastedImage_0.png

Please let me know  how to resolve this issue.

Thanks,

Kiran