Theme help: style @due(soon)


#1

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


#2

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.


#3

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


#4

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


#5

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


#6

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.


#7

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