Le CSS personnalisé n’est pas reflété dans le mode Aperçu
Cet article explique comment dépanner et résoudre les problèmes où les modifications CSS personnalisées dans AEM Guides n’apparaissent pas comme prévu en mode Aperçu.
Description description
Environnement
Guides de Adobe Experience Manager (AEM)
Problème/Symptômes
- Le CSS personnalisé appliqué dans AEM Guides ne s’affiche pas correctement en mode Aperçu.
- Des modifications visuelles telles que la couleur d’arrière-plan ou les styles de bordure sont attendues, mais non visibles lors du passage à l’aperçu.
- Aucun message d’erreur ne s’affiche, mais la mise en forme attendue est manquante.
Cause
Le CSS personnalisé peut ne pas apparaître en mode Aperçu si le chemin d’accès au fichier CSS, le sélecteur ou la syntaxe est incorrect, ou si le cache du navigateur empêche le chargement des derniers styles.
Résolution resolution
Pour résoudre le problème, procédez comme suit :
- Assurez-vous que le fichier CSS personnalisé est placé dans le bon chemin, par exemple
/var/dxml/folderprofiles/global-profile/XmlEditorConfigs/css_layout.css. - Vérifiez que les sélecteurs CSS correspondent à la structure du contenu DITA et du DOM du mode de prévisualisation. Par exemple, utilisez
.previewbody .testnotepour les styles spécifiques à l’aperçu. - Ajoutez ou mettez à jour la règle CSS, puis passez en mode Aperçu dans AEM Guides pour vérifier que le style est appliqué.
- Assurez-vous que le contenu DITA utilise l’attribut
outputclasscorrect correspondant au sélecteur CSS (par exemple,outputclass="testnote"). - Effacez la mémoire cache du navigateur ou effectuez une actualisation complète après la mise à jour de CSS pour vous assurer que les derniers styles sont chargés.
- Testez le mode Aperçu dans différents navigateurs pour exclure les problèmes de mise en cache ou de rendu spécifiques au navigateur.
Après avoir suivi ces étapes, vérifiez que les styles personnalisés sont visibles en mode Aperçu .
recommendation-more-help
experience-cloud-kcs-help-kbarticles