CSS personalizado no reflejado en el modo de vista previa
En este artículo se explica cómo solucionar y resolver problemas en los que los cambios personalizados de CSS en AEM Guides no aparecen como se espera en el modo de vista previa.
Descripción description
Entorno
Guías de Adobe Experience Manager (AEM)
Problema/Síntomas
- CSS personalizado aplicado en AEM Guides no se muestra correctamente en el modo de vista previa.
- Se esperan cambios visuales como color de fondo o estilos de borde, pero no son visibles al cambiar a Vista previa.
- No se muestra ningún mensaje de error, pero falta el formato esperado.
Causa
Puede que CSS personalizado no aparezca en el modo de vista previa si la ruta, el selector o la sintaxis del archivo CSS son incorrectos o si la caché del explorador impide que se carguen los estilos más recientes.
Resolución resolution
Para solucionar el problema, siga estos pasos:
- Asegúrese de que el archivo CSS personalizado se encuentra en la ruta de acceso correcta, como
/var/dxml/folderprofiles/global-profile/XmlEditorConfigs/css_layout.css. - Confirme que los selectores CSS coinciden con la estructura del contenido DITA y con el modo de vista previa DOM. Por ejemplo, use
.previewbody .testnotepara estilos específicos de vista previa. - Agregue o actualice la regla CSS y, a continuación, cambie al modo de vista previa en AEM Guides para comprobar que el estilo se aplica.
- Asegúrese de que el contenido DITA utiliza el atributo
outputclasscorrecto que coincida con el selector de CSS (por ejemplo,outputclass="testnote"). - Borre la caché del explorador o utilice una actualización después de actualizar CSS para asegurarse de que se cargan los estilos más recientes.
- Pruebe el modo Vista previa en diferentes exploradores para descartar problemas de procesamiento o almacenamiento en caché específicos del explorador.
Después de completar estos pasos, confirme que los estilos personalizados están visibles en el modo de vista previa.
recommendation-more-help
experience-cloud-kcs-help-kbarticles