사용자 지정 CSS가 미리 보기 모드에 반영되지 않음

이 문서에서는 AEM Guides의 사용자 지정 CSS 변경 내용이 미리 보기 모드에서 예상대로 표시되지 않는 문제를 해결하고 해결하는 방법에 대해 설명합니다.

설명 description

환경

Adobe Experience Manager(AEM) 안내서

문제/증상

  • AEM Guides에 적용된 사용자 지정 CSS가 미리 보기 모드에서 올바르게 표시되지 않습니다.
  • [미리 보기]로 전환할 때는 배경색이나 테두리 스타일과 같은 시각적 변경 내용이 예상되지만 표시되지 않습니다.
  • 오류 메시지는 표시되지 않지만 예상 서식이 누락되었습니다.

원인

CSS 파일 경로, 선택기 또는 구문이 올바르지 않거나 브라우저 캐시로 인해 최신 스타일이 로드되지 않는 경우 사용자 지정 CSS가 미리 보기 모드에 표시되지 않을 수 있습니다.

해결 방법 resolution

문제를 해결하려면 다음 단계를 수행합니다.

  1. 사용자 지정 CSS 파일이 올바른 경로(예: /var/dxml/folderprofiles/global-profile/XmlEditorConfigs/css_layout.css)에 있는지 확인하십시오.
  2. CSS 선택기가 DITA 콘텐츠 및 미리보기 모드 DOM의 구조와 일치하는지 확인합니다. 예를 들어 미리 보기별 스타일에 .previewbody .testnote을(를) 사용합니다.
  3. CSS 규칙을 추가하거나 업데이트한 다음 AEM Guides의 미리 보기 모드로 전환하여 스타일이 적용되는지 확인합니다.
  4. DITA 콘텐츠가 CSS 선택기(예: outputclass="testnote")와 일치하는 올바른 outputclass 특성을 사용하는지 확인하십시오.
  5. 브라우저 캐시를 지우거나 CSS를 업데이트한 후 하드 새로 고침을 사용하여 최신 스타일이 로드되도록 합니다.
  6. 브라우저별 캐싱 또는 렌더링 문제를 배제하려면 서로 다른 브라우저에서 미리 보기 모드를 테스트하십시오.

이 단계를 완료하고 나면 사용자 정의 스타일이 미리보기 모드에서 표시되는지 확인합니다.

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