Theme help: style @due(soon)

[NHR]

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

[jessegrosjean]

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.

[NHR]

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
cheers, Nathan

[jessegrosjean]

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

How do I theme tags and tag values?

First, How do I make a TaskPaper stylesheet! Once you have a custom theme here are some example rules for styling tags: Change default tag color: run[tag] { color: green; } Change default color of only the tag name or tag value part of a tag: run[tagname] { color: blue; } run[tagvalue] { color: red; } Change color of specific tag. In this case the @priority tag is colored red: run[tag="data-priority"] { color: red; } Change color of specific tag and tag value…

[NHR]

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. 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).

[jessegrosjean]

@NHR

I guess I’ll try it and see.

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.

[NHR]

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