Responsive Cornerstone Timeline

X Theme and Pro Theme9 Comments

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).

timelineexample
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+

View Demo

Here is a download link containing a Cornerstone template file that you can easily import into your existing page:

Click to download Responsive_Timeline.zip

9
Leave a Reply

avatar
  Subscribe  
Notify of
Antony Hepworth
Antony Hepworth

Thanks for such a helpful X theme site, I’m sure this will be an invaluable resource for me going forward.

Joe Lindsay
Joe Lindsay

Just what I needed for one of my websites, works a treat!

Natalie Oleksyshyn

Hi, I loved your code and used it on the website, but it doesn’t work right with the latest x theme update. Can you please update it?

As you can see, the bars are off on the page: https://boxerwood.org/about/

I would greatly appreciate it!
Natalie

Steve

Hi Michael, I’ve found a few of your items very useful, thanks for taking the time!
I’m having an odd issue with the timeline on this site – https://www.linkglobalservices.co.uk/product-sourcing/ – I’ve used the updated code but we have “leftover” borders on the page that I can’t find anywhere within the code? Have you any ideas what the problem could be?

Steve

Please ignore! It was a cache issue… Doh!!!

Steve

Hi Michael, Apologies, clearing the cache didn’t work. Any ideas would be appreciated?