CSS Help, Changing Text Color Of Completed Nodes

❓Help
#1

Pardon if this is the wrong place to post. I’ve tried the CSS code examples I’ve found in posts here, for changing the text color of nodes marked completed (is-checked?). But none of them seem to work.
Can anyone point out a code sample that is known to work pls?
Thank you very much in advance.

#2

How did you apply the CSS, if I may ask?

#3

Thanks for the reply Erica!

I’m applying the code I’ve found via the scripting facility that comes with the “Stylish” browser extension (for Chrome).

1280×720 203 KB

The code in the yellow highlight box is an example of some of the code I’ve been trying. Oddly, the removal of the striketrhrough text decoration works, but I just can’t seem to change the text color no matter what code I’ve tried :frowning: .

#4

I tried the following code in the built in Dynalist CSS editor and it worked. I’m not sure if you need something different when using Stylish.

/*remove strike through and graying out of completed items and change color of text*/
.Node.is-checked > .Node-self .Node-content, .Node.is-checked > .Node-self .Node-renderedContent {  
 text-decoration: none !important;  
 color: lightgray !important; 
}

You can find this and many other CSS examples on the shared Dynalist I created to help me keep track of all the CSS possibilities.
https://dynalist.io/d/QSP8bOA8H2fdU3SrDg57gmdV

1 Like
#5

Thank you very much WebAlstrom. I think my problem was a self-inflicted one - I applied your code through the stylish extnesion and it didn’t seem to work at first, but I tried disabling the “Dark Reader” browser extension which I use, and then it worked!

Thanks again :wink: