Theme help: style @due(soon)

Forgive the newbie question. I’d like to create some @due tags that are non specific. For example, something like:
- Learn CSS @due(soon)
where either part or all of the line (including the tag) would be styled.

I’ve successfully changed a few things but my suspicion is that I’m not getting the result I want because there is something special about the way “due” treats it’s argument in parentheses. Or perhaps it’s because I was hacking a nice Omnifocus theme that i found and maybe there is a conflict somewhere.

Anyhow, if anyone could point me in the right direction, I’d appreciate it.

Thanks, Nathan

These rules demonstrate some of the ways you can do things:

// Any item with a @due tag is red
item[data-due] {
  color: red;

// Any item with a @due tag and associated "soon" value is green
item[data-due=soon] {
  color: green;

// Any item with a @due tag and associated "today" value is green
item[data-due=today] {
  color: blue;

You could alternatively color the tags (instead of item text), but I think item text is probably what you want in this case.

Thanks! This is super helpful! Just for my own education (and since you peaked my curiosity, what is the syntax to color the tags only? I tried to RTFM but probably just didn’t get it :stuck_out_tongue:
cheers, Nathan

Glad to help, see this post for some tag styling options:

Thanks Jesse. Yes, I spent some time on that post. I guess ultimately the thing I’m stuck on is [tag] vs. [tagname]. For example, I’m assuming that due is a tag. So in this case would one append the string name to the tag inside the brackets like so? run[duename]. I guess I’ll try it and see. :slight_smile: It just seems counterintuitive.

Anyhow, sorry for all the rookie questions. It’s way below your pay-grade and I due appreciate all the guidance (pun intended).

Yes… remember if you edit the current theme file your changes are automatically reloaded every time you save … so easy to test.

To highlight @due tags in a specific color you would want:

run[tag="data-due"] {
  color: red;

Internally the name for any @tag in your document is that tags name in lowercase with “data-” appended to the front of it. So in your document it’s @due but when referring to it in the theme or scripting API it’s called data-due.

Aaaahhh……! That’s the piece I was missing. Thank you so much! —N