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.
-
2015
Timeline Event 5
Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.
-
2014
Timeline Event 4
Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.
-
2013
Timeline Event 3
Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.
-
2012
Timeline Event 2
Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.
-
2011
Timeline Event 1
Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.
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.
Related: How to add horizontal and vertical timeline in WordPress site?
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.
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.
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.
18 Comments
Leave your reply.