Highlighted

Changing default folder icons in assets.html

Lavanya_Malyala

04-01-2019

Hi,

Can anyone one point out to any reference or let me know how the default dam folder icons can be replaced? I know that following are the list of icons that are available. But how can I change default folder icon to the icon of my choice? Any help is really appreciated!

https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/coral-ui/c...

Thanks,

Lavanya Malyala

Replies

Highlighted

edubey

04-01-2019

I am bit unclear on which specific icon you are trying to replace. Is it this one?

If not, can you add a screenshot?

1660254_pastedImage_0.png

Highlighted

Lavanya_Malyala

04-01-2019

Hi,

Please find the below image. I've highlighted the folder icon that I'm talking about.

dam.png

FYI: I'm currently working on AEM 6.3 version. Please let me know if you've any idea on how to achieve my use-case.

Thanks,

Lavanya Malyala

Highlighted

Ravi_Pampana

MVP

04-01-2019

Folder icon is coming from /libs/clientlibs/granite/coralui3/css/coral.css to overwrite we need to overwrite the file in apps folder and update the css to have custom icon.

The above will have impact while upgrading to new versions of AEM.

So we can add a css file and update the styles and add the css file with below category

categories

String[]

coralui3

Screen Shot 2019-01-04 at 10.34.58 AM.png

Which will add new css file to coralui3 so that there wont be much affect while upgrading to new versions of AEM and only effect the styles added.

Note: I checked in AEM 6.4 the files path or category might be different in AEM 6.3 but the procedure will be the same

Highlighted

Lavanya_Malyala

06-01-2019

Hi Ravi,

Thanks for the quick reply! I was looking for the file from which icon="folder" is getting applied, so that I can overlay the same file and modify the folder icon as per my requirement. However, after little bit of more research I could find the file I was looking for. Here is the file path:

/libs/dam/gui/coral/components/admin/contentrenderer/column/directory/directory.jsp

Thanks,

Lavanya Malyala

Highlighted

Ravi_Pampana

MVP

07-01-2019

HI Lavanya,

I see directory.jsp in both AEM 6.2 and AEM 6.4

Screen Shot 2019-01-07 at 8.15.49 AM.png

For testing I changed css file "/libs/clientlibs/granite/coralui3/css/all.css" from

.coral3-Icon--folder:before {

  content: "\f231";

}

to

.coral3-Icon--folder:before {

     background-image: url(/crx/de/icons/16x16/folder_closed.png);

}

and able to see the new folder image

Screen Shot 2019-01-07 at 8.24.11 AM.png

It needs additional css changes as per your requirement

Hope it helps..