Obsidian Snippets

.___  ________  __________  ________  ___.
|   \ \       \ \        / /       / /   |
|    \ \       \ \      / /_______/ /    |
|     \ \       \ \    / ________  /     |
|      \ \       \ \  / /       / /      |
|_______\ \_______\ \/ /_______/ /_______|

A collection of both personal and third-party Obsidian snippets. Please note that all third-party code belongs to the original authors. Credits and source are included at the top of each snippet. All snippsets should work with Obsidian Publish.

[!note] For more information about CSS Snippets and implementing them, see the offical documentation.

Snippets

See below for a list of all snippets included, authors, use, and purpose.

MCL Multi Column.css

Snippet is from author efemkay and all credit goes to them (link to LICENSE). While the snippet has many uses, I personally like the Multi Column Callout feature. I like to combine this with the callout outlines. Use:

> [!multi-column]
>
>> [!note] First Callout
>> Some text.
>
>> [!warning] Second Callout
>> More text.

S - Embed Adjustments.css

Snippet is from author SIRvb and all credit goes to them (link to LICENSE). Basically this gives control over how an embed appears. I use it for the clean and no-title functions, which makes the embeded note appear seamless in the document. This is useful for Obsidian Publish sites, as the embed-strict from the Obsidian Minimal Publsh theme doesn't appear to be implemented as of yet. For complete documentation, see SIRvb's documentation. Use:

![[Note|clean no-title]]

banner_image.css

Original snippet is from author Bluemoondragon07, but I use a modified version from user CheLin. Link to LICENSE here.

Banner images appear to be a bit touchy in Obsidian, and I use mine for Publish. This snippet worked the best for me, but there are more complex or advanced options out there that might work better for you.

Note that this snippet can cause unexpected issues depending on your file names. The use of img[alt*="banner] in this snippet applies to all "alt" attributes for "img" elements. However, in Obsidian the alt text by default is the file name. So if your file name is something like "banner_image.jpg," the snippet will see it as a banner image. You can modify The alt text using |, for example: ![[banner.jpg|not_a_banner]]. Just something to keep in mind if you encounter unexpected results.

I also modified the snippet to remove reference of .mod-header. This class applies to all embeded files, not just images. When embeding both a note and a banner image in the same document, the padding-top would apply to the file, creating extra padding around the file. I removed this reference, and instead add padding to the top of .markdown-preview-size, which just adds fixed padding to the top of the reading pane.

Additionally, one feature of this snippet is the ability to stack multiple images. This can be nice feature to overlay text on another image. However, the text might be stretched or warped depending on your view (such on mobile). I fixed this by adding alt*="contain", which changes the object-fit attribute to contain instead of cover.

Use:

---
cssclasses:
    - obsidian-banner
---

![[image.png|banner]]
![[stacked_image.png|banner contain]]

blockquote_styling.css

I took this exact snippet from the r-u-s-h-i-k-e-s-h/Obsidian-CSS-Snippets repo, but the original is by user kneecaps from discord.

You might need to change the colors, but otherwise should work without issue. Note that this will change all default quote blocks in your notes.

Use:

> This is the quote.
> <cite>Author</cite>

blog_post_callout.css and custom_callouts.css

Created by me. Simple callout styles. Colors might need to be changed depending on your theme.

cards-box-link.css

This snippet was written by me, but I took the idea from the official Obsidian site on the Import notes page.

Basically this is a custom class that extends the Minimal Cards functionality. It transforms any list-cards into clickable links. Note that this will overwrite the styling for all cards in that note.

If you'd like to utilize multiple card styles in a single note, you will need to create a separate note with the different style and embed it in the primary note. A little messy, but it works.

Use:

---
cssclasses:
    - list-cards
    - cards-box-link
---

center_headings.css

Simple snippet that centers the headings in the content pane.

image_border.css

Adds a border and drop shadow around embeded images.

outlined_callouts.css

I took this exact snippet from the r-u-s-h-i-k-e-s-h/Obsidian-CSS-Snippets repo, but the original is by user sailKite from discord. Changes callouts on a page to an outline style.

Use:

---
cssclasses:
    - callouts-outlined
---

I've also added a modification of my own that centers the title and icon in the callout.

Use:

[!info|center-title]

profile_image.css

This snippet was written by me, but I took the idea from: https://yomaru.dev/home. All credit goes to the original author.

This makes an image round a fixed height, width and a border. You will likely need to change the border color to match your theme.

Use:

---
cssclasses:
    - profile-image
---

![[image|profile-image]]

center_callout_body.css

Modify callouts to center content. By default callouts are set to "12px 12x 12px 24px," this overrides the "24px" to "12px."

Use:

[!info|center-content]

noteinfo_callout.css

Custom callout I created with inspiration from Marco Noris's publish site.

Basically this creates a custom callout that is centered and only designed to show simple note info, like the date or author of the note. I also took some formating from the kneecaps blockquote styling, and a little bit from outlined callouts.

Note that this snippet is designed to only have text in the title. Adding any body text will have unpleasent styling.

Use: