DiscoverTrendingPluginsDashboardsBlogPublish
SNIPPET
mahpara-nawal

obsidian-ui-demo

A minimal Obsidian vault showcasing custom UI elements – headers, footers, callouts, buttons, icons, and layout polish using the Prism theme and CSS snippets. Perfect for learning how to style your Obsidian workspace.

1 Stars
GitHubReport listing

UI Appearance Demo

This vault demonstrates custom UI elements in Obsidian:

  • Custom header & footer via CSS
  • Styled callouts (various types/colors)
  • Interactive buttons (using the Buttons plugin)
  • Subtle background gradient
  • Polished sidebar accents
  • Clean table
  • Icons (emoji/plugin)

How to Use

  1. Open this folder as a vault in Obsidian.
  2. Enable community plugins (if prompted) and ensure Buttons and Style Settings are enabled.
  3. Activate the Prism theme.
  4. Enable CSS snippets in Settings → Appearance → CSS snippets. The custom styles are already in the .obsidian/snippets/ folder.

Related

VAULT

Knowledge Garden

oldwinter

SNIPPET

Modular Css Layout

efemkay

SNIPPET

Css Snippets

Dmytro-Shulha

How to Install

  1. Download the repository ZIP below
  2. Unzip it and find the CSS snippet file
  3. Move the CSS file into your vault's .obsidian/snippets/ folder
  4. Open Obsidian → Settings → Appearance → CSS Snippets → Enable it
Download ZIPOpen Repository

Stats

Stars

1

Forks

0

Last updated 5mo ago