CSS Snippets

Readable, organized Obsidian CSS snippets designed to eliminate confusion (area-feature-mode file naming system)

CSSAny theme
# Obsidian-CSS-Snippets 🎛️

#### File Naming System:
`area-feature-mode.css`

#### Vocabulary - Legend 🔑 

- area → where the snippet applies
- feature → what it changes
- mode → when it applies

#### Feature
Describes what the snippet changes or does.

Examples:
- `header-colors` → changes header colors  
- `no-image-filenames` → hides image filenames  
- `link-styles` → modifies link appearance  
- `callouts` → styles callout blocks  
- `sidebar-cleanup` → adjusts sidebar layout  
- `card-layout` → changes layout structure  

#### Area
- `canvas` ➝ canvas only
- `notes` ➝ markdown notes
- `global` ➝ everywhere
- `ui` ➝ app interface (menu, sidebars, etc.)

#### Mode
- `editor` → editing (source + live preview)
- `preview` → reading view (fully rendered)
- `global` → both / always active

#### Examples:
* canvas-no-image-filenames-preview.css
* global-header-colors-preview.css
  

#### Purpose
Readable, organized Obsidian CSS snippets designed to eliminate confusion (area-feature-mode file naming system)

### Notes
I’m still learning, but I wanted to share this system in case it helps others.
Constructive feedback is welcome.

How to Install

  1. Download the CSS file below
  2. Move it to your vault's .obsidian/snippets/ folder
  3. Open Obsidian → Settings → Appearance → CSS Snippets → Enable it
Download snippet.css

Stats

Stars

0

Forks

0

License

MIT

Last updated 7h ago