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:

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.

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.

CSS for Weebly Timeline Widget

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

.tl{

position:relative;

padding:20px020px;

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:1pxsolid#d4d4d4;

border-radius:5px;

-webkit-box-shadow:01px6pxrgba(0,0,0,0.175);

box-shadow:01px6pxrgba(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:15pxsolid transparent;

border-right:0solid#ccc;

border-bottom:15pxsolid transparent;

border-left:15pxsolid#ccc;

}

.tl>li>.tl-panel:after{

content:" ";

display:inline-block;

position:absolute;

top:27px;

right:-14px;

border-top:14pxsolid transparent;

border-right:0solid#fff;

border-bottom:14pxsolid transparent;

border-left:14pxsolid#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.

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.

About Editorial Staff

16 Comments

Leave your reply.

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 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!

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.

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?

WebNots – A Tech & Web Platform

WebNots is a knowledge sharing platform for webmasters and tech geeks. We have published 1000+ free articles focusing on website building and technology. We share our experience and knowledge through blog articles, demos, eBooks, videos and glossary terms for the benefit of webmasters and tech community.