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

Comments

comments

Divi Freebies

Do you want some Divi FREEBIES?

Join our mailing list to receive the latest news, reviews, examples and Divi Theme FREEBIES.

You have Successfully Subscribed!

Pin It on Pinterest