Turbie's version of Timeline

Past Update:

22 July 2026
Release.

This is the modified version of Robert Birming's Timeline. If you are already using one of the Robert's bear design style, you might want to use his instead.

Timeline in action.

At the time of this posting, 22 Jul, 2026 : This version does not require bearming token if you use your own design (including the default built-in themes on bear). Some of the codes is taken from Robert's version (it's modified version after all).

You can view the live demo here as I progress the page with more and more thoughts.

Click this to view it's CSS:

CSS Code:

/*thoughts Timeline*/

.thoughts {
    margin-block: 35px;
}

.thoughts ul {
    list-style: none;
    font-size: 21px;
    padding: 0;
    margin: 0;
    margin-left: 25px;
    line-height: 1.04;
    position: relative;
}

.thoughts ul::before {
    content: "";
    position: absolute;
    inset-block: 8px;
    inset-inline-start: 9.2px;
    border: 1px solid color-mix(in srgb, var(--text-color)22%, transparent);
    width: 1px;
}

.thoughts li {
    position: relative;
    padding-inline-start: 28px;
    margin-block: 22px; 
}

.thoughts li::before {
    content: "";
    position: absolute;
    inset-block: 3.04px;
    inset-inline-start: 4.32px;
    width: 10px; 
    height: 9.35px;
    border: 1px solid color-mix(in srgb, var(--text-color)25%, transparent);
    background: var(--bg-status);
    border-radius: 999px;
}

.thoughts li > :last-child {
    margin-block-end: 0;
}

.thoughts h4 {
    margin: 0;
    padding-block-end: 5px;
    font-size: 14.5px;
    line-height: 1.04;
    font-weight: bold;
    letter-spacing: 1.15px;
    text-transform: uppercase;
    color: var(--link-color);
}

How to Use

The code above needs to paste it into the Theme page.

And then you'll need to paste the HTML markup (below) in a page (it can be a new page or existing one) and keep adding more. And as long as you keep the format within the <div class="thoughts"></div> the same as shown, the code will automatically will do it (the line with the dot thingy) for you.

And best part? You don't need to keep adding <div> class individually (as shown below).

If you want to add a new "short post" within the timeline, all you'll need to do is copy/add the #### Your header and the text accompanied below, either above (descending order) or below (ascending order) the existing ones.

Use case: Short Thoughts that is not post-worthy, blog's updates/changelog or current status¹.

Markup HTML:

<div class="thoughts">

#### 22 July 2026
Your text below.

#### 20 July 2026
Even more text.

#### 31 June 2026
I love McDonald's! I love it because of this and that.

#### 17 June 2026
Here's a text about that.

#### 04 June 2026
The start of timeline!

</div>

Happy blogging!

Only if you're comfortable sharing full history of your current status of whereabouts.↩