Hi all–I’m brand new to Obsidian and CSS in general. I spent a few hours looking for a solution that would allow me to apply my own formatting to task items, which isn’t something I’ve seen much of in other themes. Hope this post can save other newbies a little time.
I had two goals here: I didn’t love the default [ ] strikethrough look of completed tasks, and I wanted it to be easier to skim my meeting notes to find outstanding to-dos.
I came up with a solution that allowed me to remove the strikethrough and recolor the text of completed tasks. It also highlights the entire line of uncompleted tasks, so they jump right out at me. One of the difficulties I encountered was figuring out how to affect just the text on the line of the task itself, and not everything that’s a child of said task (like further indented list items).
The solution I came up with applies my desired formatting to the task-list-item (and task-list-item.is-checked), then restores default formatting to anything that’s a child of a child of one of those two classes.
Here’s how that looks:
CSS code below:
/* Larger check-boxes */
.markdown-preview-view .task-list-item-checkbox {
top: 2px;
width: 18px;
height: 18px;
box-shadow: 0 0 0.1em #1867c0;
}
/* Highlight uncompleted tasks */
.markdown-preview-view ul > li.task-list-item {
background-color: rgba(129, 76, 255, .18);
text-decoration: none;
}
/* Don't highlight children of uncompleted tasks */
.markdown-preview-view ul > li.task-list-item > ul, ol {
background-color: var(--background-primary);
text-decoration: none;
}
/* Recolor text of completed tasks */
.markdown-preview-view ul > li.task-list-item.is-checked {
background-color: var(--background-primary);
color: #814CFF;
text-decoration: none;
}
/* Restore color of children of completed tasks */
.markdown-preview-view ul > li.task-list-item.is-checked > ul, ol, li ol, li ul {
background-color: var(--background-primary);
color: var(--text-normal);
text-decoration: none;
}
/* Same properties as above, but for tasks appearing in ordered lists */
.markdown-preview-view ol > li.task-list-item {
background-color: rgba( 129, 76, 255, .18);
text-decoration: none;
}
.markdown-preview-view ol > li.task-list-item > ul, ol {
background-color: var(--background-primary);
text-decoration: none;
}
.markdown-preview-view ol > li.task-list-item.is-checked {
background-color: var(--background-primary);
color: #814CFF;
text-decoration: none;
}
.markdown-preview-view ol > li.task-list-item.is-checked > ul, ol, li ol, li ul {
background-color: var(--background-primary);
color: var(--text-normal);
text-decoration: none;
}
Hope that’s helpful to someone looking to do something similar. If others have ideas for improvement (or want to shame me for what I’m sure are not the best CSS practices–again, I’m totally new at this!), please feel free to share!