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