Problems with formatting and organizing a timeline with the timeline (revamped)

[stevenagl12]

I am currently dealing with problems with getting a timeline up and running for a D&D campaign. I have been able to set up a preliminary timeline, but it doesn't format the information properly. The "side" events that I have tried as both box and points (although not really sure what the difference between the data-types are as it is missing from the tutorial info) seem to smush all of the information into a long line like this:

On top of that, I am not sure how to import a background image for the events/eras. It doesn't seem to want to actually work with the data-img property when it is inserted into the codeblock. Here is an example of my events:

<div class="ob-timelines"
	data-title="The Unknowable Era"
	data-description="Overgods, Primordials and Titans rule"
	data-classes="green"
	data-color="green"
	data-type="range"
	data-start-date="-60000"
	data-end-date="-31000"
	data-era="DR"
	data-path="'./elemental_chaos.jpg'"
	data-tags="">
	New Event
</div>

#timeline #era0

and

<div class="ob-timelines"
	data-title="The Tearfall"
	data-description="Selûne's asteroids fall upon Abeir-Toril"
	data-classes="green"
	data-color="green"
	data-type="box"
	data-start-date="-31000"
	data-end-date="-31000"
	data-era="DR"
	data-path="'./elemental_chaos.jpg'"
	data-tags="">
	A great cataclysmic event when Abeir-Toril (the cradle of life in Overgod) is split into the separate planets in the Prime Material Plane of Abeir and Toril. Abeir being a twisted version of Toril where the Primordials, Dragons, Dragonborn, Dwarves, Genasi, Halflings and Humans were prominent but without access to magic, and Toril where all races resides in strife and harmony at varying intervals with the powers of magic. It is during this time that the Tears of Selûne (an asteroid belt scattered besides the moon Selûne), sent scattered fragments to earth. Dragons believe that these "tears" were the first dragon eggs created from the mating of Io and Selûne. others believe that these asteroids were just forms of precious metals that accumulated from the conflicts of the Overgods and Titans.
</div>

#timeline #era0

Then I have the actual timeline structured as:

```ob-timeline
tags=era0
```

Am I doing something blatantly wrong here? What am I missing?

(sean - just edited for formatting/readability - 11/27/24 23:07 MDT)

[seanlowe]

Hey, was busy working on something else tonight but from first glance I can say a few things:

1. on the vertical timeline, the only event "types" are range and box
2. we have to use the absolute path (absolute from the start of the vault) when dealing with background images. That was a change that obsidian made back in like, 0.10 or some such.
3. data-classes is only needed if you're specifically passing through additional classes that you've written Obsidian CSS Snippets for. Otherwise it won't do anything. Also, the vertical timeline doesn't support colors yet. It's on the list of things to do (eventually)

I've not seen the events get smushed like that before, that's a new one. I can see your obsidian looks a bit themed? Perhaps there's something that conflicts with the styling from the plugin? Hard to say but you could try (if it's not too arduous) disabling the theme, trying to render the timeline again, and see if it still does it.

P.S. Check out this issue to see examples on finding the absolute path for an attachment

[stevenagl12]

Sorry I am completely knew to Obsidian so I don't know much about how it used to be, and I am still working through the tutorials and documentation.

As for the timeline events, is a box the same thing as a single event point? How do you do single-day events/single year events if not points instead of ranges like multi-day events or multi-year eras?

I have removed my formatting (I was using the ITSTheme, which distorted the timeline. It did also switch the order of the events. So those two problems are resolved. For now, I am using the Atom Theme, which seems to be ok. What other themes can I use for it? On your tutorials, your screen has a black background, which theme or setting for appearance is that?

Also, I do not see the note that you mentioned in the guides that described how to make the event note visible. Is that in there?

[stevenagl12]

Another question I have for you is, why do some of the events added show a green box-like object around the events and others only show purple circles. This seems to be independent of whether I have selected box or range for the data-type.

[seanlowe]

As for the timeline events, is a box the same thing as a single event point?

Yes, essentially. On the vertical timeline, there's no difference between box and point.

How do you do single-day events/single year events if not points instead of ranges like multi-day events or multi-year eras?

For single day / year events, you can set type to box and give it the start date you want and call it good. For multi-day/year, you can set it to range and then give it a start and end date.

What other themes can I use for it?

I don't use any themes with Obsidian so I'm not certain which themes will work versus which ones won't work. The only appearance settings I set are changing my primary color (see below) to some version of blue and turning on dark mode.

why do some of the events added show a green box-like object around the events and others only show purple circles

I use whatever the "primary color" is for the vault (set in Obsidian settings) and then essentially do the opposite for the ranges. Eventually I will add logic so we can set the color of the event/range nodes on the vertical timeline but alas I haven't worked on that yet. You should only see the green (if purple is your normal) on events that are of type range