CSS snippet: Timeline as Callout

[harr]

This CSS snippet uses a Callout to render timelines. It supports headings level 1 to 3, bullet lists, numbered lists and images.

/*
  TIMELINE as Callout 
*/

.callout[data-callout="timeline"] {
    
  --callout-color: var(--callout-info);
  --callout-icon: clock;

  /* links */
  
  & a {
    color: inherit;
    font-weight: inherit;
    text-decoration: none; 
    font-style: inherit;   
    background: none;
    padding-inline: 0;

    /* hashtags */

    &[href^="#"]{
      text-decoration: none;
      padding-inline: .4rem;
    }

    /* show links on hover */

    &:hover {
      text-decoration: underline solid;
      color: inherit;
    }
  } 
  
  /* content */ 

  & .callout-content {

    background-color: none;
    padding: 2rem 0;

    /* H1 as horizontal line */

    & h1 {
      font-weight: var(--font-normal);
      font-size: var(--font-text-size);
      color: var(--text-normal) !important;
      padding: 0 !important;
      margin-right: 1rem !important;
      text-align: right;
      border-top: dotted .1rem;
    }

    /* H2 as box */
      
    & h2 {
      font-weight: var(--font-normal) !important;
      font-size: var(--font-text-size);
      color: var(--text-muted);
      text-align: left !important;
      margin: 0 1rem;
      padding: .2rem 1rem .2rem 1rem;
      border: solid .1rem;
      border-radius: .4rem;
      display: inline-block;
    }  

   /* vertical line */

    & :is(h1, h3, p, ul, ol) {
      margin: 0 0 0 3.2rem;
      border-left: solid .1rem;
      padding: 0 1rem;
      border-color: var(--text-muted);
      font-weight: var(--font-normal);
      color: var(--text-normal);
      font-size: var(--font-text-size);

      /* space before H1 */      
      &:has(+ h1) {
        padding-bottom: 1rem;
      }        

      /* space before H2 */
      &:has(+ h2) {
        padding-bottom: 1.5rem;
      } 
    }

    /* H3 as bullet */
       
    & h3::before {
        border: .4rem solid;
        border-radius: .4rem;
        border-color: var(--text-muted);
        content: "";
        display: block;
        height: 0;
        left: -1.45rem;
        position: relative;
        top: 1rem;
        width: 0;
        z-index: 1;
    }    

    & h3 {
      color: var(--text-normal);
    }

    /* text */

    & :is(p, ol, ul, li) {
      color: var(--text-faint);
    }

    /* images */
    
    & img {
      padding: 1rem;
    }
  }
}

[DanielHorcic]

Hi, I want to ask how can i make this vertical? there is the code section but how do I make it render that way? also, how did you achieve such a styling in the pictures? I use minimal theme and my styling of the timeline looks very different.

Thanks for any reply

[harr]

The CSS snippet should also work with Minimal theme.

How did you install the CSS? Have you checked Obsidian’s help pages? https://help.obsidian.md/Extending+Obsidian/CSS+snippets

[DanielHorcic]

This is what my layout looks like; I do not really mind it, was just wondering how you achieved yours, and how to make the layout to be vertical, too?

I installed it by copy-pasting the code into a text file that I converted to css, just as I do with any other css.

[DanielHorcic]

EDIT:

I figured that there were two “issues” I had somewhere a forgotten snippet piece from old timeline css, and I had only used #H1 → so my timeline with your snippet looked like this.

My bad.

[harr]

Thanks for the update! I did test the snippet in Obsidian’s sandbox with Minimal theme in dark mode. On my desktop it looks like this:

This is the Markdown I used for testing:

> [!timeline] 
> 
> ## 2020
> 
> ### Non in unde sit excepturi qui
> Tenetur eos quis libero et ut quibusdam.
> 
> ### Reprehenderit iusto sit sapiente culpa veritatis quam et reprehenderit eveniet 
> Libero magni natus quibusdam delectus cupiditate aliquam et. Est quis similique ipsum sint autem et mollitia adipisci voluptates unde doloribus quia corrupti quo.
> - eaque at blanditiis molestiae consequuntur
> - Possimus ut et nihil fugit.
>   
> # Magnam vel laboriosam rerum
> 
> ## 2021
>
> ### Quibusdam iusto odio reiciendis dolorem laborum sed eligendi
> Commodi rerum velit dicta placeat pariatur aspernatur quia accusantium. Et et quia aut odio sint consequuntur aliquid ut. Quas saepe sapiente aliquam. Velit iure rerum esse velit nemo et vitae minus.
> Et debitis facilis consequatur porro aliquam accusamus.
> 1. Exercitationem ut culpa nesciunt aliquam 
> 2. omnis quos soluta facilis fuga provident 
> 3. dolorum recusandae distinctio qui.
> 
> ### Voluptates dolore ipsum voluptate corrupti dolor vel eum
>
> ![[640px-Forester_kangaroo_(Macropus_giganteus_tasmaniensis)_juvenile_Esk_Valley 1.jpg]]
>
> ## 2022 
> 
> ### Et adipisci asperiores 
> 
> ### voluptatem iste pariatur.