Understanding the CSS-Snippets

A guide to every CSS snippet that ships with Time Garden — what each one does, what to keep on, what to disable.

Time Garden's beauty isn't an accident. Most of the visual polish — the colored sidebars, the rounded image galleries, the subtle frontmatter handling — comes from a set of CSS snippets that ship with the vault.

This page explains what each one does, so you can decide which to keep on, which to turn off, and which to tweak.

How To See / Toggle Snippets

Open Obsidian Settings (the gear icon)
Click Appearance in the left sidebar
Scroll to CSS snippets (near the bottom)

You'll see all snippets that ship with Time Garden, each with an on/off toggle. Toggling is instant — no restart needed.

The Snippets That Ship With Time Garden

🌞 `time-garden-daily-note-themes.css`

What it does: Color-codes daily notes by weekday and ISO week. Mondays look subtly different from Saturdays. Backgrounds, accent colors, and ratings bars all shift gently.

Keep on: yes, unless you're merging and want plainer notes.

📅 `time-garden-weekly-note-themes.css`

What it does: Same idea for weekly notes. Each week of the year gets a slight color identity (week-1 through week-52).

Keep on: yes.

🌙 `time-garden-monthly-note-themes.css`

What it does: Each month has its own color palette. February cool-blue, July warm-orange, October auburn, etc.

Keep on: yes.

🍂 `time-garden-quarterly-note-themes.css`

What it does: Quarters get seasonal palettes — Q1 winter, Q2 spring, Q3 summer, Q4 autumn.

Keep on: yes.

✨ `time-garden-yearly-note-themes.css`

What it does: Yearly notes get a "summary of the system" palette — refined, neutral, with subtle gold accents.

Keep on: yes.

🌈 `time-garden-colored-sidebar.css`

What it does: When you're in a daily/weekly/monthly note, the file-explorer sidebar tints to match. A subtle but very satisfying signal.

Keep on: yes (unless you find sidebar color-shifts distracting).

🛠️ `time-garden-misc-styles.css`

What it does: General UI refinements — rating bars, button styles, callout colors, subtle paddings. The "polish layer".

Keep on: yes.

✨ `time-garden-tweaks.css`

What it does: Smaller refinements that came in over time — typography fixes, hover states, spacing improvements.

Keep on: yes.

🙈 `time-garden-hide-source-frontmatter.css`

What it does: Hides the raw YAML frontmatter (the --- block at the top of every note) when you're in source mode.

Keep on: most users yes; only off if you regularly need to edit frontmatter directly.

🙈 `time-garden-hide-visible-frontmatter.css`

What it does: Hides the rendered (purple-tinted) frontmatter properties pane when you're in writing/reading view.

Keep on: yes if you're using Time Garden standalone. Off if you're merging Time Garden into a vault where you use frontmatter properties for other things — see this bug for why.

🚫 `time-garden-hide-inline-title.css`

What it does: Hides the auto-generated H1 title that Obsidian shows at the top of each note (because Time Garden's templates have their own beautifully formatted titles).

Keep on: yes for standalone Time Garden. Off if you've turned off Obsidian's "show inline title" elsewhere.

How They Work Together

Each Time Garden note has a list of CSS classes in its frontmatter:

cssclasses:
  - image-borders
  - image-small
  - timegarden-daily
  - monday
  - daily

These classes are how the snippets target only Time Garden notes — not any other notes you might have in the same vault. So if you merge Time Garden into an existing vault, your other notes won't be affected by Time Garden's styling.

Customizing A Snippet

Edit your own copy, not the originals.

The CSS files live in .obsidian/snippets/. If you edit them directly, your changes get overwritten when you update Time Garden. The safer path:

Copy a snippet (e.g., time-garden-tweaks.css) and paste it next to itself with a new name (e.g., karl-personal-tweaks.css)
Edit your copy
Toggle your copy on, the original off

Custom CSS lets you:

Change accent colors
Adjust banner border radius globally
Resize the rating bar
Hide sections you never use (like Q&A or Wheel of Life)
Add a watermark
Change typography

A great resource: the Obsidian CSS Variables Cheatsheet lists every variable Obsidian exposes, all of which Time Garden's CSS builds on.

A Common Question

"Can I delete a snippet entirely?"

Yes. Delete the file from .obsidian/snippets/, refresh Obsidian, and it's gone forever. But:

Toggling off ≠ deleting.

If you just want to stop a snippet from running, toggle it off in Appearance settings. That keeps the file around in case you change your mind, and preserves it through Time Garden updates.

Up Next

Appearance Settings — where you toggle snippets
Adjusting Templates Yourself — for changes that go beyond CSS
Daily note bugs — common visual bugs and fixes

Understanding the CSS-Snippets

On this page