First, thank you so much for this plugin and snippet!
I used the snippet with great success in some notes. However, I was running into issues where I wanted to have both a timeline and a list in the same note. So I modified the snippet CSS so that it only works inside a callout called "timeline". e.g.
>[!timeline]
>- Date
>- First thing that happened
>- Something grand and [[wonderful]] happened first on this date. Happy.
>
>- Date 2
>- Another thing occured
>- A less good thing occured on this date.[^1] Sad.
In the CSS I also altered the cssclass names so that they're more human readable (I have Memory Impairment and there was no way I would remember what line-4 or body-2, etc. would mean). They are as follows:
line-2 -> timeline-line-2
line-3 -> timeline-line-3
line-4 -> timeline-line-4
etc.
body-2 -> timeline-box-2
body-3 -> timeline-box-3
etc.
There's an added cssclass that can be added to the YAML to hide the callout title so it can fit in better with the rest of the note: timeline-hide-title
There's some other minor changes as noted in the CSS comments.
First, thank you so much for this plugin and snippet!
I used the snippet with great success in some notes. However, I was running into issues where I wanted to have both a timeline and a list in the same note. So I modified the snippet CSS so that it only works inside a callout called "timeline". e.g.
In the CSS I also altered the cssclass names so that they're more human readable (I have Memory Impairment and there was no way I would remember what line-4 or body-2, etc. would mean). They are as follows: line-2 -> timeline-line-2 line-3 -> timeline-line-3 line-4 -> timeline-line-4 etc.
body-2 -> timeline-box-2 body-3 -> timeline-box-3 etc.
There's an added cssclass that can be added to the YAML to hide the callout title so it can fit in better with the rest of the note:
timeline-hide-titleThere's some other minor changes as noted in the CSS comments.
Full altered CSS snippet as follows:
CSS Code
```css .callout[data-callout="timeline"] { /* Remove background of callout, change the icon to a clock and give it the same colour as an H2 title */ background: none; --callout-icon: clock; --callout-color: var(--h2-color); } .timeline-hide-title .callout[data-callout="timeline"] .callout-title { /* Add "timeline-hide-title" to YAML cssclass to optionally hide the timeline callout title */ display: none; } /***** Following has been adapted from: https://github.com/George-debug/obsidian-timeline/tree/master/src/style/snippet *****/ .callout[data-callout="timeline"].spaced-lines ul:not(ul ul) > li:nth-child(3n) p { line-height: 1.7rem; } .callout[data-callout="timeline"] { --timeline-active-color: var(--text-accent); /* Had to change this from --timeline-active-color to --text-accent because it was coming up as "not defined" resulting in some funky colours */ } .callout[data-callout="timeline"].active-color-background-modifier-success { --timeline-active-color: var(--background-modifier-success); } .callout[data-callout="timeline"].active-color-background-modifier-error { --timeline-active-color: var(--background-modifier-error); } .callout[data-callout="timeline"].active-color-background-modifier-error-hover { --timeline-active-color: var(--background-modifier-error-hover); } .callout[data-callout="timeline"].active-color-text-accent { --timeline-active-color: var(--text-accent); } .callout[data-callout="timeline"].active-color-text-accent-hover { --timeline-active-color: var(--text-accent-hover); } .callout[data-callout="timeline"].active-color-text-error { --timeline-active-color: var(--text-error); } .callout[data-callout="timeline"].active-color-text-error-hover { --timeline-active-color: var(--text-error-hover); } .callout[data-callout="timeline"].active-color-text-selection { --timeline-active-color: var(--text-selection); } .callout[data-callout="timeline"].active-color-interactive-accent { --timeline-active-color: var(--interactive-accent); } .callout[data-callout="timeline"].active-color-interactive-accent-hover { --timeline-active-color: var(--interactive-accent-hover); } .callout[data-callout="timeline"].active-color-interactive-success { --timeline-active-color: var(--interactive-success); } .callout[data-callout="timeline"] ul:not(ul ul) { display: grid; grid-template-columns: auto auto 1fr; column-gap: 1.5rem; margin: 2.3rem 0; } .callout[data-callout="timeline"] ul:not(ul ul) > li { list-style: none; } .callout[data-callout="timeline"] .list-bullet { /* For some reason bullets still show without this */ display: none; } .callout[data-callout="timeline"] ul:not(ul ul) > li > *:first-child { margin-top: 0; } .callout[data-callout="timeline"] ul:not(ul ul) > li > *:last-child { margin-bottom: 0; } .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n), .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2) { grid-column: 3; } .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1), .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2) { display: flex; flex-direction: column; justify-content: center; padding: 0.4em 0; font-size: 1.3rem; font-weight: bold; } .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1) > *, .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2) > * { font-size: 1.3rem; font-weight: bold; } .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1) { grid-column: 1; position: relative; justify-self: right; text-align: right; } .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::before, .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::after { content: " "; position: absolute; height: 100%; width: 0.5rem; right: -2rem; top: 0; } .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::before { background-color: var(--background-primary); } .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::after { background-color: var(--text-normal); opacity: 0.25; } .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n) { position: relative; margin-bottom: 4.5rem; padding-top: 0.4em; } .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n)::after { content: " "; position: absolute; border-bottom: 0.1rem dashed var(--text-normal); opacity: 0.1; width: 100%; left: 0; bottom: -2.25rem; transform: translateY(50%); } .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n):last-child { margin-bottom: 0.4em; } .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n):last-child::after { display: none; } .callout[data-callout="timeline"] ul:not(ul ul)::before { content: ""; height: 100%; width: 0.5rem; grid-column: 2/span 1; grid-row-start: 1; grid-row-end: span 1000; background-color: var(--text-normal); opacity: 0.1; } .timeline-box-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2), .timeline-box-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n), .timeline-box-3 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2), .timeline-box-3 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n), .timeline-box-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2), .timeline-box-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n) { background-color: var(--background-primary-alt); } .timeline-box-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n), .timeline-box-3 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n), .timeline-box-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n) { margin-bottom: 2.25rem; } .timeline-box-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n):last-child, .timeline-box-3 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n):last-child, .timeline-box-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n):last-child { margin-bottom: 0.4em; } .timeline-box-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n)::after, .timeline-box-3 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n)::after, .timeline-box-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n)::after { display: none; } .timeline-box-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n), .timeline-box-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2), .timeline-box-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n), .timeline-box-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2) { padding: 1.5rem; padding-top: 0.4em; } .timeline-box-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2), .timeline-box-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2) { padding-bottom: 0; } .timeline-box-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1), .timeline-box-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1) { margin-top: 0.4em; } .timeline-box-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2) { border-radius: 1.5rem 1.5rem 0 0; } .timeline-box-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n) { border-radius: 0 0 1.5rem 1.5rem; } .timeline-box-3 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2), .timeline-box-3 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n) { margin-left: 1rem; } .timeline-box-3 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2) { position: relative; background: var(--timeline-active-color); padding-left: 1.5rem; padding-right: 1.5rem; } .timeline-box-3 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2)::before { content: ""; position: absolute; width: 2rem; background: var(--timeline-active-color); top: 0; bottom: 0; left: -1rem; clip-path: polygon(1rem 0, 100% 0, 100% 100%, 1rem 100%, 0 50%); } .timeline-box-3 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n) { padding: 1.5rem; } .timeline-box-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2), .timeline-box-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n) { border-left: 0.3rem solid var(--timeline-active-color); } .timeline-line-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::before, .timeline-line-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::after { right: -2.2rem; top: 50%; transform: translateY(-50%); border-radius: 50%; } .timeline-line-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::before { height: 1.2rem; width: 1.2rem; } .timeline-line-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::after { background: transparent; border: 0.2rem solid var(--text-normal); height: 0.8rem; width: 0.8rem; opacity: 0.15; } .timeline-line-2 .callout[data-callout="timeline"] ul:not(ul ul)::before { width: 0.2rem; opacity: 0.15; } .timeline-line-3 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::before { background: var(--timeline-active-color); height: 1rem; width: 1rem; border: 0.3rem solid var(--background-primary); right: -2.45rem; top: 50%; transform: translateY(-50%); border-radius: 50%; } .timeline-line-3 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::after { background: transparent; } .timeline-line-3 .callout[data-callout="timeline"] ul:not(ul ul)::before { width: 0.3rem; opacity: 0.15; } .timeline-line-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::before, .timeline-line-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::after { top: 50%; transform: translateY(-50%); border-radius: 50%; } .timeline-line-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::before { background: var(--text-normal); height: 1.3rem; width: 1.3rem; right: -2.225rem; } .timeline-line-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::after { opacity: 1; background: var(--timeline-active-color); height: 0.85rem; width: 0.85rem; right: -2rem; } .timeline-line-4 .callout[data-callout="timeline"] ul:not(ul ul)::before { opacity: 1; width: 0.15rem; background-color: transparent; background-image: linear-gradient(var(--text-normal) 60%, rgba(255, 255, 255, 0) 0%); background-position: right; background-size: 0.15rem 1.5rem; background-repeat: repeat-y; } .timeline-line-5 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::before, .timeline-line-5 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::after { top: 50%; } .timeline-line-5 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::before { width: 3rem; height: 3rem; right: -3.1rem; transform: translateY(-50%); } .timeline-line-5 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::after { width: 1rem; height: 1rem; right: 0; transform: translateY(-50%) translateX(2.1rem) rotate(45deg); } .timeline-line-5 .callout[data-callout="timeline"] ul:not(ul ul)::before { width: 0.2rem; opacity: 0.25; } ```Thanks again! :)