ObsidianMD CSS Snippets Collection: Enhance Your Note-Taking Experience
Table of Contents:
- Introduction
- Compatibility
- How to Use
- Included Snippets
- Additional Resources and Links
- Credits
- License
Hey there! Welcome to the ObsidianMD CSS Snippets repository. It's a collection of CSS code snippets for ObsidianMD—no fuss, just a bunch of useful snippets. These come from different folks in the ObsidianMD community, so you'll find a variety of styles and tweaks. Enjoy experimenting with them to customize your ObsidianMD experience!
These CSS snippets are tested and compatible with Obsidian version 1.4.16 with default theme. Keep in mind, future updates to Obsidian may cause them not to work as intended.
- Open Settings.
- Under Appearance → CSS snippets, select Open snippets folder (folder icon).
- In the snippets folder, create a CSS file that contains your snippet.
- In Obsidian, under Appearance → CSS snippets, select Reload snippets (refresh icon) to see the snippet in the list.
Two Options:
-
Download Entire Vault: Download the vault, and open it in Obsidian via
Open another vault -> Open folder as vault - > Reload the vault -
Individual Snippets: Alternatively, for a more granular approach, open the links below to view and copy each individual CSS snippet.
Click to expand/collapse
- Accented settings side headings
- Author callout
- Banner
- Bigger first letter
- Blockquote styling 01
- Blockquote styling 02
- Blockquote styling 03
- Calendar styling
- Callout icon to the top right corner
- Callout styling - 3 callouts
- Callout styling - Callout without icon
- Callout styling - Celtic callout border
- Callout styling - Folder structure callout
- Callout styling - Gummy callout
- Callout styling - Label callout
- Callout styling - Leader list callout
- Callout styling - Minimal callout
- Callout styling - Old callouts
- Callout styling - Outlined callout
- Callout styling - Power callouts
- Callout styling - Quote callout
- Callout styling - Scroller callout
- Callout styling - Sleek callout (AnuPpuccin theme)
- Callout styling - Tabbed callout
- Callout styling - Theorem callout
- Callout styling - Timeline callout
- Callout styling - Wikipedia like infobox
- Callout Styling 01 - Prism theme callout
- Callout styling 02
- Canvas styling - Gradient canvas cards
- Card layout
- Card view
- Celtic inline title styling
- Checkboxes - AnuPpuccin theme
- Checkboxes - Minimal theme
- Checkboxes - Origami theme
- Checkboxes - Priority checkboxes
- Checkboxes - Progress bar checkboxes
- Checkboxes - SlRvb's checkboxes (ITS theme)
- Code block styling 01
- Code block styling 02
- Collapsible image caption callout
- Coloured ribbon
- Coloured tab header container
- Colourful headings underline and divider
- Command palette styling 01
- Command palette styling 02
- Compact tabs
- Empty tab styling
- Equally spaced dataview columns
- External link styling 01
- Faded emoji in tasks
- File explorer styling - Folder description
- File explorer styling - Folder headers
- File explorer styling - Rainbow folder background
- File explorer styling - Rainbow folder titles
- Gradient Colored Icon Tabs
- Heading indicators 01
- Heading indicators 02
- Hide ribbon on collapse
- Hide titlebar buttons and freeze the right-expand button
- Hide window button panel
- Icon before headings
- Image as a background 01
- Image as a background 02
- Image description when hover
- Image gallery
- Image grid
- Image styling - Zoom image
- Image tweak
- Kanban styling - background based on tag
- Kanban styling - Notion like Kanban board
- Kanban styling - background customized
- Left aligned note header
- Link styling 01
- Loading screen tweak
- Multicolumn note
- New note button
- Note icon
- Outline numbering
- Pinned tab styling
- Popover border
- Progress bar styling
- Properties into two columns
- Properties on hover
- Safari tabs
- Show note header on hover
- Sidenote callout 01
- Sidenote callout 02
- Spoiler text
- Table styling - Centred table
- Table styling - Left column header
- Table styling - Rounded corners
- Tabs styling - Square tabs
- Tabs styling - Stacked tabbed minimal tweak
- Tag styling - Hide hash symbol
- Tag styling 01
- Tags styling - Rainbow tags
- Tags styling - Target specific tag
- Tooltip styling
- Unordered list styling 01
- Unordered list styling 02
- Vertical label arrangement
NOTE: Please note that some code snippets might not be displayed here due to permission concerns. You can find the complete code in the provided source URLs.
Click to expand/collapse
- #appearance - Obsidian discord
- Obsidian CSS Quick Guide (forum) (mostly about using the inspector) -
- CSS Variables at Obsidian Dev Docs
- replete / obsidian-minimal-theme-css-snippets
- efemkay / obsidian-modular-css-layout
- SlRvb's snippets collection | Guide
- zamsyt / obsidian-snippets
- ElsaTam / Obsidian-Stuff
- KuiyueRO / Obsidian-Miner
- HandaArchitect / obsidian-banner-snippet
- sailKiteV / Obsidian-Snippets-and-Demos
- TfTHacker / DashboardPlusPlus
- eb2ai / My-Checklists-and-Icons
- felixqueisler / Obsidian-FileLink-Styling
- xhuajin / obsidian-sidenote-callout
A special thanks to the creators of the original snippets and the ObsidianMD community for sharing their expertise and contributions.
- 🪁 sailKite (Email: sailKitev@gmail.com | GitHub profile )
- 🔥 FireIsGood (Buy coffee for FireIsGood)
- 💎 kneecaps (GitHub profile)
- 😎 rushi (Let me have some credit for minimal tweaks 😁)
- 💖 and many more amazing contributors!
This project is licensed under the MIT License - see the LICENSE file for details.
Happy theming and customizing your ObsidianMD experience!
[](￣▽￣)*