r-u-s-h-i-k-e-s-h/obsidian-css-snippets

Welcome to the ObsidianMD CSS Snippets repository, a collection of CSS code snippets to enhance the user interface elements of ObsidianMD

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. ◩ Credits
6. ◩ 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 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
• 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.

◩ 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!

[](￣▽￣)*

obsidian-css-snippets's Issues

Infobox Callout Snippets breaks Layout

Steps to Reproduce

1. Add Infobox Callout to Snippets folder
2. Activate Snippet
3. Check Files
4. Deactivate Snippet and delete it from Snippets folder
5. Check Files again

Expected Behavior

• The only changes are to the infobox Callout
• After deactivating the snippet, the changes are reverted

Actual Behavior

• Note Body is permanently moved right (or the title is moved left)
• Even after deinstalling the snipped, the error still shows
  

just thanks.

Just wanted to say thank you for this compilation. Your name came up in a discord discussion with @sailkite, who sang your praises.

Accepting paypal for collecting other people's work?

That doesn't seem too nice.