CSS snippet for multi-state tasks

I’d like to use symbols to signify different states for tasks; it’s so much easier than tags, and it still works with Dataview.

Some examples are below:

  • [ ] Unchecked
  • [/] In Progress
  • [?] Need More Info
  • [>] Scheduled / Deferred / Delegated
  • [!] Important
  • [x] Completed

Things I have tried

I’ve tried deathau’s snippet but it doesn’t appear to work and I don’t know CSS well enough to figure it out.

I’ve also tried the Minimal Theme (which is phenomenal), but I’d like something theme independent.

Any suggestions would be great!

What I’m trying to do

1 Like

You need to activate the snippet in order for it to display. First copy the checkbox.css file to your vaults /.obsidian/snippets folder, then in Settings - Appearance, scroll to the bottom and toggle checkbox on.

Hey @willasm thx for the tip.

I did activate the snippet in my normal vault and a test vault to no avail. I swapped between a few themes (Things, Default, etc.) Even did a couple of restarts to make sure the problem was not between the keyboard and the chair. :wink:

I did a bit more research and did find another snippet from the Obsidian ITS Theme called S-Checkboxes. That worked straight out the gate. :open_mouth:

But I like the subtle appearance of death-au’s, but I am unsure of what to tweak to get it to appear.

That’s odd? They both work fine for me. Perhaps it was not properly formatted. Try copying it from Github again but copy from the raw view instead. (click the raw button first)

Never mind, I just looked at this a little closer and that snippet does not work properly for me either. The default checkmarks are visible on top of the changed items so there is something wrong with it.

you can check these two snippets (that i’ve used personally since v1)


this one require scss converter. https://jsonformatter.org/scss-to-css

2 Likes

Thanks for sharing this! Love the second one, Checklist Icons.
No issues with the theme I’m using and they look fantastic.

Isn’t the “second one, checklist.icon” the minimal theme variant? Just that single file, not the entire theme?

1 Like

yeah @holroy, i give that option because OP mentioned liking minimal theme. so just giving an option to be “independent”. plus i did the same for my own.

1 Like

Thanks @efemkay! You nailed it!

Mahalo nui loa! :slightly_smiling_face:

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