Custom Day Styling via Frontmatter

[liamcain]

🌟🏷️ Introducing: Custom Day Styling

As of v1.4.5, you can now style individual days based on the tags in the frontmatter. This, paired with Obsidian's "CSS Snippets" feature allows for some very powerful workflows.

I try my best to example how you can use this feature in the wiki but I'm interested in getting some early feedback.

Open Questions

1. Is reading the #tags enough? Should I make this more flexible and maybe provide a calendar- frontmatter entry?

Currently only the tags entry is read. This means 2 things: 1. tags in the note body are ignored and 2. other frontmatter tags aren't used. This might not be flexible enough. I personally like the lack of ambiguity of frontmatter tags: the tags apply to the whole note (not just a block, for example) and they are easy to add/remove if you're navigating around via the calendar.

2. Is this explanation in the wiki helpful enough to get started?

3. What are some real world use cases that you anticipate using?

[jokysatria]

Sorry if my English is bad.

1. Is reading the #tags enough? Should I make this more flexible and maybe provide a calendar- frontmatter entry?
It's enough I think. But personally I also like if the tags apply to the whole note. It'll enable me to put tag to related content of my daily journal, since I put many things in my daily note. And also it'll enable me to review quickly my daily journal by using search pane. For example, usually I note a daily lesson with tag #wisdom, then in the end of week/month, I review it in the search pane.

But I think it might create a bug, something like this

I just put #wisdom in the frontmatter.

For workaround, I can put double tags, one in the frontmatter and one in the body of note :

2. Is this explanation in the wiki helpful enough to get started?
It's helpful enough for me (thanks)! I think It's enough for who already understand CSS (or at least ever modify CSS). For important day wiki, I think adding comment that "you can change 'flagged' for any tag name you want", will be useful. I mean something like this :

#calendar-container [data-tags~="flagged"]::after {
  content: url('data:image/svg+xml; utf8, <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 55.867 55.867" style="enable-background:new 0 0 55.867 55.867;" xml:space="preserve"> <path d="M55.818,21.578c-0.118-0.362-0.431-0.626-0.808-0.681L36.92,18.268L28.83,1.876c-0.168-0.342-0.516-0.558-0.896-0.558 s-0.729,0.216-0.896,0.558l-8.091,16.393l-18.09,2.629c-0.377,0.055-0.689,0.318-0.808,0.681c-0.117,0.361-0.02,0.759,0.253,1.024 l13.091,12.76l-3.091,18.018c-0.064,0.375,0.09,0.754,0.397,0.978c0.309,0.226,0.718,0.255,1.053,0.076l16.182-8.506l16.18,8.506 c0.146,0.077,0.307,0.115,0.466,0.115c0.207,0,0.413-0.064,0.588-0.191c0.308-0.224,0.462-0.603,0.397-0.978l-3.09-18.017 l13.091-12.761C55.838,22.336,55.936,21.939,55.818,21.578z" fill="yellow" stroke="white"/></svg>');
/*you can change "flagged" with any tag name you want*/
  position: absolute;
  top: -4px;
  right: 4px;
  height: 8px;
  width: 8px;
}

Btw, I just realized that I can tag more than one emoji 😄

3. What are some real world use cases that you anticipate using?

• I use emoji mark in my daily note for emotional/exciting moment that I experience that day.
• I use star (flagged) for upcoming important event (ceremony/celebration/festival)/appointment.

Hope I can use both emoji and star (important date). But for workaround, I can use star from emoji

Thank you again @liamcain, you make writing journal is much joy.

[liamcain]

This is seriously awesome! Thanks for taking the time to test things out and the feedback is super helpful. I'm still treating this as a 'beta' feature (I haven't take the time yet to build my own personal workflow around it) so this feedback will go a long way.

You raised a lot of great points –I hadn't thought about search-ability of tags. I also love the mood tracker example!

Time to make some fixes 😄

[zalenza]

My answers to 1 and 2 are yes, it's enough. I've been using the emojis to track my music practice, which is great! It's really nice to see at a glance "I worked on music everyday last week", or "I practiced mostly guitar and piano." But I'm currently tracking 4 music habits with emoji tags, and I would love to be able to show all of them on the day, even if they're overlapping in a vertical stack. I haven't been able to figure out how to get multiple emojis to show like @jokysatria ...

Edit: I know, the designer in me is also thinking "4 emojis, really? that's going to be a mess!" But in this case I actually would prefer the function over the form. 😆

[jokysatria]

You might want to try dataview plugin for advance tracking. https://github.com/blacksmithgu/obsidian-dataview

[zalenza]

Thanks for the tip. I was using it for a few things, but it's not quite what I'm looking for. I find it really important to visually tie the tracking to the calendar.