Timeline using html/css

[darakah]

Hello Everyone,

Trying to create a chronological organization of certain notes using the following html / css code Tryit Editor v3.6 . I could not figure out a way to get it to work in an obsidian note so far and wanted help to see whether it was possible or not.

I also tried to create a separate html file and then embed that local html using an iframe in an obsidian note but it did not work. I know there is something related to accessing local files and so on however I also used a solution to that mentioned here around the forum where instead of using “file:///” using “app://” would fix the issue when it comes to src images (which i am currently using).

Any ideas of how I can get this working?

P.S: I saw the other posts on chronological organizations suggesting to use third party websites to create and then embed it into the note however if possible i would like to avoid that.

Thank you for any help / insight!!!

---

Edit 1:
I understand there are other ways to achieve this and would love to know them. One that i had been using so far was through a borderless table (one of the applications of my previous inquiries regarding borderless tables) which would give something close to the desired outcome.

If using html / css does not work i will try to replicate the above work with <\div> grouping to get something similar however I wanted to know whether there are better / cleaner ways.

---

Edit 2:
To better explain what happened when trying to embed the code after creating a local html file:

1. Using an iFrame with the link copied as is after loading the html into a browser gives an error on the console of Obsidian app.js:1 Not allowed to load local resource:
2. Modifying the link to use app://local instead of file:/// leads to no error showing up on the console but the iframe remains empty
3. Placing the html file inside the vault and using the relative link to it instead ./whatever.html leads to a similar result as the second try: empty iframe and no console error.

[darakah]

Solution:
After some messing around with the code for the timeline mentioned in the post above, I figured out how to write a timeline note using html.

Preview:

It was simply a matter of incorporating the css for each group within the blocks themselves and creating divs to replace the ::after and ::before css conditions.

The used markdown for this note is below:

<div style="content: ''; position: absolute; width: 6px; height: auto;
			background-color: #CCA300; top: 0; bottom: 0; 
			left: 50%; margin-left: -3px;">
</div>

<div style="position: absolute; width: auto; height: auto;
			  background-color: #993333; color: white; border: 0px;
			  padding: 10px 20px; left: 50%; margin-left: -100px;">
	  10-24-203,310 / -5 A.E.
	<div style="content: ''; height: 2px; background: #CCA300; width: 95px; position: absolute; left: -100px;"></div>
	<div style="content: ''; position: absolute; border-style: solid; border-width: 7px 0 7px 20px; 
				border-color: transparent transparent transparent orange; left: -20px;
				transform: translateY(-50%);"></div>
</div>

<div class="container left" style="padding: 10px 20px; 
									 position: relative; 
									 background-color: #ffcc66;
									 width: 33%; border-radius: 14px;">
	  <h2> <a href="OBSIDIAN LINK TO NOTE">Genesis</a> </h2>
	  <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
</div>

<br> <br> <br>

<div style="position: absolute; width: auto; height: auto;
			  background-color: #993333; color: white; border: 0px;
			  padding: 10px 20px; left: 50%; margin-left: -100px;">
	  10-24-203,310 / -5 A.E.
	<div style="content: ''; position: absolute; border-style: solid; border-width: 7px 0px 7px 20px; 
				border-color: transparent transparent transparent orange; left: 196px; 
				transform: rotate(180deg); bottom: 2px;"></div>
	<div style="content: ''; height: 2px; background: #CCA300; width: 100px; position: absolute; left: 215px;"></div>
</div>

<div class="container left" style="padding: 10px 20px; 
									 position: relative;
									 background-color: #ffcc66; left: 800px;
									 width: 33%; border-radius: 14px;">
	  <h2> <a href="OBSIDIAN LINK TO NOTE">Genesis</a> </h2>
	  <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
</div>

Important PS:

• The title of each event in the timeline uses the obsidian link to the note in question allowing to easily view / jump to the event in question.
• To add new events simply copy the block for a time / event and add as much spacing as you want (choose either a left one or a right one as desired)
• IMPORTANT: all the parameters (especially colors / backgrounds / spacing) were tailored for my Obsidian theme and specific note. However, it can be easily adjusted as desired by simply tweaking the parameters.
• !!! there is most certainly a better way to write this snippet making it more responsive and better looking. If anyone does improve it and could share it here would really appreciate it.
• Many improvements I plan to add (especially info summary based on the note and many aesthetic improvements).

[JAG]

Ummm… this is awesome

[darakah]

Dropping this here in case someone stumbles on this post in the future.

Darakah/obsidian-timelines