CSS Snippets for Obsidian

Various CSS Snippets for Obsidian's "Edit" view (I never use the Reading view 😁), using the default theme in light mode. They are modular on purpose, so that they can be easily enabled or disabled individually.

01-variables.css

Sets the variables that should be carried over across the various snippets. It is prefixed with 01- to ensure that it will always load first.

bg-grid.css

If enabled, it will add a square grid background to all the notes including the `bg--grid` cssclass in their properties:

bg-lines.css

If enabled, it will add horizontal lines to all the notes including the `bg--lines` cssclass in their properties:

callout-spoiler.css

Styles a spoiler custom callout, and reveals its contents after the box is both expanded and the user hovers over the content area.

Syntax:

> [!spoiler]- Spoiler
> The butler did it!

code.css

Changes to the CodeBlock layout. It uses filter: invert() so that it applies the reverse styling on dark mode.
Highlights the hovered line.
Adds numbers to the side.

comments.css

Converts comments to tooltips which show their content on hover. It works for both inline and block comments.

Syntax:

You can use inline footnotes ^[This is an inline footnote.] and then continue your text.

footnotes.css

Converts inline footnotes to tooltips which show their content on hover.

Syntax:

You can use inline footnotes ^[This is an inline footnote.] and then continue your text.

headings.css

Styles the various headings.

lists.css

Styles the lists (ordered and unordered).

properties.css

Styles the properties block.

quote.css

Styles the quote block.

sidebar.css

Hides the Attachments folder from the sidebar.

table.css

Styling changes to the tables from the Advanced Table plugin.

word-count.css

A small modification for the Better Word Count plugin, which only shows the counter on hover.

My other Obsidian projects

👉 Sentinel: Update properties or run commands based on document visibility changes (e.g. every time a note opens or closes).
👉 Varinote: Add variables in Templates and set their values during the Note creation.

Css Snippets

CSS Snippets for Obsidian

My other Obsidian projects