Timeline for Divi using CSS
After reading the latest blog post at Elegant Themes, titled, 9 Useful Divi CSS Snippets You Can Add To ePanel In Seconds*, i was a bit disappointed to see that No. 6, Add Connected Bullet Lists, wasn’t working for me after pasting the CSS into my ePanel.
So, after a little playing around i managed to get the code to work and added a couple of little changes to get to the demo you see below.
- 01/04/2016This is a timeline created by adapting the code from Elegant Themes blog post.
- 01/04/2016You will need to copy the CSS code into your ePanel custom CSS box
- 01/04/2016You will need to add a text module and give is a CSS class of dots-list in the custom CSS tab.
- 01/04/2016You will then need to set up an ordered list (ol) with list elements (li)and also add a span class for the date
How to add the timeline
To add this timeline to your Divi website you will need to;
1 – Add the following CSS into your ePanel custom CSS box.
/*—- DIVI TIMELINE / DOTS LIST —–*/ .dots-list { width: 100%; } .dots-list ol { padding-left: 150px; position: relative; margin-bottom: 20px; list-style: none !important; } .dots-list ol li { position: relative; margin-top: 0em; margin-bottom: 20px; } .dots-list ol li .date { position: absolute; left: -115px; font-weight: bold; font-size: 1em; top: -2px; } .dots-list ol li:before { content: ""; background: #35a6cb; /*edit line colour*/ position: absolute; width: 2px; top: 5px; bottom: -25px; left: -24px; } .dots-list ol li:after { content: ""; background: #c7d8dd; /*edit circle colour*/ position: absolute; width: 13px; height: 13px; border-radius: 100%; border:2px solid #35a6cb; /*edit circle border colour*/ top: 5px; left: -31px; } .dots-list ol li:last-child:before { content: ""; background: rgba(0, 0, 0, 0); }
2 – Add a text module into your page and then add the following HTML using the text view.
<ol> <li><span class="date">01/04/2016</span>This is your list item content. </li> <li><span class="date">01/04/2016</span>This is your list item content. </li> <li><span class="date">01/04/2016</span>This is your list item content. </li> </ol>
3 – In the text modules custom CSS tab add dots-list into the CSS Class field
Did not work with Divi Version: 3.0.96 but with earlier Versions it works fine!
hi Lethert,
try to add the “dots-list” into the Custom CSS field of the Text module, its works fine on the last Divi version 3.0.98 right now on my website
i hope it’s useful for your site, cheers from south Spain
Hi Gonosso,
I have a return from eleganthemes. The have a bug in Version 3.0.96 an early 3.0.97 and fixed in a later 3.0.97 version.
great Lethert, thanks