How to Add Timeline Widget in Weebly Site?

Timeline helps to describe the summary of stories happened over the period of time. It can be used something like a milestone chart. Bootstrap is a popular frontend framework allows to create responsive timeline widget that can be inserted on your Weebly site. In this article we will explain how to add timeline widget in Weebly site to showcase events flow happened during past few years.

Below is how the Bootstrap timeline widget will look like and you can view the live demo here.

Bootstrap Vertical Timeline Widget

Features of the Timeline Widget

  • Inspired by the Bootstrap framework and modified to suit on Weebly site.
  • Fully responsive on all devices.
  • Color of event titles and content can be customized as per your need.
  • Font size and weight of the titles and content can be customized as you need.

The above demo shows the years and events as an example. you can change the content to anything you would like to showcase.

Add Timeline Widget in Weebly Site

The timeline widget needs two component – CSS and HTML, you don’t need any JavaScript for this widget. Adding CSS and HTML in your Weebly is very easy task.

  • Add CSS code for the widget
  • Add HTML code for the widget

Adding CSS for Timeline Widget

You actually don’t need to use the complete Bootstrap CSS file. Just need the widget code as given below. There are many ways to add CSS in your Weebly site. The best way to add site wide is to paste the below code in “main.less” file.

Related:  Bootstrap 4 Cards Tutorial

Navigate to “Themes” tab and click on the “Edit HTML / CSS” button on lower left corner. This will take you to Weebly code editor. Find “main.less” file under “Styles” section and paste this code at the bottom of the existing code. Save your changes and exit code editor.

.tl {
position: relative;
padding: 20px 0 20px;
list-style: none;
}

.tl:before {
content: " ";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 3px;
margin-left: -1.5px;
background-color: #eeeeee;
}

.tl > li {
position: relative;
margin-bottom: 20px;
list-style-type: none !important;
}

.tl > li:before,
.tl > li:after {
content: " ";
display: table;
}

.tl > li:after {
clear: both;
}

.tl > li:before,
.tl > li:after {
content: " ";
display: table;
}

.tl > li:after {
clear: both;
}

.tl > li > .tl-panel {
float: left;
position: relative;
width: 40%;
padding: 20px;
border: 1px solid #d4d4d4;
border-radius: 5px;
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,0.175);
box-shadow: 0 1px 6px rgba(0,0,0,0.175);
}

.tl-body {
font-size: 18px;
line-height: 26px;
color: rgba(121, 112, 112, 0.71);
}

.tl > li > .tl-panel:before {
content: " ";
display: inline-block;
position: absolute;
top: 26px;
right: -15px;
border-top: 15px solid transparent;
border-right: 0 solid #ccc;
border-bottom: 15px solid transparent;
border-left: 15px solid #ccc;
}

.tl > li > .tl-panel:after {
content: " ";
display: inline-block;
position: absolute;
top: 27px;
right: -14px;
border-top: 14px solid transparent;
border-right: 0 solid #fff;
border-bottom: 14px solid transparent;
border-left: 14px solid #fff;
}

.tl > li > .tl-badge {
z-index: 1;
position: absolute;
top: 16px;
left: 50%;
width: 50px;
height: 50px;
margin-left: -25px;
border-radius: 50% 50% 50% 50%;
text-align: center;
font-size: 1.4em;
line-height: 50px;
color: #fff;
background-color: #999999;
}

.tl > li.tl-inverted > .tl-panel {
float: right;
}

.tl > li.tl-inverted > .tl-panel:before {
right: auto;
left: -15px;
border-right-width: 15px;
border-left-width: 0;
}

.tl > li.tl-inverted > .tl-panel:after {
right: auto;
left: -14px;
border-right-width: 14px;
border-left-width: 0;
}

.tl-badge {
font-size: 18px !important;
font-weight: bold;
}

.tl-badge.primary {
background-color: #2e6da4 !important;
}

.tl-badge.success {
background-color: #3f903f !important;
}

.tl-badge.warning {
background-color: #f0ad4e !important;
}

.tl-badge.danger {
background-color: #d9534f !important;
}

.tl-badge.info {
background-color: #5bc0de !important;
}

.tl-title {
margin-top: 0;
margin-bottom: 10px;
color: rgba(45, 45, 72, 0.44);
font-size: 20px;
}

@media screen and (max-width: 380px) {
.tl > li > .tl-panel {
width:25% !important;
}
}
@media screen and (max-width: 800px) {
.tl > li > .tl-panel {
width:33%;
}
}

Adding HTML Code

Choose the page under “Pages” tab and go the content area on which you want to add the timeline. Drag and drop an “Embed Code” element and paste the below HTML code inside the embed code element.

<ul class="tl">
<li>
<div class="tl-badge success">
2015
</div>
<div class="tl-panel">
<div class="tl-heading">
<h4 class="tl-title">Timeline Event</h4>
</div>
<div class="tl-body">
<p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p>
</div>
</div>
</li>
<li class="tl-inverted">
<div class="tl-badge warning">
2014
</div>
<div class="tl-panel">
<div class="tl-heading">
<h4 class="tl-title">Timeline Event</h4>
</div>
<div class="tl-body">
<p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p>
</div>
</div>
</li>
<li>
<div class="tl-badge danger">
2013
</div>
<div class="tl-panel">
<div class="tl-heading">
<h4 class="tl-title">Timeline Event</h4>
</div>
<div class="tl-body">
<p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p>
</div>
</div>
</li>
<li class="tl-inverted">
<div class="tl-badge">
2012
</div>
<div class="tl-panel">
<div class="tl-heading">
<h4 class="tl-title">Timeline Event</h4>
</div>
<div class="tl-body">
<p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p>
</div>
</div>
</li>
<li>
<div class="tl-badge info">
2011
</div>
<div class="tl-panel">
<div class="tl-heading">
<h4 class="tl-title">Timeline Event</h4>
</div>
<div class="tl-body">
<p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p>
</div>
</div>
</li>
</ul>

Customizing the Timeline Widget

As you can see, the HTML part is self-explanatory containing three simple components:

  • Badge – indicating the year.
  • Title – heading timeline event.
  • Body – the description of the event.
Related:  5 Reasons Why WordPress is Not Good Choice for You

Replace the dummy content with your own content.

Coming to CSS part, you can use some of the below suggestions to adjust the widget properly on desktop and mobile devices.

  • Basically Bootstrap classes are used to define the colors for the year. For example, “.tl-badge.success” has the background color of green to indicate the success (#3f903f). You can change the colors of these classes (primary, success, warning, danger and info) to your any color of your wish.
  • Other attributes like background color, font size, color and shadow can be adjusted as per the need.
  • The major problem you may face when placing the widget in Weebly site is that the alignment of the timeline box with reference to the center line. Look for the class “.tl > li > .tl-panel” and the current width is defined as “40%” to suit on this page. You may need to increase or decrease the width based on your layout to align with the center line.
  • We have used @media CSS rule to adjust the width on iPad with the (max-width: 800px). The width of the timeline widget is set as “33%”. You can adjust this media query and width for better alignment on iPad.
  • Similarly on iPhone and other mobile devices, the media query (max-width: 380px) decides the timeline width as “25%”. You can adjust this also as per your need.
Recommended Articles:

18 thoughts on “How to Add Timeline Widget in Weebly Site?”

  1. Hello,
    I’ve tried to read through this comment section to get rid of the bullet points in the timeline widget, but no luck. Any suggestions as to how to remove these?

    Reply
    • As replied in the previous comments, bullet style is defined in the “list-style-type” property of li/ul elements. Right click and use inspect element to check which style is adding the bullet.

      Reply
  2. Iʻm trying to follow this comment thread to get rid of the bullet points but do not understand how to fix the issue after trying to follow the suggestion. Could you please help in further explaining how to get rid of the bullet points?

    “The bullet points due to list ‘li’ are showing up despite the list-style-type being set to none. Any ideas how to fix this?
    Thanks!

    !important is used to prioritize over the theme’s style. Could be that your theme style also has !important hence taking precedence. Check in the code editor and change the theme style to remove it.”

    Thank you!!!

    Reply
  3. The bullet points due to list ‘li’ are showing up despite the list-style-type being set to none. Any ideas how to fix this?

    Thanks!

    Reply
    • !important is used to prioritize over the theme’s style. Could be that your theme style also has !important hence taking precedence. Check in the code editor and change the theme style to remove it.

      Reply
  4. Hi! I’d like to put another panel on the opposite side of the line (two panels per date). How would I go about doing this?

    I noticed that panels on the left are in and on the right they are , but it seems like the panels should go in the same . How would you invert a panel and not the whole group?

    Reply
    • On the li class use “tl-inverted” to add the block on right hand side. Just use li without any CSS class will add the content on left side.

      Reply
  5. Thank you for this. To add additional timeline dates, would you copy and paste the code and edit as necessary? Will this scroll later when the site is published? I tried copying and pasting and it appeared to work but I couldn’t scroll on the site. Does this make sense? I am in way over my head trying to help my daughter add a timeline to her site for a class!

    Reply
    • Yes, copy the block between open and closing li tags and add it before closing /ul tag. Based on the li block you have selected, it should add the content either right or left side of the center line.
      Hope this helps.

      Reply
  6. Thank you for this! It’s looking great on my site, with the exception that it’s not adjusting correctly on the mobile devices. The navigation bar and the CTA button stretch the full length of the screen, but the body of the page does not. It appears as gray “dead space”. I tried adjusting the @media percentages (both higher and lower) but haven’t been able to get anything to work. Any help?

    Reply
  7. I tried this (followed step-by-step) but all that happened was it simply displayed the data in plain text. no graphics at all.

    Reply

Leave a Comment