The minimum-viable-CSS for Tasks out of the box

[Will-W]

I have started to use Tasks in my obsidian workflow, and I wanted to use the default provided Tasks status - including "In Progress" and "Cancelled". I don't want to go the whole hog and have theming etc. - I'm happy with a very vanilla look - but we do need some presentation for those status fields or it's confusing to look at.

I've gone back to basics to work out what the minimum styling needed is to have something appropriate in the checkbox for each of those two (and strikethrough for cancelled, because it's "done").

Hopefully it's also useful for other people who also want the least possible setup to get going with tasks:
https://github.com/Will-W/obsidian-snippets/blob/master/tasks.css

[claremacrae]

Hi, thanks @Will-W...

Would there be any chance of your posting a screenshot of what your style looks like, so people can decide whether to try it out?

[Will-W]

Good point - I have edited my post above

[claremacrae]

Awesome - thanks.

[j-xella]

What a fantastic "hello world tasks" post! There are other solutions, of course, but they are not very beginner friendly and much more opinionated. IMO, this thread should be included in the documentation.

Here is my take on the above CSS - I changed the icons to my liking and added selectors to correctly display tasks in callouts. Hope it will be useful for someone :)

task_states_2.zip

Below are some sample screenshots, done in Catppuccin Mocha theme.

P.S. For those who found this post looking how to change the appearance of their tasks, definitely check this page. It is a part of the official tasks documentation, but could be easy to overlook, as there are several similar pages all over the place.