Bullet List Styling, like Wiki.js

[hockeygoalie35]

Hi!

I’m currently migrating from Wiki.js to Obsidian, and was wondering is there a way to style bulleted lists similar to wiki.js. In Wiki.js, if you add {.links-list} to the end of a bulleted list, it turns into a nicely styled list like so (with fancy colored roll-over):

My knowledgebase of various OSes and services.
- [Linux](/homelab/software/Linux)
- [Docker](/homelab/software/Docker)
- [SSH](/homelab/software/Linux/sshkeygen)
- [Wireguard](/homelab/software/wireguard)
{.links-list}

Just wondering if there’s a CSS solution or similar plugin. Thanks!

[ariehen]

You can style lists differently if they are different levels of indentation. e.g. using: Style Bullets in Lists by Level - #2 by rmdelatorre

note: as written the linked CSS only covers Live Preview. I personally wouldn’t go this route as it’s prone to breaking, needing adjusting when updates come out, etc. YMMV.

---

I would check out the built in callouts. They can be styled to your heart’s content. e.g.

---

If you wanted to stick with the list format, GitHub - mgmeyers/obsidian-list-callouts: Create callouts in lists in Obsidian. is a fun plugin:

Similar, the GitHub - AnubisNekhet/AnuPpuccin: Personal theme for Obsidian theme has “speech bubbles” that use custom tasks for coloring. Written as

- [0] some text 

And many themes offer custom checklists:

---

A few options, but I think you’d need to decide if you are fine using the callouts syntax:

> [!todo]- To Do
> - [ ] check out Obsidian callouts

or list callouts / custom checklists in some fashion:

- [I] idea

and then you can go from there.

[hockeygoalie35]

I don’t think I’m opposed to playing with callouts, I’ll dig into it. Thanks for pointing me in the right direction! May come back with some questions.

[ariehen]

Yeah, callouts are super fun and the basic ones easily readable in Source mode (plain text). They are basically rendered divs you can just style at will.

I don’t use that many complex ones (for future proofing), but do in a handful of notes. Some more complex options:

Multi Column Callout

Callout - Asides - SlRvb's Documentation - Obsidian Publish

[hockeygoalie35]

Very cool, thanks for the help! was able to get it looking Wiki.JS-like, plus compatible with the Accent Color. Also with rollover!

I guess the only things that I can’t figure out are:

• Is it possible to “link” hover activation, so that when the div is hovered, both the SVG icon + text is also “hovered”?
• Is it possible to propagate the click-through across the whole callout (need to click text currently).

I suppose these would require directly editing the HTML, correct?