Obsidian CSS Snippets

This repository provides a collection of CSS snippets to enhance the appearance and usability of Obsidian notes. Each snippet is designed for simplicity, visual clarity, and easy integration.

Included Snippets

• Perfect Callout (perfect-callout/):

  • Beautifies callout blocks with modern styles and improved readability.
  • Includes example images in the examples/ folder.

• Perfect Tables (perfect-tables/):

  • Styles standard markdown tables for a clean, professional look.
  • Features zebra striping, hover effects, and accent headers.
  • See image.png for a preview.

• Perfect Tables Expanded (perfect-tables-expanded/):

  • Adds advanced table styles, including compact, latex-style, highlighted columns, and Dataview integration.
  • Supports icon-enhanced tables via the Iconize plugin (icons-table.css).

Installation

1. Download or copy the desired CSS file(s) into your Obsidian vault's .obsidian/snippets folder.
2. In Obsidian, go to Settings → Appearance → CSS Snippets.
3. Enable the snippet(s) you want to use.

Usage

• For advanced table styles, add the appropriate cssclasses to your note's frontmatter. See each snippet's README for details and examples.
• For icon-enhanced tables, install the Iconize plugin and use the icons-table class.

Customization

You can edit any CSS file to match your theme or preferences. Each snippet is documented for easy modification.

License

See LICENSE for details.