Obsidian CSS Snippets Collection (⓿_⓿)

ObsidianMD CSS Snippets Collection: Enhance Your Note-Taking Experience

Table of Contents:

1. Introduction
2. Compatibility
3. How to Use
4. Included Snippets
5. Additional Resources and Links
6. Credits
7. License

◩ Introduction

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!

◩ Compatibility

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.

◩ How to Use

1. Open Settings.
2. Under Appearance → CSS snippets, select Open snippets folder (folder icon).
3. In the snippets folder, create a CSS file that contains your snippet.
4. In Obsidian, under Appearance → CSS snippets, select Reload snippets (refresh icon) to see the snippet in the list.

Two Options:

1. Download Entire Vault: Download the vault, and open it in Obsidian via Open another vault -> Open folder as vault - > Reload the vault

2. Individual Snippets: Alternatively, for a more granular approach, open the links below to view and copy each individual CSS snippet.

◩ Included Snippets

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.

◩ Additional Resources and Links

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

◩ Credits

A special thanks to the creators of the original snippets and the ObsidianMD community for sharing their expertise and contributions.

• 🪁 sailKite (Email: [email protected] | GitHub profile )
• 🔥 FireIsGood (Buy coffee for FireIsGood)
• 💎 kneecaps (GitHub profile)
• 😎 rushi (Let me have some credit for minimal tweaks 😁)
• 💖 and many more amazing contributors!

◩ License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Happy theming and customizing your ObsidianMD experience!

[](￣▽￣)*