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

Question

我想覆盖 cq 组件占位符的图标。我在这里找到了图标: http://localhost:4502/libs/cq/ui/widgets/themes/default.css示例: 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 中的占位符图标？

Answer 1

您需要将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 的步骤并覆盖它。