Custom Banners

The Celestial Vault has a frontmatter-driven banner system that lets you put any image or animated loop at the top of any note, then tune its position, fade, and height to taste.

(This is similar to but distinct from the standalone Time Garden banner system — see Changing the Banners for the basic concept. Celestial's implementation adds extra controls and integrates more deeply with the theme.)

The Frontmatter Keys

Add these to any note's frontmatter:

---
banner: "*Some Image.gif*"
banner-y: 30
banner-x: 50
banner-height: 400
banner-fade: -50
banner-display: cover
banner-pixelated: false
content-start: 200
---

Each one:

Banner display in Settings → Celestial Plugin → Banners & images is a preset (Faded, Vivid, or Cinematic) that sets three independent controls you can then fine-tune to taste: Title shadow, Vertical darkening, and Bottom fade, plus a Banner vertical crop default. Whatever you set there is the vault-wide default; a note overrides any single effect with its own banner-shadow, banner-scrim, banner-fade, or banner-y.

Banners also scroll with the page. They sit at the top of the note like a magazine cover and glide away as you read, instead of hovering frozen over your text.

A Common Setup

For a typical journal-style note, this combination works well:

banner: "*Mountain Sunrise.jpg*"
banner-y: 40
banner-height: 360
banner-fade: -50
content-start: 280

The image sits with its sky-portion centered, fades into the page background by ~50%, and the note content starts ~280px from the top, leaving room for the banner without crowding the title.

Where Banner Images Live

Banner images can live anywhere in the vault, but the conventions in Celestial are:

• Daily / monthly / yearly templated banners: Time Garden/06 Templates/Images/[Period] Notes/
• Per-note custom banners: drop the image anywhere — Attachments/, References/, the vault root, etc. — and reference it via wikilink

The banner system resolves wikilink paths automatically.

The Default Art: Animated Pixel Worlds

The daily, monthly, and yearly banners that ship with the vault are animated pixel-art loops in AVIF format, around 180KB each. That single format choice buys a lot:

• Animated by default. Every daily, monthly, and yearly note opens onto a living scene, not a still image.
• Tiny. A comparable animated GIF runs into the megabytes; AVIF delivers the same loop at a fraction of the size, so the whole banner library weighs less than a single old-style GIF and notes open fast.
• Reaches your old notes automatically. The banner engine looks up artwork by name across formats every time a note renders, so notes created before the AVIF art existed show the new loops without any frontmatter edits.

Replacing The Default Banner Art

The daily, monthly, and yearly banner artwork is yours to swap. Settings → Celestial Plugin → Banners & images has one row per surface, each with an Open folder button that opens the right folder in your system file manager. Drop in your own art, keep the file names, done.

The naming conventions:

Format rules, for all three surfaces:

• avif, webp, png, gif, and jpg all work. Name your file TuesdayBanner.png or TuesdayBanner.gif; the engine finds it.
• When several formats exist for the same name, avif wins. So if MondayBanner.avif and MondayBanner.png both sit in the folder, the avif shows. Delete or rename the avif (the shipped default art) if you want your own file to take over.
• For monthly banners, animated beats static: an animated webp or gif takes precedence over a static png of the same number.

This also makes your notes forward compatible: when a future vault update ships refreshed banner art, your existing notes pick it up the same way.

Keeping Existing Notes In Sync

Two commands help when you want to push banner changes onto notes you've already created:

"Refresh journal banners"

Cmd/Ctrl + P → "Refresh journal banners (apply current art to existing notes)"

Re-applies the current banner art and crop settings to your existing daily, monthly, and yearly notes. It's polite about your choices:

• Notes where you picked your own custom banner are skipped entirely
• Your hand-tuned crops (banner-y adjustments and friends) are kept, unless the artwork itself changed
• Safe to run repeatedly; a confirmation dialog summarizes all of this before anything happens

"Banner: move image up / down"

Two commands that nudge the current note's banner crop in steps of 10: "Banner: move image up (−10)" and "Banner: move image down (+10)". Faster than editing banner-y by hand when the horizon sits a touch too low. Bind them to hotkeys if you crop often.

Setting A Banner On An Existing Note

1. Open the note
2. Open its Properties panel (or edit the frontmatter at the top in source mode)
3. Add banner: "*Your Image Name*"
4. Optionally tune banner-y, banner-fade, etc.

The banner appears immediately. No reload needed.

Removing A Banner

Delete the banner: line from the note's frontmatter. (Leaving the other banner-* keys behind is fine — they only do anything when there's a banner to render.)

The note's padding above the title returns to normal automatically (the banner system tracks exactly the space it added, so it cleans up after itself).

Animated Banners

Animated images work as banners just by referencing them:

banner: "*Some Loop.gif*"

Animated AVIF, animated WebP, and GIF all play natively, looping forever, no separate config required. The banner element is also reused across re-renders, so an animated banner keeps playing smoothly instead of restarting from frame one every time the note's metadata refreshes.

How The Banner System Avoids Common Bugs

Banners on Obsidian are tricky: most plugins that try to do this leak padding into other notes, fail to clean up after themselves, break on other themes, or clash with frontmatter rendering modes. Celestial's banner system handles all of these:

• Deduplication: even if multiple events try to apply a banner at once, only one render happens
• Self-tracked spacing: the banner knows exactly how much space it added, so removing it removes only its own padding (never another plugin's)
• Path resolution: both wikilink-style ("*Image.png*") and direct-path-style ("path/to/image.png") banners work
• Theme-proof rendering: the banner's geometry is hardened against other themes' CSS, so it renders at full width and correct size on any community theme, not just Celestial. Switch themes freely; your banners stay intact.

Default Banners On Temporal Notes

If you don't set a banner: value, temporal notes (daily, monthly, Dreamline, yearly) get a banner automatically based on day-of-week / month / year — same logic as standalone Time Garden (Changing the Banners).

You can override the auto-banner on any specific note by adding your own banner: to its frontmatter. Per-note overrides win.

And this works regardless of Obsidian's interface language. A Tuesday note gets Tuesday's banner and Tuesday's colors whether your Obsidian runs in English, German, or Japanese.

Up Next

• Note Lock — the password gate for sensitive notes
• The Celestial Theme — the overall aesthetic the banner sits inside
• Changing the Banners — the standalone Time Garden equivalent (similar but simpler)