Recreate Obsidian-esque Callout Formatting

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

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:

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.