créez vos styles avec les CSS snippet - tuto obsidian

Obsidian peut être personnalisé finement sans toucher au thème grâce à des “CSS snippets” : un petit fichier CSS permet de modifier un élément précis de l’interface (par exemple le titre en ligne “In Line Title”) et d’obtenir un rendu plus lisible ou plus distinctif. L’idée centrale consiste à repérer la classe CSS de l’élément à transformer, puis à surcharger uniquement ce style via un snippet placé dans le dossier dédié, afin de conserver le reste du thème intact.

Le tutoriel commence par un cas concret : dans Obsidian, le nom d’une note apparaît à la fois dans le titre de la note (niveau 1) et dans l’onglet. L’auteur explique que ce comportement dépend d’un réglage d’apparence (“afficher le titre”), et que certains préfèrent éviter des identifiants techniques (comme des dates) en remplaçant l’affichage par un format plus “humain”. Pour illustrer, il propose de créer un snippet CSS qui modifie uniquement le titre en ligne.

Pour trouver exactement quoi modifier, il active les “Developer Tools” (comme dans Chrome) et inspecte la page HTML sous-jacente. En naviguant dans les nœuds, il localise l’élément ciblé : un conteneur de type div portant la classe “in line title”. Les propriétés CSS visibles dans l’inspection proviennent du thème actif ; les changer directement dans l’inspecteur serait temporaire et disparaîtrait au rechargement. La solution consiste donc à écrire une surcharge dans un fichier de snippet.

Le snippet est créé dans le dossier “snippets” (dans le répertoire caché “.obsidian” sur macOS). Le fichier “tuto sniper CSS” est ensuite rempli avec du CSS qui reprend la classe de l’élément. Le tutoriel montre d’abord une modification simple et visible : ajuster le poids de police (font-weight: 500) et la taille (font-size: 0.5rem), puis “forcer” le changement pour vérifier que la surcharge s’applique. Ensuite, il ajoute une couleur (color: red) pour distinguer davantage le titre.

Pour différencier le “nom de fichier” affiché dans ce titre, il utilise un pseudo-élément CSS : “::before”. L’objectif est d’insérer un texte avant le contenu existant, via “content: ‘nom du fichier ’”, puis de jouer sur la typographie (taille, font-style en italique, etc.). Il ajoute aussi une bordure (border-bottom: 1px solid red) et un espacement (margin-bottom) pour créer un soulignement et aérer l’ensemble.

Enfin, le tutoriel insiste sur la méthode : activer/désactiver le snippet dans les options pour comparer “avant/après”, et répéter le processus pour d’autres éléments de l’interface. Le résultat recherché est une personnalisation “à la carte” : plus lisible, plus cohérente avec ses préférences, et réversible à tout moment sans modifier le thème lui-même.