Styling with Frontmatter

Styling with Frontmatter

What is frontmatter

Frontmatter is a small snippet of YAML that you can add to the top of your notes that adds additional context about the note. Currently, Obsidian understands 2 frontmatter entries – aliases and tags.

---
aliases:
  - First Day at Job
tags:
  - important
  - work
  - todo
---

Using frontmatter for styling

The calendar plugin will look at the frontmatter of your notes and add that metadata to the table. This means, you can use CSS snippets that target the calendar days themselves.

Currently the calendar reads the tags entry of your metadata and applies it to the calendar days as [data-tags="tag1 tag2"]. This means you can target it with CSS as

/* target days with just #tag1 */
#calendar-container [data-tags~="tag1"] {
}

/* target days with just #tag2 */
#calendar-container [data-tags~="tag2"] {
}

/* target days with any tag */
#calendar-container [data-tags] {
}

Why?

Here are some basic use cases that might be interesting to you. You could use it to temporarily "flag" important days you need to review. You could "star" deadlines or project end dates. You could mark holidays or parties! For past days, maybe you just want to show when you got your new dog! Hopefully this gives you an idea for how versatile this feature can be. If you have any other ideas or cool use cases for it, feel free to send them my way!

Make sure to check out the Example Tag Recipes!