Wir haben bereits Theme-Einstellungen behandelt, und Obsidian sieht nach der Installation eines Themes viel besser aus. Aber viele haben trotzdem das Gefühl, dass nach dem Wechsel des Themes etwas nicht stimmt – Schrift zu klein, Zeilenabstand zu eng, Notizbereich zu schmal… Diese Details gehen über den Rahmen eines Themes hinaus. In diesem Kapitel erfährst du, wie du mit CSS Snippets Feintuning betreibst.
Dieses Kapitel behandelt vier Dinge:
- Was CSS ist – auch ohne Programmierkenntnisse verständlich
- Warum du auch mit einem Theme noch CSS brauchst
- Lass KI CSS für dich schreiben – einfach kopieren und einfügen
- Wo du das CSS ablegst und wie du es aktivierst
Was ist CSS
CSS steht für Cascading Style Sheets. Es klingt technisch, aber die Kernlogik ist einfach: CSS ist eine Reihe von Regeln, die das Aussehen steuern.
Zum Beispiel:
- Welche Schriftart, -größe und -farbe soll dieser Text haben?
- Wie breit ist dieser Bereich? Welche Abstände hat er?
- Welche Hintergrundfarbe soll beim Darüberfahren mit der Maus erscheinen?
Fast alle visuellen Effekte, die du auf einer Webseite siehst, werden von CSS gesteuert. Auch die Oberfläche von Obsidian basiert auf Webtechnologie (Electron), daher kann CSS verwendet werden, um ihr Aussehen zu steuern.
Das Theme, das du installierst, ist im Wesentlichen ein großes CSS-Paket, das von jemand anderem geschrieben wurde. Ein CSS Snippet ist ein kleines Stück CSS, das du selbst hinzufügst, speziell für das Feintuning von Dingen, die das Theme nicht abdeckt.
Das Theme ist der Gesamtstil; Snippets sind lokale Anpassungen. Sie kollidieren nicht und können zusammen verwendet werden.
Warum braucht man trotz Theme noch CSS?
Themes lösen das Problem des „Gesamtstils", aber viele Details der persönlichen Vorlieben gehen über den Rahmen von Themes hinaus – und das ist auch gut so, denn die Vorlieben sind unterschiedlich.
Einige häufige Szenarien, in denen Themes an ihre Grenzen stoßen:
- Notizbereich zu schmal: Viele Themes begrenzen standardmäßig die maximale Breite von Notizen, sodass auf breiten Bildschirmen große leere Flächen entstehen und der Inhalt in der Mitte eingezwängt wird. Manche mögen dieses Layout, andere finden es verschwenderisch.
- Zeilenabstand zu eng/weit: Der Standard-Zeilenabstand ist für dich vielleicht nicht angenehm, aber das Theme bietet keine Option dafür.
- Überschriftenfarbe nicht passend: Dir gefällt das Theme insgesamt, aber die H1-Farbe ist etwas zu grell und du möchtest sie abdunkeln.
- Lästiges UI-Element: Zum Beispiel ein Button, den du nie benutzt – du möchtest ihn ausblenden.
Diese Bedürfnisse sind sehr spezifisch und persönlich. CSS Snippets sind das Werkzeug, das entwickelt wurde, um diese „letzte Meile"-Probleme zu lösen.
Kein Grund, es selbst zu schreiben – lass KI es für dich schreiben
Das ist der wichtigste Punkt dieses Kapitels: Du musst überhaupt kein CSS lernen – lass es einfach von KI für dich schreiben.
Der Vorgang ist ganz einfach: Sag der KI einfach, was du ändern möchtest:
„Schreib mir ein Obsidian CSS Snippet, um die maximale Breite des Notiz-Inhaltsbereichs auf 900px zu setzen"
„Schreib mir ein Obsidian CSS Snippet, um den Zeilenabstand des Texts auf 1.8 zu setzen"
„Schreib mir ein Obsidian CSS Snippet, um die H1-Farbe auf Dunkelblau zu ändern"
Die KI wird dir ein vollständiges CSS-Code-Snippet geben, das du direkt kopieren und verwenden kannst.
Ein paar Tipps, um bessere Ergebnisse von der KI zu bekommen:
- Gib an, dass es ein Obsidian CSS Snippet ist, sonst könnte die KI dir normales Web-CSS mit falschen Variablennamen geben.
- Bitte die KI, Kommentare hinzuzufügen, sag ihr „Bitte füge neben jeder Eigenschaft einen Kommentar hinzu, der erklärt, was sie tut", damit du deine Datei später verstehst.
- Ändere immer nur eine Sache, eine Snippet-Datei für eine Sache – einfacher zu debuggen und einzeln auszuschalten.
Beispiel-Konversation:
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;
}
Das war’s. Kein Verständnis von CSS-Syntax nötig, kein Nachschlagen in der Dokumentation. Beschreibe, was du willst, bekomme den Code, füge ihn ein, fertig.
Wo legst du das CSS ab? Wie bringst du es zum Laufen?
CSS Snippets haben einen festen Speicherort. Folge einfach diesen Schritten.
Schritt 1: Finde den Snippets-Ordner
Pfad: Dein Vault-Stammverzeichnis → .obsidian-Ordner → snippets-Ordner
.obsidian ist ein versteckter Ordner. Auf Mac drückst du Command + Shift + ., um versteckte Dateien anzuzeigen. Wenn der snippets-Ordner nicht existiert, erstelle ihn manuell.
Natürlich kannst du auch direkt über die Einstellungen darauf zugreifen.
Schritt 2: Erstelle eine .css-Datei
Erstelle im snippets-Ordner eine neue Textdatei und ändere die Erweiterung in .css. Benenne sie nach Belieben, aber es wird empfohlen, einen beschreibenden Namen wie note-width.css oder line-height.css zu verwenden. Füge den Code von der KI ein und speichere.
Alternativ kannst du diesen Ordner öffnen und die KI die CSS-Datei direkt dort schreiben lassen.
Schritt 3: Aktiviere es in Obsidian
Pfad: Einstellungen → Darstellung → CSS-Snippets
Scrolle zum unteren Ende der Seite, dort siehst du einen Bereich „CSS-Snippets". Klicke auf das Aktualisierungs-Symbol rechts, und die soeben erstellte Datei erscheint in der Liste. Klicke auf den Schalter neben dem Dateinamen, der Schalter ändert seine Farbe, und das Snippet wird wirksam. Die Oberfläche ändert sich sofort, kein Neustart erforderlich. Wenn der Effekt nicht richtig ist, schalte den Schalter aus und überprüfe den Code.
Wie ich CSS selbst verwende
Hier sind ein paar Snippets, die ich tatsächlich verwende, als Referenz.
- Notizbereich verbreitern – Das ist mein am häufigsten verwendetes – setzt die maximale Breite des Notiz-Inhaltsbereichs größer, sodass auf großen Bildschirmen weniger Leerraum bleibt.
- Zeilenabstand anpassen – Der Standard-Zeilenabstand ist mir etwas zu eng, daher erhöhe ich ihn mit CSS leicht für angenehmeres Lesen.
- Unbenutzte Elemente ausblenden – Es gibt einige Buttons und Symbole in der Obsidian-Oberfläche, die ich nie benutze. Ich setze sie mit CSS auf
display: none, um sie auszublenden und die Oberfläche aufgeräumter zu machen. - Callout-Stil anpassen – Mir gefielen die Standardfarben von Callout-Blöcken in einem bestimmten Theme nicht, also habe ich sie mit CSS in weichere Farben geändert.
Diese vier Snippets sind in vier separaten .css-Dateien gespeichert, jede kann einzeln ein- und ausgeschaltet werden. Wenn du nach einer Weile feststellst, dass eines nicht zu dir passt, schalte es einfach aus – sie stören sich nicht gegenseitig.
Zusammenfassung
Was du heute gelernt hast:
- CSS ist die Regel zur Steuerung des Oberflächenaussehens; Obsidian verwendet CSS Snippets für lokale Anpassungen.
- Themes sind Gesamtstile; Snippets sind Detailanpassungen – sie arbeiten zusammen.
- Kein Grund, CSS selbst zu schreiben; sag der KI, was du ändern möchtest, und kopiere den Code, den sie dir gibt.
- Snippet-Speicherpfad: Vault-Stammverzeichnis →
.obsidian/snippets/→.css-Datei. - Aktiviere in Einstellungen → Darstellung → CSS-Snippets, schalte den Schalter ein, um zu aktivieren.
Wichtige Erkenntnisse:
- Deine Bedürfnisse der KI zu beschreiben, damit sie CSS schreibt, ist viel effizienter, als selbst CSS-Syntax zu lernen.
- Ein Snippet macht eine Sache, was Verwaltung und Fehlersuche erleichtert.
- Schalter können jederzeit ausgeschaltet werden – sicher und umkehrbar, keine Sorge, die Oberfläche zu beschädigen.