Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

customize edit toolbar icons

Avatar

Level 3

I want to perform following actions in the Edit Toolbar:

1. Place Inplace editing (Edit- pencil icon) at the end of the toolbar

2. Change the Pencil icon to a image icon

How do I achieve this? Thanks in advance

(using AEM as a cloud service)

Dolly_1-1678990878120.png

 

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hello @Dolly 

 

  • To change the icon for the Inplace Editing action, you'll need to create a custom client library and override the default CSS.

 

  • Make sure that you have the custom image available as part of the resources of the custom client library and then you can use the below CSS code : .cq-editrollover-bar .cq-editrollover-edit {
    background-image: url(/apps/myproject/clientlibs/images/my-image.png);

 

  • Next, In the categories property of the custom client library folder, add the value cq.authoring.editor. This ensures that your client library is included when editing content.

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

Hello @Dolly 

 

  • To change the icon for the Inplace Editing action, you'll need to create a custom client library and override the default CSS.

 

  • Make sure that you have the custom image available as part of the resources of the custom client library and then you can use the below CSS code : .cq-editrollover-bar .cq-editrollover-edit {
    background-image: url(/apps/myproject/clientlibs/images/my-image.png);

 

  • Next, In the categories property of the custom client library folder, add the value cq.authoring.editor. This ensures that your client library is included when editing content.