#1

Greetings, fellow Obsidian users…

I have a long list of tasks in Obsidian, with some of the tasks marked as complete, and I scan through these lists every day so that I can highlight the tasks I want to work on that day. I have to do this in edit mode so that I can quickly highlight the tasks I want to work on – switching back and forth between preview mode is far too slow. It would be great if I could somehow de-emphasise the completed tasks so I can quickly skip over them – at present, I’m reading the text of the tasks and often find that I’ve re-read a completed task, as the only difference is the “x” in between the brackets which is easy to miss.

I was hoping I could add some CSS formatting so that the completed tasks appear in grey text.

Does anyone know how to do this? I looked at the CSS classes assigned to task lists, but it looks as though the same classes are added to both checked and unchecked list items, so it looks like this may not be possible at present with Obsidian. Is there some sneaky way of achieving this anyway, perhaps using CSS selectors?

Thanks!

  • Erik.
#2

If you want to hide completed tasks in preview mode:

.markdown-preview-view ul > li.task-list-item.is-checked {
  display: none;
}

If you want change the look in preview mode, you can play with this:

.markdown-preview-view ul > li.task-list-item.is-checked {
  opacity: 50%;
  text-decoration: line-through;
  color: red;
}
#3

Thanks, @mnvwvnm, but both those only work in preview mode. As I said in my OP, I’m looking to dim the text for completed tasks in edit mode as I need to scan the list and highlight the items I want to work on – switching to preview mode to find an item, then back to edit mode to highlight it is quite clunky.

Is there any way to do this in edit mode?

#4

Make these changes in edit mode it’s more difficult. I don’t know how and if this is possible.
For this kind of workflow, you may consider use another method or a plugin like Kanban (adapting the kanban boards to something like: today tasks, tasks to do, done…).

1 Like
#5

I tried that for a while, but unfortunately Kanban involves moving tasks around rather than highlighting them in-place…this means there’s no easy way to keep track of how old a task is, and periodically flushing out older tasks.

Previously I was using Vim to edit my task list with custom syntax highlighting, and that worked well but I was hoping to use Obsidian instead.

Oh well…it looks like I’ll either have to request a feature where tasks have custom CSS classes visible in edit mode, or wait for the Typora plugin…in the meantime, I’ll make use of “Open in Default App” and prepare my task lists in Vim.

Thanks for the help.

  • Erik.
#6

About the tasks in edit mode, the problem is that no (obvious) difference between tasks “completed” and “to-do”. It’s markdown, and the big changes happens after the ‘render’ (preview mode). I only found a difference for the element [x].
If it helps for something, you can play with this (changing the style only for [x]):

.cm-s-obsidian span.cm-property {
  color: red;
}
2 Likes
#7

Thank you, @mnvwvnm – that’s really useful!

I didn’t realise that there were distinct css classes for the [x] elements. And it appears there’s also one for the [ ] elements too:

span.cm-formatting.cm-formatting-task.cm-meta {
  color: blue;
}

Together, these two CSS rules let you customise the format and colour for the checkbox portion of both checked and unchecked tasks – that’s enough to visually distinguish incomplete tasks from complete ones in a list.

Yay – thanks so much for all your help!

- Erik.

5 Likes
#8

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