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.

  1. 01/04/2016This is a timeline created by adapting the code from Elegant Themes blog post.
  2. 01/04/2016You will need to copy the CSS code into your ePanel custom CSS box
  3. 01/04/2016You will need to add a text module and give is a CSS class of dots-list in the custom CSS tab.
  4. 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

Pin It on Pinterest