自定义CSS未反映在预览模式下
本文介绍如何排除和解决AEM Guides中的自定义CSS更改在“预览”模式下无法按预期显示的问题。
描述 description
环境
Adobe Experience Manager (AEM)指南
问题/症状
- 在AEM Guides中应用的自定义CSS在预览模式下无法正确显示。
- 在切换到“预览”时，背景颜色或边框样式等视觉更改是预期的，但不可见。
- 未显示错误消息，但缺少预期的格式。
原因
如果CSS文件路径、选择器或语法不正确，或者浏览器缓存阻止加载最新样式，则自定义CSS可能不会在预览模式下显示。
解决方法 resolution
要解决此问题，请执行以下步骤：
- 确保将自定义CSS文件放置在正确的路径中，如
/var/dxml/folderprofiles/global-profile/XmlEditorConfigs/css_layout.css。 - 确认CSS选择器与DITA内容和预览模式DOM的结构匹配。 例如，将
.previewbody .testnote用于预览特定的样式。 - 添加或更新CSS规则，然后在AEM Guides中切换到预览模式以验证样式是否已应用。
- 确保DITA内容使用与CSS选择器匹配的正确
outputclass属性（例如outputclass="testnote"）。 - 清除浏览器缓存或在更新CSS后使用硬刷新以确保加载最新样式。
- 在不同浏览器中测试预览模式，以排除特定于浏览器的缓存或渲染问题。
完成这些步骤后，确认自定义样式在“预览”模式下可见。
recommendation-more-help
experience-cloud-kcs-help-kbarticles