Recreate Obsidian-esque Callout Formatting

[aoustrich]

What I’m trying to do

I use obsidian for my own PKMS but for a school assignment I have to build my own website from a jekyll theme called al-folio. There are some pre-configured block quotes but they look terrible compared to the Obsidian Callouts.

I want to tweak the jekyll block quote formatting to mimic Callouts but I’m very new to css and html and have no idea where to begin.

• Does anyone know if Obsidian uses an API for the Callouts or if they’re all formatted in the source code?
• Does anyone have tips for how to create a custom css snippet that would recreate the basic style of a Callout?

Things I have tried

• Callouts - Obsidian Help
• CSS Variables - Obsidian Developer Docs

[ariehen]

I don’t know how much CSS you can customize with al-folio, but you can open the dev tools in Obsidian (Ctrl-Shift-I on Windows/Linux or Cmd-Opt-I on macOS) → go to the Sources tab → click on app.css → select all on the right in app.css → copy → paste in your code editor of choice.

You can then search through the app.css to see how the default callouts are constructed:

---

Here’s a great guide as well:

Obsidian CSS Quick Guide

Obsidian CSS Quick Guide Hi friends! CSS in Obsidian can be confusing to get into, so this is a guide to get you started with information on the tools, methods, and some background knowledge! Let’s get started by looking at how you can look behind the curtain of Obsidian’s visuals. The Developer Console Obsidian is technically like a website. As such, you can view the source like any other browser. While you are inside the Obsidian window, you can press ctrl+shift+i to bring up the develope…