Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/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
https://github.com/r-u-s-h-i-k-e-s-h/obsidian-css-snippets

obsidian-css obsidian-md snippets-collection

Last synced: 4 days ago
JSON representation

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

Awesome Lists containing this project

README 

        
# Obsidian CSS Snippets Collection (⓿_⓿)



ObsidianMD CSS Snippets Collection: Enhance Your Note-Taking Experience



snippets collection



**Table of Contents:**



1. [Introduction](#-Introduction)

2. [Compatibility](#-Compatibility)

3. [How to Use](#-How-to-Use)

4. [Included Snippets](#-Included-Snippets)

5. [Additional Resources and Links](#-additional-resources-and-links)

6. [Credits](#-Credits)

7. [License](#-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](https://github.com/r-u-s-h-i-k-e-s-h/Obsidian-CSS-Snippets/archive/refs/heads/Collection.zip), 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](Snippets/Accented%20settings%20side%20headings.md)

 - [Author callout](Snippets/Author%20callout.md)

 - [Banner](Snippets/Banner.md)

 - [Bigger first letter](Snippets/Bigger%20first%20letter.md)

 - [Blockquote styling 01](Snippets/Blockquote%20styling%2001.md)

 - [Blockquote styling 02](Snippets/Blockquote%20styling%2002.md)

 - [Blockquote styling 03](Snippets/Blockquote%20styling%2003.md)

 - [Calendar styling](Snippets/Calendar%20styling.md)

 - [Callout icon to the top right corner](Snippets/Callout%20icon%20to%20the%20top%20right%20corner.md)

 - [Callout styling - 3 callouts](Snippets/Callout%20styling%20-%203%20callouts.md)

 - [Callout styling - Callout without icon](Snippets/Callout%20styling%20-%20Callout%20without%20icon.md)

 - [Callout styling - Celtic callout border](Snippets/Callout%20styling%20-%20Celtic%20callout%20border.md)

 - [Callout styling - Folder structure callout](Snippets/Callout%20styling%20-%20Folder%20structure%20callout.md)

 - [Callout styling - Gummy callout](Snippets/Callout%20styling%20-%20Gummy%20callout.md)

 - [Callout styling - Label callout](Snippets/Callout%20styling%20-%20Label%20callout.md)

 - [Callout styling - Leader list callout](Snippets/Callout%20styling%20-%20Leader%20list%20callout.md)

 - [Callout styling - Minimal callout](Snippets/Callout%20styling%20-%20Minimal%20callout.md)

 - [Callout styling - Old callouts](Snippets/Callout%20styling%20-%20Old%20callouts.md)

 - [Callout styling - Outlined callout](Snippets/Callout%20styling%20-%20Outlined%20callout.md)

 - [Callout styling - Power callouts](Snippets/Callout%20styling%20-%20Power%20callouts.md)

 - [Callout styling - Quote callout](Snippets/Callout%20styling%20-%20Quote%20callout.md)

 - [Callout styling - Scroller callout](Snippets/Callout%20styling%20-%20Scroller%20callout.md)

 - [Callout styling - Sleek callout (AnuPpuccin theme)](Snippets/Callout%20styling%20-%20Sleek%20callout%20(AnuPpuccin%20theme).md)

 - [Callout styling - Tabbed callout](Snippets/Callout%20styling%20-%20Tabbed%20callout.md)

 - [Callout styling - Theorem callout](Snippets/Callout%20styling%20-%20Theorem%20callout.md)

 - [Callout styling - Timeline callout](Snippets/Callout%20styling%20-%20Timeline%20callout.md)

 - [Callout styling - Wikipedia like infobox](Snippets/Callout%20styling%20-%20Wikipedia%20like%20infobox.md)

 - [Callout Styling 01 - Prism theme callout](Snippets/Callout%20Styling%2001%20-%20Prism%20theme%20callout.md)

 - [Callout styling 02](Snippets/Callout%20styling%2002.md)

 - [Canvas styling - Gradient canvas cards](Snippets/Canvas%20styling%20-%20Gradient%20canvas%20cards.md)

 - [Card layout](Snippets/Card%20layout.md)

 - [Card view](Snippets/Card%20view.md)

 - [Celtic inline title styling](Snippets/Celtic%20inline%20title%20styling.md)

 - [Checkboxes - AnuPpuccin theme](Snippets/Checkboxes%20-%20AnuPpuccin%20theme.md)

 - [Checkboxes - Minimal theme](Snippets/Checkboxes%20-%20Minimal%20theme.md)

 - [Checkboxes - Origami theme](Snippets/Checkboxes%20-%20Origami%20theme.md)

 - [Checkboxes - Priority checkboxes](Snippets/Checkboxes%20-%20Priority%20checkboxes.md)

 - [Checkboxes - Progress bar checkboxes](Snippets/Checkboxes%20-%20Progress%20bar%20checkboxes.md)

 - [Checkboxes - SlRvb's checkboxes (ITS theme)](Snippets/Checkboxes%20-%20SlRvb's%20checkboxes%20(ITS%20theme).md)

 - [Code block styling 01](Snippets/Code%20block%20styling%2001.md)

 - [Code block styling 02](Snippets/Code%20block%20styling%2002.md)

 - [Collapsible image caption callout](Snippets/Collapsible%20image%20caption%20callout.md)

 - [Coloured ribbon](Snippets/Coloured%20ribbon.md)

 - [Coloured tab header container](Snippets/Coloured%20tab%20header%20container.md)

 - [Colourful headings underline and divider](Snippets/Colourful%20headings%20underline%20and%20divider.md)

 - [Command palette styling 01](Snippets/Command%20palette%20styling%2001.md)

 - [Command palette styling 02](Snippets/Command%20palette%20styling%2002.md)

 - [Compact tabs](Snippets/Compact%20tabs.md)

 - [Empty tab styling](Snippets/Empty%20tab%20styling.md)

 - [Equally spaced dataview columns](Snippets/Equally%20spaced%20dataview%20columns.md)

 - [External link styling 01](Snippets/External%20link%20styling%2001.md)

 - [Faded emoji in tasks](Snippets/Faded%20emoji%20in%20tasks.md)

 - [File explorer styling - Folder description](Snippets/File%20explorer%20styling%20-%20Folder%20description.md)

 - [File explorer styling - Folder headers](Snippets/File%20explorer%20styling%20-%20Folder%20headers.md)

 - [File explorer styling - Rainbow folder background](Snippets/File%20explorer%20styling%20-%20Rainbow%20folder%20background.md)

 - [File explorer styling - Rainbow folder titles](Snippets/File%20explorer%20styling%20-%20Rainbow%20folder%20titles.md)

 - [Gradient Colored Icon Tabs](Snippets/Gradient%20Colored%20Icon%20Tabs.md)

 - [Heading indicators 01](Snippets/Heading%20indicators%2001.md)

 - [Heading indicators 02](Snippets/Heading%20indicators%2002.md)

 - [Hide ribbon on collapse](Snippets/Hide%20ribbon%20on%20collapse.md)

 - [Hide titlebar buttons and freeze the right-expand button](Snippets/Hide%20titlebar%20buttons%20and%20freeze%20the%20right-sidedock%20toggle%20button%20position.md)

 - [Hide window button panel](Snippets/Hide%20window%20button%20panel.md)

 - [Icon before headings](Snippets/Icon%20before%20headings.md)

 - [Image as a background 01](Snippets/Image%20as%20a%20background%2001.md)

 - [Image as a background 02](Snippets/Image%20as%20a%20background%2002.md)

 - [Image description when hover](Snippets/Image%20description%20when%20hover.md)

 - [Image gallery](Snippets/Image%20gallery.md)

 - [Image grid](Snippets/Image%20grid.md)

 - [Image styling - Zoom image](Snippets/Image%20styling%20-%20Zoom%20image.md)

 - [Image tweak](Snippets/Image%20tweak.md)

 - [Kanban styling - background based on tag](Snippets/Kanban%20styling%20-%20background%20based%20on%20tag.md)

 - [Kanban styling - Notion like Kanban board](Snippets/Kanban%20styling%20-%20Notion%20like%20Kanban%20board.md)

 - [Kanban styling - background customized](Snippets/Kanban%20styling%20-%20background%20customized.md)

 - [Left aligned note header](Snippets/Left%20aligned%20note%20header.md)

 - [Link styling 01](Snippets/Link%20styling%2001.md)

 - [Loading screen tweak](Snippets/Loading%20screen%20tweak.md)

 - [Multicolumn note](Snippets/Multicolumn%20note.md)

 - [New note button](Snippets/New%20note%20button.md)

 - [Note icon](Snippets/Note%20icon.md)

 - [Outline numbering](Snippets/Outline%20numbering.md)

 - [Pinned tab styling](Snippets/Pinned%20tab%20styling.md)

 - [Popover border](Snippets/Popover%20border.md)

 - [Progress bar styling](Snippets/Progress%20bar%20styling.md)

 - [Properties into two columns](Snippets/Properties%20into%20two%20columns.md)

 - [Properties on hover](Snippets/Properties%20on%20hover.md)

 - [Safari tabs](Snippets/Safari%20tabs.md)

 - [Show note header on hover](Snippets/Show%20note%20header%20on%20hover.md)

 - [Sidenote callout 01](Snippets/Sidenote%20callout%2001.md)

 - [Sidenote callout 02](Snippets/Sidenote%20callout%2002.md)

 - [Spoiler text](Snippets/Spoiler%20text.md)

 - [Table styling - Centred table](Snippets/Table%20styling%20-%20Centred%20table.md)

 - [Table styling - Left column header](Snippets/Table%20styling%20-%20Left%20column%20header.md)

 - [Table styling - Rounded corners](Snippets/Table%20styling%20-%20Rounded%20corners.md)

 - [Tabs styling - Square tabs](Snippets/Tabs%20styling%20-%20Square%20tabs.md)

 - [Tabs styling - Stacked tabbed minimal tweak](Snippets/Tabs%20styling%20-%20Stacked%20tabbed%20minimal%20tweak.md)

 - [Tag styling - Hide hash symbol](Snippets/Tag%20styling%20-%20Hide%20hash%20symbol.md)

 - [Tag styling 01](Snippets/Tag%20styling%2001.md)

 - [Tags styling - Rainbow tags](Snippets/Tags%20styling%20-%20Rainbow%20tags.md)

 - [Tags styling - Target specific tag](Snippets/Tags%20styling%20-%20Target%20specific%20tag.md)

 - [Tooltip styling](Snippets/Tooltip%20styling.md)

 - [Unordered list styling 01](Snippets/Unordered%20list%20styling%2001.md)

 - [Unordered list styling 02](Snippets/Unordered%20list%20styling%2002.md)

 - [Vertical label arrangement](Snippets/Vertical%20label%20arrangement.md)



**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](https://discord.com/channels/686053708261228577/702656734631821413) - Obsidian discord

- [Obsidian CSS Quick Guide](https://forum.obsidian.md/t/obsidian-css-quick-guide/58178) (forum) (mostly about using the inspector) -

- [CSS Variables at Obsidian Dev Docs](https://docs.obsidian.md/Reference/CSS+variables/CSS+variables)

- replete / [obsidian-minimal-theme-css-snippets](https://github.com/replete/obsidian-minimal-theme-css-snippets)

- efemkay / [obsidian-modular-css-layout](https://github.com/efemkay/obsidian-modular-css-layout#wide-views)

- SlRvb's [snippets collection](https://github.com/SlRvb/Obsidian--ITS-Theme/tree/main/Snippets) | [Guide](https://publish.obsidian.md/slrvb-docs/ITS+Theme/ITS+Theme)

- zamsyt / [obsidian-snippets](https://github.com/zamsyt/obsidian-snippets)

- ElsaTam /  [Obsidian-Stuff](https://github.com/ElsaTam/Obsidian-Stuff)

- KuiyueRO / [Obsidian-Miner](https://github.com/KuiyueRO/Obsidian-Miner)

- HandaArchitect / [obsidian-banner-snippet](https://github.com/HandaArchitect/obsidian-banner-snippet)

- sailKiteV / [Obsidian-Snippets-and-Demos](https://github.com/sailKiteV/Obsidian-Snippets-and-Demos?tab=readme-ov-file)

- TfTHacker / [DashboardPlusPlus](https://github.com/TfTHacker/DashboardPlusPlus)

- eb2ai / [My-Checklists-and-Icons](https://github.com/eb2ai/My-Checklists-and-Icons?tab=readme-ov-file)

- felixqueisler / [Obsidian-FileLink-Styling](https://github.com/felixqueisler/Obsidian-FileLink-Styling)

- xhuajin / [obsidian-sidenote-callout](https://github.com/xhuajin/obsidian-sidenote-callout/tree/main)



## ◩ 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](https://github.com/sailKiteV) )

- 🔥 **FireIsGood** ([Buy coffee for FireIsGood](https://ko-fi.com/fireisgood))

- 💎 **kneecaps** ([GitHub profile](https://github.com/7368697661))

- 😎 **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](LICENSE) file for details.



---



Happy theming and customizing your ObsidianMD experience!



[]~(￣▽￣)~*