Obsidian css snippets

My personal collection of css snippets for customizing my Obsidian editor

Table of Contents

• Setup
• Snippets
  • Active tab
  • File blur
  • File highlight
  • Image hover
  • Paragraph focus
  • Properties
  • Rainbow indent

Setup

To add and enable the snippets simply navigate to the .obsidian/snippets/ folder of your vault and copy and paste the included .css files within this folder. Next within Obsidian go to Settings > Appearance and scroll to the bottom. You should now see your snippets listed here. You can enable and disable exactly which features you want to use.

Snippets

Below is a list of the included snippets and what they do:

• Active tab

  Adds small highlight to the selected/active tab

• File blur

  Blurs file and folder names starting with b_

• File highlight

  Highlights notes that are prefixed with an underscore and makes them visually distinct

• Image hover

  Adds small zoom effect on images in live preview

• Paragraph focus

  In editing mode makes all lines faded out and focusses on the line you are activly typing on to improve reading focus

• Properties

  Improves visibility and styling of the properties section on notes

• Rainbow indent

  Adds colored indentation in edit mode to easily identify which identation belongs to which