Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Changing default folder icons in assets.html

Lavanya_Malyala
Level 3
Level 3

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

5 Replies
edubey
Level 10
Level 10

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

Lavanya_Malyala
Level 3
Level 3

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

Ravi_Pampana
Community Advisor
Community Advisor

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

Lavanya_Malyala
Level 3
Level 3

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

Ravi_Pampana
Community Advisor
Community Advisor

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..