Time and time again I see X users asking about creating a timeline in Cornerstone. Truthfully, there are plenty of free and premium plugins that can do this. But what about users that prefer to not use a plugin? Well, how about a simple, clean, and responsive timeline using only Cornerstone and CSS. That’s what I have made here.
Your first step is to create a new section in Cornerstone. For each row, split into two columns and disable marginless columns in the row settings.
The setup is simple: in the first column, place your content. In this example, I have used a Custom Headline, Line, and Text. In the second column, insert a Gap element (I used 25px).
Repeat as many times as needed.
Now comes the magic! Give the entire section the custom class
timeline, and place the following code into Custom CSS. At the bottom of this post is a download link for the complete Cornerstone .csl template file.
Code updated for X version 5.1+ and Pro version 1.2+
Here is a download link containing a Cornerstone template file that you can easily import into your existing page: