DocumentationExperience Cloud KCS

Custom CSS not reflected in Preview mode

Last update: August 19, 2026

This article explains how to troubleshoot and resolve issues where custom CSS changes in AEM Guides are not appearing as expected in Preview mode.

Description description

Environment

Adobe Experience Manager (AEM) Guides

Issue/Symptoms

  • Custom CSS applied in AEM Guides doesn’t display correctly in Preview mode.
  • Visual changes such as background color or border styles are expected but not visible when switching to Preview.
  • No error messages are shown, but the expected formatting is missing.

Cause

Custom CSS may not appear in Preview mode if the CSS file path, selector, or syntax is incorrect, or if browser cache prevents the latest styles from loading.

Resolution resolution

To fix the issue, follow these steps:

  1. Ensure the custom CSS file is placed in the correct path, such as /var/dxml/folderprofiles/global-profile/XmlEditorConfigs/css_layout.css.
  2. Confirm that the CSS selectors match the structure of the DITA content and the Preview mode DOM. For example, use .previewbody .testnote for preview-specific styles.
  3. Add or update the CSS rule, then switch to Preview mode in AEM Guides to verify that the style is applied.
  4. Ensure the DITA content uses the correct outputclass attribute that matches the CSS selector (e.g., outputclass="testnote").
  5. Clear the browser cache or use a hard refresh after updating CSS to ensure the latest styles are loaded.
  6. Test the Preview mode in different browsers to rule out browser-specific caching or rendering issues.

After completing these steps, confirm that the custom styles are visible in Preview mode.

recommendation-more-help
experience-cloud-kcs-help-kbarticles