20+ Useful CSS Snippets for Obsidian
Following are the links to the source materials from where you can get the CSS snippet and use in your own vault to customize the appearance or add some new feautres.
OR,
You can get all of them from the CSS snippets vault(Free for Paid members).
YouTube Video: You can also watch the youtube video in case you want a quick overview of all the CSS snippets.
Blockquote CSS Snippets: https://github.com/r-u-s-h-i-k-e-s-h/Obsidian-CSS-Snippets/blob/Collection/Snippets/Blockquote%20styling%2002.md
Callout Styling: https://github.com/r-u-s-h-i-k-e-s-h/Obsidian-CSS-Snippets/blob/Collection/Snippets/Callout%20Styling%2001%20-%20Prism%20theme%20callout.md
Tabbed Callout: https://github.com/r-u-s-h-i-k-e-s-h/Obsidian-CSS-Snippets/blob/Collection/Snippets/Callout%20styling%20-%20Tabbed%20callout.md Better version
Card Layout: https://github.com/r-u-s-h-i-k-e-s-h/Obsidian-CSS-Snippets/blob/Collection/Snippets/Card%20layout.md
Minimal theme cards css: Minimal theme cards css
Colored Folders: https://github.com/r-u-s-h-i-k-e-s-h/Obsidian-CSS-Snippets/blob/Collection/Snippets/Card%20layout.md
https://github.com/r-u-s-h-i-k-e-s-h/Obsidian-CSS-Snippets/blob/Collection/Snippets/File%20explorer%20styling%20-%20Rainbow%20folder%20background.mdImage as background: https://github.com/r-u-s-h-i-k-e-s-h/Obsidian-CSS-Snippets/blob/Collection/Snippets/Image%20as%20a%20background%2001.md
Link Styling: https://github.com/r-u-s-h-i-k-e-s-h/Obsidian-CSS-Snippets/blob/Collection/Snippets/Link%20styling%2001.md
Kabban background: https://github.com/r-u-s-h-i-k-e-s-h/Obsidian-CSS-Snippets/blob/Collection/Snippets/Kanban%20styling%20-%20background%20customized.md
90+ Callouts: https://discord.com/channels/686053708261228577/702656734631821413/1157528733205413961
Horizontal ruler line: https://forum.obsidian.md/t/creating-fancy-horizontal-rule-lines/63700
Blockquote CSS: https://forum.obsidian.md/t/creating-fancy-horizontal-rule-lines/63700
Image Gallery: https://github.com/r-u-s-h-i-k-e-s-h/Obsidian-CSS-Snippets/blob/Collection/Snippets/Image%20gallery.md
Gallery Layout for Images: https://github.com/kepano/obsidian-minimal/blob/master/src/css/main.css
Image Grid: https://github.com/r-u-s-h-i-k-e-s-h/Obsidian-CSS-Snippets/blob/Collection/Snippets/Image%20grid.md
https://github.com/zremboldt/obsidian-media-grid?tab=readme-ov-file
Multi-column Notes: https://github.com/zamsyt/obsidian-snippets/blob/main/Easy%20multi-column%20notes.css
Properties two columns: https://github.com/r-u-s-h-i-k-e-s-h/Obsidian-CSS-Snippets/blob/Collection/Snippets/Properties%20into%20two%20columns.md
Properties on Hover: https://github.com/r-u-s-h-i-k-e-s-h/Obsidian-CSS-Snippets/blob/Collection/Snippets/Properties%20on%20hover.md
SideNote callout: https://github.com/r-u-s-h-i-k-e-s-h/Obsidian-CSS-Snippets/blob/Collection/Snippets/Sidenote%20callout%2001.md
Table Styling: https://github.com/r-u-s-h-i-k-e-s-h/Obsidian-CSS-Snippets/blob/Collection/Snippets/Table%20styling%20-%20Centred%20table.md
Floating Action Button: https://forum.obsidian.md/t/adding-floating-action-button-fab-for-your-mobile-using-css/61388
Vicious Callouts: From Vicious theme
Clean Embeds: https://www.reddit.com/r/ObsidianMD/comments/rm3viu/can_someone_give_me_the_css_snippet_to_do_that/
Pretty Tables: https://forum.obsidian.md/t/custom-css-for-tables-5-new-styles-ready-to-use-in-your-notes/17084
Colored tags: https://gist.github.com/raisabelatrix
Logseq outline styling:
These CSS snippets will not only make your Obsidian look better, But some of them will also add some extra functionality or completely different way of visual appearance.
Comments (2)
Hey Pax, I’ve been exploring your CSS Snippet Vault and noticed that a few folders seem to be missing—specifically, Attachments and CSS Description, which you mention in your videos but aren’t in the uploaded vault. However, the snippets themselves all seem to be there, which is great! Keep up the awesome work :) I also came across this Reddit post (https://www.reddit.com/r/ObsidianMD/comments/1g4wxk0/for_new_obsidian_users_yes_you_can_do_that_as/) that shows some CSS snippets in action. Do you have any tips on how I could implement these customizations in your vault? I’m particularly interested in displaying notes with pictures inside callouts. I’d like to create callouts inspired by “True MOC/Atlas,” maybe even organized by topics. The Reddit user also shared a test vault, which you can find here: [Obsidian Test Vault](https://github.com/rabby0101/Obsidian) [Widget CSS](https://github.com/rabby0101/Obsidian/blob/main/Experiment/.obsidian/snippets/Widget.css) [TableTOcards CSS](https://github.com/rabby0101/Obsidian/blob/main/Experiment/.obsidian/snippets/TableTOcards.css) I’ve implemented both snippets and activated them in my vault, but they don’t seem to work. Could this be due to a conflict with some of your snippets that modify the same elements? Thanks again for all the amazing work you do, Pax! Greetings from Germany and keep it up! :) Best, Robin
Sorry this comment just got off my radar. If you still have issues, you can reach out via the patreon chat or my email prakashjoshipax@gmail.com