如何覆盖 AEM 6 中的占位符图标？

how to override the placeholder icons în AEM 6?

我想覆盖 icons of the cq component placeholders。我在这里找到了图标： http://localhost:4502/libs/cq/ui/widgets/themes/default.css example: Image Component 的占位符图标在此处定义

.cq-image-placeholder {
    background: url("default/placeholders/img.png") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);
}

现在我想用 myImg.png 覆盖 img.png。我已经扩展了图像组件的 css 文件 content\src\main\content\jcr_root\apps\myProject\components\content\image\clientlibs\image.css 如下：

.cq-image-placeholder {
    background: url("myImg.png") !important;
}

但没有任何变化。

如何覆盖 http://localhost:4502/libs/cq/ui/widgets/themes/default.css 中的占位符图标？

您需要将 css 文件继承到您的项目中，然后覆盖更改。你不应该覆盖 libs 文件夹。

您可以按照以下步骤实现自定义图标。

  1. 在应用程序中创建一个 cq 文件夹。
  2. 创建文件夹结构/apps/cq/ui/widgets/themes

注意：检查 /libs/cq/ui/widgets 文件夹中的任何额外属性。如果您在此处找到任何属性，请也将它们添加到这些 /apps/cq/ui/widgets 文件夹中。

  1. 复制default.css到/apps/cq/ui/widgets

  2. 在此处编辑您的 css 文件。

如果您想要更改图标图像，您还可以针对该特定图像执行从 1 到 4 的步骤并覆盖它。