Nous avons déjà parlé des réglages de thème, et Obsidian est bien plus agréable après l’installation d’un thème. Mais beaucoup de gens trouvent encore que quelque chose cloche après avoir changé de thème : police trop petite, interlignes trop serrés, zone de notes trop étroite… Ces détails dépassent le cadre des thèmes. Ce chapitre explique comment peaufiner avec des extraits CSS.
Ce chapitre aborde quatre points :
- Qu’est-ce que le CSS – compréhensible même sans connaissances en programmation
- Pourquoi vous avez encore besoin de CSS même avec un thème
- Laissez l’IA écrire le CSS pour vous – il suffit de copier-coller
- Où placer le CSS et comment l’activer
Qu’est-ce que le CSS ?
CSS signifie Cascading Style Sheets (feuilles de style en cascade). Cela semble technique, mais la logique de base est simple : le CSS est un ensemble de règles qui contrôlent l’apparence des éléments.
Par exemple :
- Quelle police, taille et couleur pour ce texte ?
- Quelle largeur pour cette zone ? Quelles marges ?
- Quelle couleur de fond au survol ?
Presque tous les effets visuels que vous voyez sur une page web sont contrôlés par le CSS. L’interface d’Obsidian est également basée sur la technologie web (Electron), donc le CSS peut aussi contrôler son apparence.
Le thème que vous installez est en fait un gros paquet de CSS écrit par quelqu’un d’autre. Un extrait CSS est un petit morceau de CSS que vous ajoutez vous-même, spécifiquement pour peaufiner ce que le thème ne couvre pas.
Le thème est le style global ; les extraits sont des ajustements locaux. Ils ne sont pas en conflit et peuvent être utilisés ensemble.
Pourquoi avoir besoin de CSS même avec un thème ?
Les thèmes résolvent le problème du « style global », mais de nombreux détails de préférence personnelle dépassent le cadre des thèmes – et c’est normal, car les goûts de chacun sont différents.
Plusieurs scénarios courants où les thèmes ne suffisent pas :
Zone de notes trop étroite : De nombreux thèmes limitent la largeur maximale des notes par défaut, laissant de grands espaces vides sur les écrans larges avec le contenu coincé au milieu. Certains aiment cette disposition, d’autres la trouvent gaspilleuse.
Interlignes trop serrés/lâches : L’interligne par défaut peut ne pas vous convenir, mais le thème n’a pas d’option pour cela.
Couleur de titre pas adaptée : Vous aimez le thème dans l’ensemble, mais la couleur du H1 est un peu trop vive et vous voulez l’assombrir.
Élément d’interface gênant : Par exemple, un bouton que vous n’utilisez jamais – vous voulez le masquer.
Ces besoins sont très spécifiques et personnels. Les extraits CSS sont l’outil conçu pour résoudre ces problèmes de « dernier kilomètre ».
Pas besoin d’écrire vous-même : laissez l’IA le faire pour vous
C’est le point le plus important de ce chapitre : Vous n’avez pas du tout besoin d’apprendre le CSS – laissez simplement l’IA l’écrire pour vous.
Le processus est très simple : dites à l’IA ce que vous voulez changer :
« Écris-moi un extrait CSS pour Obsidian qui définit la largeur maximale de la zone de contenu des notes à 900px »
« Écris-moi un extrait CSS pour Obsidian qui règle l’interligne du corps à 1,8 »
« Écris-moi un extrait CSS pour Obsidian qui change la couleur du H1 en bleu foncé »
L’IA vous donnera un extrait de code CSS complet que vous pourrez copier et utiliser directement.
Quelques astuces pour obtenir de meilleurs résultats de l’IA :
- Précisez qu’il s’agit d’un extrait CSS pour Obsidian, sinon l’IA pourrait vous donner du CSS web classique avec des noms de variables incorrects.
- Demandez à l’IA d’ajouter des commentaires, dites-lui « Ajoute des commentaires à côté de chaque propriété expliquant ce qu’elle fait » pour pouvoir comprendre votre fichier plus tard.
- Changez une chose à la fois, un fichier d’extrait pour une chose – plus facile à déboguer et à désactiver individuellement.
Exemple de conversation :
Me: Write me an Obsidian CSS Snippet to set the maximum width of the note content area to 900px, please add comments.
AI:
.markdown-source-view, .markdown-reading-view {
/* Limit the maximum width of the note content area */
--file-line-width: 900px;
}
Voilà. Pas besoin de comprendre la syntaxe CSS, pas besoin de chercher de la documentation. Décrivez ce que vous voulez, obtenez le code, collez-le, c’est fait.
Où placer le CSS ? Comment l’activer ?
Les extraits CSS ont un emplacement de stockage fixe. Suivez simplement ces étapes.
Étape 1 : Trouvez le dossier des extraits
Chemin : Racine de votre Vault → dossier .obsidian → dossier snippets
.obsidian est un dossier caché. Sur Mac, appuyez sur Command + Shift + . pour afficher les fichiers cachés. Si le dossier snippets n’existe pas, créez-en un manuellement.
Bien sûr, vous pouvez aussi y accéder directement depuis les Paramètres.
Étape 2 : Créez un fichier .css
Dans le dossier snippets, créez un nouveau fichier texte, changez l’extension en .css. Nommez-le comme vous voulez, mais il est recommandé d’utiliser un nom descriptif comme note-width.css ou line-height.css. Collez le code de l’IA dedans et enregistrez.
Vous pouvez aussi ouvrir ce dossier et laisser l’IA écrire directement le fichier CSS à cet endroit.
Étape 3 : Activez-le dans Obsidian
Chemin : Paramètres → Apparence → Extraits CSS
Faites défiler jusqu’en bas de la page, vous verrez une section « Extraits CSS ». Cliquez sur l’icône d’actualisation à droite, et le fichier que vous venez de créer apparaîtra dans la liste. Cliquez sur l’interrupteur à côté du nom du fichier, l’interrupteur change de couleur et l’extrait prend effet. L’interface change immédiatement, aucun redémarrage nécessaire. Si l’effet n’est pas bon, désactivez l’interrupteur et revenez vérifier le code.
Comment j’utilise le CSS moi-même
Voici quelques extraits que j’utilise réellement, pour référence.
Élargir la zone de notes – C’est celui que j’utilise le plus – définit une largeur maximale plus grande pour la zone de contenu des notes, afin de réduire les espaces blancs sur les grands écrans.
Ajuster l’interligne – L’interligne par défaut est un peu trop serré pour moi, donc j’utilise du CSS pour l’augmenter légèrement et rendre la lecture plus confortable.
Masquer les éléments inutilisés – Il y a certains boutons et icônes dans l’interface d’Obsidian que je n’utilise jamais. Je les mets en display: none avec du CSS pour les masquer, rendant l’interface plus épurée.
Ajustements de style des callouts – Je n’aimais pas les couleurs par défaut des blocs de callout dans un certain thème, donc j’ai utilisé du CSS pour les changer en couleurs plus douces.
Ces quatre extraits sont stockés dans quatre fichiers .css séparés, chacun peut être activé individuellement. Si après un certain temps vous trouvez que l’un ne vous convient pas, désactivez-le simplement – ils n’interfèrent pas entre eux.
Résumé
Ce que vous avez appris aujourd’hui :
- Le CSS est la règle qui contrôle l’apparence de l’interface ; Obsidian utilise des extraits CSS pour des ajustements locaux.
- Les thèmes sont des styles globaux ; les extraits sont des réglages de détail – ils fonctionnent ensemble.
- Pas besoin d’écrire le CSS vous-même ; dites à l’IA ce que vous voulez changer et copiez le code qu’elle vous donne.
- Chemin de stockage des extraits : Racine du Vault →
.obsidian/snippets/→ fichier.css. - Activez dans Paramètres → Apparence → Extraits CSS, activez l’interrupteur pour appliquer.
Points clés à retenir :
- Décrire vos besoins à l’IA pour écrire du CSS est bien plus efficace que d’apprendre la syntaxe CSS vous-même.
- Un extrait pour une chose, ce qui facilite la gestion et le débogage.
- Les interrupteurs peuvent être désactivés à tout moment – sûr et réversible, pas besoin de craindre de casser l’interface.