CSS personnalisé

Le CSS personnalisé dans Document360 vous permet d’appliquer votre propre code CSS pour modifier l’apparence visuelle de votre site de base de connaissances au-delà de ce que proposent les paramètres de personnalisation intégrés du site. Vous écrivez les règles CSS directement dans le portail et elles sont appliquées globalement sur l’ensemble de votre site de base de connaissances. C’est l’outil idéal lorsque vous avez besoin d’un contrôle précis sur la typographie, les couleurs, l’espacement, les styles de tableaux, l’alignement des images ou tout autre élément visuel qui ne peut pas être configuré avec les réglages standards.

Quand utiliser un CSS personnalisé

Utilisez un CSS personnalisé lorsque les options de style intégrées dans la personnalisation du site ne vous donnent pas le niveau de contrôle dont vous avez besoin :

• Outrepasser les styles par défaut – modifier l’apparence des éléments qui ne sont pas exposés dans les paramètres Personnaliser le site, comme les couleurs d’appel, les bordures de tableaux ou le bouton « retour en haut ».
• Appliquez une typographie cohérente avec la marque – définissez une famille de polices, une taille ou un poids spécifique pour tous les articles afin de correspondre aux directives de conception de votre produit.
• Corrigez les problèmes de disposition ou d’espacement - ajustez les marges, le rembourrage ou l’alignement pour des éléments spécifiques qui apparaissent différemment de ce qui est prévu.
• Appliquez des traitements visuels aux images - alignez les images au centre dans les articles, ajoutez des ombres ou définissez des dimensions cohérentes pour les illustrations des articles.

Avant que tu commences

• Vous devez avoir un compte d’équipe avec un accès administrateur au portail de la base de connaissances.
• Le CSS personnalisé s’applique globalement à l’ensemble du site de la base de connaissances - les modifications affectent toutes les pages et tous les lecteurs.
• Document360 ne valide pas et ne fait pas de lint votre code CSS, donc les erreurs ne seront pas signalées automatiquement.
• Un CSS mal formé ou conflictuel peut casser la mise en page du site. Testez bien vos modifications avant d’économiser.
  :::

Comment ajouter du CSS personnalisé

1. Naviguez dans () > Knowledge base site dans la barre de navigation de gauche du portail de la base de connaissances.
2. Dans le panneau de navigation de gauche, naviguez vers la personnalisation du site.
3. Cliquez sur CSS & JavaScript personnalisés.
4. Sélectionnez l’onglet CSS . L’éditeur de code CSS apparaît.
5. Saisissez votre code CSS dans la zone de texte.

6. Appuyez sur Ctrl + S ou cliquez sur Enregistrer pour appliquer vos modifications.

Le CSS est désormais appliqué à votre site de base de connaissances. Visitez le site pour prévisualiser les changements.

Comment utiliser des extraits CSS

Les extraits CSS sont des blocs de code préécrits que vous pouvez insérer directement dans l’éditeur CSS. Ils couvrent les tâches de personnalisation les plus courantes et sont conçus pour être adaptés à vos besoins spécifiques.

1. Naviguez dans () > Knowledge base site > Personnalisation du site > CSS & JavaScript personnalisés.
2. Sélectionnez l’onglet CSS .
3. Cliquez sur Ajouter des extraits de code en haut à droite de l’éditeur de code.
4. Dans le panneau des extraits, cliquez sur le fragment désiré. Le code est inséré dans l’éditeur CSS.

5. Modifier le code inséré selon les besoins – par exemple, remplacer le nom de la police, le code couleur ou la valeur de la taille.
6. Appuyez sur Ctrl + S ou cliquez sur Enregistrer.

Pour des guides détaillés de chaque extrait, voir extraits CSS.

Meilleures pratiques

• Utilisez les extraits pré-construits comme point de départ – même si vous devez personnaliser beaucoup, partir d’un extrait garantit les bons sélecteurs et la bonne structure pour le HTML de Document360.
• Utilisez des sélectionneurs spécifiques – évitez les sélecteurs larges, comme body ou * sauf si c’est intentionnel. Des sélecteurs spécifiques réduisent le risque de passer involontairement outre d’autres styles.
• Commentez votre code – ajoutez des commentaires pour expliquer ce que fait chaque bloc, surtout si plusieurs membres de l’équipe gèrent le CSS. Exemple : /* Centers all article images — added June 2026 */
• Testez en mode clair et sombre - les styles qui semblent corrects en mode clair peuvent avoir des problèmes de contraste ou de visibilité en mode sombre. Prévisualisez toujours les deux avant de sauvegarder.
• Gardez une sauvegarde – avant d’apporter des modifications importantes, copiez le CSS actuel dans un fichier texte. Document360 ne conserve pas d’historique de versions des modifications CSS personnalisées.

FAQ