CSS personalizado não refletido no modo de Visualização

Este artigo explica como solucionar problemas em que as alterações de CSS personalizadas no AEM Guides não aparecem conforme esperado no modo de Visualização.

Descrição description

Ambiente

Guias do Adobe Experience Manager (AEM)

Problema/Sintomas

  • O CSS personalizado aplicado no AEM Guides não é exibido corretamente no modo de Visualização.
  • Alterações visuais, como cor de fundo ou estilos de borda, são esperadas, mas não ficam visíveis ao alternar para Visualização.
  • Nenhuma mensagem de erro é exibida, mas a formatação esperada está ausente.

Causa

O CSS personalizado pode não aparecer no modo de Visualização se o caminho, o seletor ou a sintaxe do arquivo CSS estiver incorreto, ou se o cache do navegador impedir o carregamento dos estilos mais recentes.

Resolução resolution

Para corrigir o problema, siga estas etapas:

  1. Verifique se o arquivo CSS personalizado está colocado no caminho correto, como /var/dxml/folderprofiles/global-profile/XmlEditorConfigs/css_layout.css.
  2. Confirme se os seletores de CSS correspondem à estrutura do conteúdo DITA e ao DOM do modo de Visualização. Por exemplo, use .previewbody .testnote para estilos específicos de visualização.
  3. Adicione ou atualize a regra CSS e alterne para o modo de Visualização no AEM Guides para verificar se o estilo foi aplicado.
  4. Verifique se o conteúdo DITA usa o atributo outputclass correto que corresponda ao seletor de CSS (por exemplo, outputclass="testnote").
  5. Limpe o cache do navegador ou use uma atualização permanente após atualizar o CSS para garantir que os estilos mais recentes sejam carregados.
  6. Teste o modo de Visualização em navegadores diferentes para descartar problemas de cache ou renderização específicos do navegador.

Após concluir essas etapas, confirme se os estilos personalizados estão visíveis no modo de Visualização.

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