Get AI summaries of any video or article — Sign up free
Obsidian - Timelines thumbnail

Obsidian - Timelines

Josh Plunkett·
5 min read

Based on Josh Plunkett's video on YouTube. If you like this content, support the original creators by watching, liking and subscribing to their content.

TL;DR

Use the Timelines plugin’s vertical layout for RPG history: tag each entry note with both a timeline identifier and a timeline-note tag, then drive display via frontmatter date/title/summary and a full image asset path.

Briefing

Obsidian timelines for tabletop RPGs can be built two main ways: with the community “Timelines” plugin (best for a vertical, note-by-note fantasy history), or with a CSS “timeline callout” shipped via the ITS theme (more stable across themes, but manual). The practical takeaway is that the vertical plugin workflow is relatively smooth—tag your timeline notes, supply frontmatter fields like date and title, and the timeline renders with clickable entries—while the horizontal plugin mode is widely unreliable, including broken click-through behavior and inconsistent styling.

The “Timelines” plugin is installed through Obsidian’s Community plugins area, then enabled and configured via tagged notes. For the vertical layout, each timeline entry lives in its own note and must include tags that identify both that it’s a timeline note and which timeline it belongs to (e.g., a timeline identifier like “vertical time”). The plugin then pulls those notes into a single vertical timeline view, ordering entries from oldest to newest. Each entry’s frontmatter supplies the timeline date (where it appears), a title string (what’s shown on the timeline), and a picture path plus a text summary. The picture requirement is strict: it needs a full asset path rather than a Wikilinks-style image reference, and some images may break if the path format is wrong. Updates also aren’t fully live—after edits, the user may need to navigate away and return for the plugin to refresh.

Horizontal timelines are treated as the riskier path. The plugin supports a horizontal mode by adding a “horizontal” tag and specifying start/end date ranges to constrain the visible band. Scrolling works, and date spans can be adjusted, but click-through to the underlying notes appears buggy, and color/overlap behavior is inconsistent. The result is a timeline that can look chaotic but doesn’t reliably let players jump to the corresponding details—making it less suitable for active RPG use.

Because community plugins can stop being maintained, the transcript emphasizes checking maintenance signals before committing. The Timelines plugin shows signs of low activity: the last commit is months old and the issues list contains many reports without comments, which raises the chance of breakage after Obsidian updates.

As an alternative, the ITS theme provides a “timeline callout” CSS feature that works on a single note using a defined syntax. This approach can be enabled within ITS, then copied into a vault as a CSS snippet so it can function even when switching to other themes (like Prism). The callout supports left/right alignment controls and spacing adjustments that visually compress or expand event density along the timeline. Entries can also include links to notes, but the layout isn’t automated—users must update the callout content as history changes.

Overall, the most dependable workflow for fantasy RPG timelines in Obsidian is: use the Timelines plugin for vertical, tag-driven entries if you’re comfortable with plugin risk, or use the ITS timeline callout for a theme-agnostic, CSS-based timeline that trades automation for stability and control.

Cornell Notes

Obsidian timeline management for tabletop RPGs comes down to two approaches. The Timelines community plugin can render a vertical fantasy timeline by collecting notes tagged as timeline entries for a specific timeline name; each entry uses frontmatter fields like date, title, and a full asset path for images. Horizontal mode is less reliable, with broken click-through behavior and inconsistent styling, so it’s treated as a higher-risk option. For a more stable alternative, the ITS theme’s “timeline callout” uses CSS syntax inside a single note, supports left/right alignment and spacing to simulate time density, and can be copied as a CSS snippet to work with other themes. Maintenance checks matter because community plugins can break after Obsidian updates.

How does the Timelines plugin build a vertical fantasy timeline from multiple notes?

Each timeline entry is its own note and must include tags that mark it as a timeline note and also specify which timeline it belongs to (e.g., a timeline identifier like “vertical time”). The timeline page itself uses the plugin’s vertical layout, then filters in the tagged notes. Frontmatter drives what appears: a date field determines where the entry sits on the timeline, a title string is displayed on the timeline card, and a summary text appears in the timeline entry. Images require a full path (e.g., assets folder path), not Wikilinks-style references, and some images may break if the path format is wrong.

Why is horizontal timeline mode treated as unreliable compared with vertical mode?

Horizontal mode requires date ranges (start/end) to constrain the visible band and uses tags to switch the layout. Scrolling and date span visualization work, but clicking entries to open the linked notes appears buggy. Color and overlap behavior is also inconsistent, making it hard to use for dense, interactive timelines where players need to jump to details.

What maintenance risk comes with community plugins, and how does the transcript suggest evaluating it?

Community plugins can become unusable if they stop being updated. The transcript recommends checking the plugin’s last commit date and reviewing the issues list for active fixes. A long gap since the last commit and many unresolved issues without comments are treated as warning signs that the plugin may not survive future Obsidian updates.

How does the ITS timeline callout method differ from the Timelines plugin?

The ITS method uses CSS callout syntax inside a single note rather than collecting many tagged notes. It can be enabled via the ITS theme, and the callout can be copied into the vault as a CSS snippet so it works even with other themes. The timeline’s visual structure is controlled by parameters like left/right alignment and spacing between items, and entries can include links to notes, but the timeline isn’t automatically generated from frontmatter.

What practical steps make the ITS callout work across themes?

The transcript describes copying the raw CSS snippet from the ITS theme repository into the vault’s .obsidian/snippets folder (requiring hidden folders to be visible on Windows). Then, under Appearance settings, the CSS Snippets section can be reloaded/enabled so the timeline callout styles activate even after switching away from ITS. After that, the callout syntax renders correctly under other themes such as Prism.

Review Questions

  1. What frontmatter fields and tag structure are required for vertical timelines to render correctly with the Timelines plugin?
  2. What specific behaviors make horizontal timelines a higher-risk choice in this workflow?
  3. How does the ITS timeline callout achieve theme independence, and what tradeoff does it make versus the plugin approach?

Key Points

  1. 1

    Use the Timelines plugin’s vertical layout for RPG history: tag each entry note with both a timeline identifier and a timeline-note tag, then drive display via frontmatter date/title/summary and a full image asset path.

  2. 2

    Treat horizontal timelines as experimental: scrolling may work, but click-through to notes and styling/overlap behavior can be inconsistent or buggy.

  3. 3

    Before relying on any community plugin, check maintenance signals such as last commit timing and whether issues are being actively addressed.

  4. 4

    For a more stable, theme-agnostic option, use the ITS theme’s timeline callout syntax inside a single note and optionally copy its CSS into .obsidian/snippets.

  5. 5

    The ITS callout supports left/right alignment and spacing controls to visually compress or expand event density, but it requires manual updates rather than automated note aggregation.

Highlights

Vertical timelines with the Timelines plugin work by filtering tagged notes and rendering each entry from frontmatter fields like date and title—images must use full asset paths.
Horizontal timelines may display date spans, but clicking entries to open notes can fail, and color/overlap behavior can be erratic.
The ITS timeline callout turns timelines into a CSS-driven single-note layout that can be reused across themes by installing the snippet into .obsidian/snippets.
Community plugin maintenance is a real dependency: long gaps in commits and unresolved issues raise the chance of breakage after Obsidian updates.

Topics

Mentioned