Custom Obsidian Snippets

Why Custom snippets?

There are a variety of themes and snippets available in the Obsidian community. However, using different combinations of themes and snippets usually comes with the added hassle of debugging simple things such as checkbox styles which multiple sources are fighting for, resulting in overlapping styles, or sometimes even completely breaking the app.

Thus, for someone who spends a lot of time in Obsidian and uses it for managing all of their knowledge and tasks as well as Journal, creating custom snippets is the easiest way to get perfect customisation without worrying over conflicts. As an added bonus, it offers even more customizability than using community Themes or Snippets. While plugins like Style Settings do make things easier, I have found using custom snippets the best way to get exactly what I want, and nothing else. It is easier to create a snippet for coloring the headings and setting their fonts than to use an entire theme just for the heading colors, or use Style Settings to change it.

How the snippets were made

NOTE: Some of the snippets are taken from other people's works, and they have been linked wherever they come up. If I have updated the snippet, the file is in this repo, but if they haven't been updated, you will have to go to the linked source and get the snippet from them.

I came up with ideas and what I want, then used Obsidian's inbuilt Inspect Element (usually the Ctrl + Shift + I shortcut opens up the panel) to get the elements and classes, and played around the colors and styles. Finally, when I got the look I wanted, I used A.I. tools to try and find redundancy in my code, or a faster way to accomplish the same thing. Usually, there isn't much that changes, except maybe creating variables and using the variables instead. Another thing AI is used for is to duplicate things. E.g. - I have the alternate checkboxes styles, and it gets boring to copy and paste it every single time. So I just give the AI model the existing code, and the svg code for the icon I want as well as the color scheme, and it spits out the same code but with an extra icon.

Descriptions

NOTE: All snippets have been made to work well with both light and dark themes. If you find that something breaks with switching from light or dark themes, please let me know!

alt-checkboxes-extra.css – Originally taken from Obsidian Forum on Alternate Checkboxes, but later adapted to include more styles.

background.css – Sets the background color of Obsidian.

better-highlight.css – Different colored highlights for ==text==, *==text==*, etc.

bold-italic-underline.css – Color bold, italic and underline text separately.

callout-prism.css – From damiankorcz

center-images.css – Does what it says, just centers all images. Use cssstyles: center_images to apply to your note.

center-tables.css – Centers all tables in the note. Use cssstyles: center_tables to apply to your note.

checkbox-progress.css – From quinntyx, sailKite

clean-tables.css – Applies custom colors, stripped appearance to tables. Use cssclasses: clean_tables to apply to your note.

cornell.css – From Obsidian Forum with a few updates.

custom-headings.css – Colors all heading levels and changes their fonts.

db-overlap-fix.css – Allows scrolling bases past the end so the last entry doesn't get masked by the status bar.

fonts.css – Changes the fonts of bold and italic text. By default, its the Roboto, Lora and Libre Baskerville fonts. Make sure you have those installed on your system before applying the fonts.

image-grid.css – Simply puts images in the same line next to each other, in a grid.

latex-coloreed.css – Colors all $\LaTeX$ code blocks (including inline) and increases their size. Inspired from u/Agile_Crow_1516

mermaid-downscale.css – Downscales all mermaid diagrams so they fit the viewport better.

no-grey-tasks.css – Removes the strike / reduced opacity filter on checkboxes that use alternate checkbox styles. Keeps the strik/opacity filter in [x] items.

readable-line-length-increase.css – Increases the readable line length.

unique-bullets.css – Each level of bullet/sub-bullet points has a different symbol, taken from 1gzut1i from ObsidianMD Subreddit