Custom Obsidian Snippets

<!-- @format -->

# 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](https://forum.obsidian.md/t/alternative-checkboxes-icon-bullets-copy-and-paste/35962), 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](https://github.com/damiankorcz/Prism-Theme/blob/main/src/scss/Editor/callouts.scss)

`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](https://github.com/r-u-s-h-i-k-e-s-h/Obsidian-CSS-Snippets/blob/Collection/Snippets/Checkboxes%20-%20Progress%20bar%20checkboxes.md)

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

`cornell.css` – From [Obsidian Forum](https://forum.obsidian.md/t/how-do-i-implement-the-cornell-note-style-in-obsidian/75636) 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](https://www.reddit.com/r/ObsidianMD/comments/1gzut1i/comment/lz1v6rq/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button)

`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](https://www.reddit.com/r/ObsidianMD/comments/1gzut1i/comment/lyz8jkj/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button)