Css Question - strike-through for completed todos

Support
1

Operating system

Linux

Joplin version

3.6.11

Editor

Markdown Editor

What issue do you have?

I would like to have my completed ToDos not just checked & greyed out but also strike-through the text.
So I have this in my userstyle.css:

li.checked,
.checkbox-label-checked {
text-decoration-line: line-through;
}

But somehow it's not being applied anymore, so I assume some plugin is overriding it. Any suggestions where I might look?

Cheers,
kai.

2

I use this in userchrome.css and it works in 3.6.10:

/* Strikeout and dim a checked checkbox in markdown editor. To use
   this, use "Rich Markdown" plugin and enable this setting in the
   plugin's options: "Add additional CSS classes for enhanced
   customization". */
div.CodeMirror .cm-rm-checkboxed {
    text-decoration: line-through;
    opacity: 0.7;
}
3

Thanks for the quick feedback; that solved it. I wasn't using the Rich Markdown Plugin until now, because the features I want are already present in the standard MD editor settings, but your solution works nicely (as long as I stick to the MD editor).

Thank you kindly,

kai.

4

This should work in userchrome.css if using joplin's render markup (without rich markdown):

.cm-md-completed-item {
	text-decoration: line-through;
    opacity: 0.7;
}

EDIT: The above will apply the strikethrough to the left whitespace in indented task list items, this will work better:

/* Target only the text span inside the completed item */
.cm-md-completed-item span:last-child {
    text-decoration: line-through;
}

/* Apply opacity to the whole line for a "dimmed" look */
.cm-md-completed-item {
    opacity: 0.7;
}
5

Thanks again, even though that does not quite do what it promises: the strike-through goes past the first letter of the text through the single blank up to the checkbox. But that's a luxury problem I can live with; thanks again for your feedback.

Cheers,

kai.