Changing the Banners

The rotating banner at the top of every Time Garden note is one of the most loved (and most asked-about) parts of the system. This page covers how to swap them, add your own, and fine-tune their placement.

Where Banners Live

All banner images are stored in:

06 Templates/Images/
├── Daily Notes/      ← One per weekday
├── Weekly Notes/     ← Rotates every 4 weeks
├── Monthly Notes/    ← One per month
├── Quarterly Notes/  ← One per quarter
├── Yearly Notes/     ← One per year

Each folder contains image (or video) files matched by name.

How A Banner Gets Picked

Time Garden's banner system is filename-driven. When a daily note is created, its template runs a small piece of logic:

"For a Monday, look in 06 Templates/Images/Daily Notes/ for a file called MondayBanner.gif. If not there, try MondayBanner.jpg. Then .jpeg. Then .png. Then .webp. Use the first one found."

So to swap a Monday banner:

1. Drop a new image into 06 Templates/Images/Daily Notes/
2. Name it MondayBanner.gif (or .jpg, .png, .webp)
3. Delete the existing MondayBanner.<old-extension> file
4. New daily Mondays now use your image

The Banners-Per-Period Cheat Sheet

(Exact filenames may vary slightly between Time Garden versions — check what's in your Images folders for the source of truth.)

Existing Notes Don't Auto-Update

So the easy path: swap files, keep filenames the same.

Adding A Personal Banner For The Welcome Dashboard

The Welcome Dashboard's banner is set in its frontmatter:

banner:
  - - DashboardBanner.gif
banner-y, y: 10
banner-x, x: 30
banner-height: 400

To change it:

1. Drop your new image into 06 Templates/Images/ (or any folder you like)
2. Edit the banner: line of 00 Dashboard/Welcome.md to point to it
3. Save

Same approach for any individual note — you can override the rotating banner by editing that note's frontmatter directly.

Tuning Banner Positioning

Each note's frontmatter has these keys:

banner-y: 10           # vertical alignment (0 = top, 50 = center, 100 = bottom)
banner-x: 30           # horizontal alignment
content-start: 200     # how far down the page content starts
banner-display: cover  # cover | contain | repeat
banner-repeat: true
banner-height: 400     # in pixels
banner-fade: -75       # how strong the fade-to-page is
banner-radius: 25      # corner roundness

Tweak any of these to taste. Different banners need different banner-y values to look right (a face shouldn't get clipped at the eyes).

The Daily template ships with per-weekday banner-y values already tuned, because Monday's image needs different positioning than Saturday's.

Using Videos / GIFs / MP4s As Banners

Time Garden supports animated banners. The Welcome Dashboard ships with one out of the box.

To use a video file:

1. Drop it into 06 Templates/Images/
2. Reference it the same way — banner: - - YourVideo.mp4
3. The Pexels Banner plugin renders it inline, autoplay, muted, looping

Videos can be huge — keep them under 5–10 MB if you can, and prefer formats like .mp4 over .mov.

Where To Find Free Banner Images

• Pexels (the plugin's namesake — free, beautiful, no attribution needed)
• Unsplash
• Pixabay
• Giphy for animated banners

Search for aesthetic, ambient, seasonal, or mood-specific keywords for results that fit Time Garden's vibe.

Up Next

• The Welcome Dashboard — the most-customized banner spot
• Adjusting Templates Yourself — modifying the banner-selection logic
• Understanding the CSS-Snippets — controlling how banners fade into the page