[Share] Timeline Collection

tuanphan · February 16, 2021

Site URL: https://tuanphan.squarespace.com/timeline-01?noredirect

How to

This can work with All Plans (Trial, Personal, Business...)

1. Add a Code Block > Paste the code

<ol class="t-timeline">
  <li>
    Point 1
    <span class="details">
      Description of point 1
    </span>
  </li>
  <li>
    Point 2
    <span class="details">
      Description of point 2
    </span>
  </li>
  <li>
    Point 3
    <span class="details">
      Description of point 3
    </span>
  </li>
</ol>

2. Add this to Design > Custom CSS

/* Timeline CSS */
ol.t-timeline {
	position: relative;
	display: block;
	margin: 100px;
	height: 4px;
	background: #9b2;
}
ol.t-timeline::before,
ol.t-timeline::after {
	content: "";
	position: absolute;
	top: -8px;
	display: block;
	width: 0;
	height: 0;
  border-radius: 10px;
	border: 10px solid #9b2;
}
ol.t-timeline::before {
	left: -5px;
}
ol.t-timeline::after {
	right: -10px;
	border: 10px solid transparent;
	border-right: 0;
	border-left: 20px solid #9b2;
  border-radius: 3px;
}

/* ---- Timeline elements ---- */

.t-timeline li {
	position: relative;
	top: -77px;
	display: inline-block;
	float: left;
	width: 150px;
	transform: rotate(-45deg);
	font: bold 14px arial;
}
.t-timeline li::before {
	content: "";
	position: absolute;
	top: 3px;
	left: -29px;
	display: block;
	width: 6px;
	height: 6px;
	border: 4px solid #9b2;
	border-radius: 10px;
	background: #eee;
}

/* ---- Details ---- */

.details {
	display: none;

	position: absolute;
	left: -85px;
	top: 60px;
	padding: 15px;
	border-radius: 3px;
	border-right: 2px solid rgba(0,0,0,.1);
	border-bottom: 2px solid rgba(0,0,0,.1);
	transform: rotate(45deg);
	font: 12px arial;
	background: #fff;
}
.details::before {
	content: "";
	position: absolute;
	left: 10px;
	top: -9px;
	display: block;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-bottom-color: #fff;
	border-top: 0;
}

/* ---- Hover effects ---- */

.t-timeline li:hover {
	cursor: pointer;
  color: #28e;
}
.t-timeline li:hover::before {
	top: 1px;
	left: -31px;
	width: 8px;
	height: 8px;
	border-width: 5px;
	border-color: #28e;
}
.t-timeline li:hover .details {
	display: block;
  color: #444;
}

3. Customize

Timeline Line Color, Size. Find this code

ol.t-timeline {
    position: relative;
    display: block;
    margin: 100px;
    height: 4px;
    background: #9b2;
}

Point 1, Point 2, Point 3 color

.t-timeline li:hover {
    cursor: pointer;
    color: #28e;
}

Circle Color/Hover color

.t-timeline li::before {
    content: "";
    position: absolute;
    top: 3px;
    left: -29px;
    display: block;
    width: 6px;
    height: 6px;
    border: 4px solid #9b2;
    border-radius: 10px;
    background: #eee;
}
.t-timeline li:hover::before {
    top: 1px;
    left: -31px;
    width: 8px;
    height: 8px;
    border-width: 5px;
    border-color: #28e;
}

Description of point 1, point 2, point 3

.details {
    display: none;
    position: absolute;
    left: -85px;
    top: 60px;
    padding: 15px;
    border-radius: 3px;
    border-right: 2px solid rgba(0,0,0,.1);
    border-bottom: 2px solid rgba(0,0,0,.1);
    transform: rotate(
45deg
);
    font: 12px arial;
    background: #fff;
}
.t-timeline li:hover .details {
    display: block;
    color: #444;
}

Notes

Code by Anders Grimsrud - Codepen
Tested on SS 7.1

Edited February 16, 2021 by tuanphan
change my mind

creedon · February 16, 2021

Nice!

tuanphan · February 16, 2021

Timeline 02.

Demo (Password: abc)

1. Add a Code Block > Paste this code

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
  
<!-- The Timeline -->

<ul class="timeline">

	<!-- Item 1 -->
	<li>
		<div class="direction-r">
			<div class="flag-wrapper">
				<span class="flag">Freelancer</span>
				<span class="time-wrapper"><span class="time">2013 - present</span></span>
			</div>
			<div class="desc">My current employment. Way better than the position before!</div>
		</div>
	</li>
  
	<!-- Item 2 -->
	<li>
		<div class="direction-l">
			<div class="flag-wrapper">
				<span class="flag">Apple Inc.</span>
				<span class="time-wrapper"><span class="time">2011 - 2013</span></span>
			</div>
			<div class="desc">My first employer. All the stuff I've learned and projects I've been working on.</div>
		</div>
	</li>

	<!-- Item 3 -->
	<li>
		<div class="direction-r">
			<div class="flag-wrapper">
				<span class="flag">Harvard University</span>
				<span class="time-wrapper"><span class="time">2008 - 2011</span></span>
			</div>
			<div class="desc">A description of all the lectures and courses I have taken and my final degree?</div>
		</div>
	</li>
  
</ul>

2. Add to Design > Custom CSS

.timeline {	
  color: rgb(50,50,50);
  font-family: 'Open Sans', sans-serif;
  font-size: 112.5%;
  line-height: 1.6em;
}

/* ================ The Timeline ================ */

.timeline {
  position: relative;
  width: 660px;
  margin: 0 auto;
  margin-top: 20px;
  padding: 1em 0;
  list-style-type: none;
}

.timeline:before {
  position: absolute;
  left: 50%;
  top: 0;
  content: ' ';
  display: block;
  width: 6px;
  height: 100%;
  margin-left: -3px;
  background: rgb(80,80,80);
  background: -moz-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
  background: -webkit-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: -o-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: -ms-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: linear-gradient(to bottom, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  
  z-index: 5;
}

.timeline li {
  padding: 1em 0;
}

.timeline li:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.direction-l {
  position: relative;
  width: 300px;
  float: left;
  text-align: right;
}

.direction-r {
  position: relative;
  width: 300px;
  float: right;
}

.flag-wrapper {
  position: relative;
  display: inline-block;
  
  text-align: center;
}

.flag {
  position: relative;
  display: inline;
  background: rgb(248,248,248);
  padding: 6px 10px;
  border-radius: 5px;
  
  font-weight: 600;
  text-align: left;
}

.direction-l .flag {
  -webkit-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  -moz-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}

.direction-r .flag {
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}

.direction-l .flag:before,
.direction-r .flag:before {
  position: absolute;
  top: 50%;
  right: -40px;
  content: ' ';
  display: block;
  width: 12px;
  height: 12px;
  margin-top: -10px;
  background: #fff;
  border-radius: 10px;
  border: 4px solid rgb(255,80,80);
  z-index: 10;
}

.direction-r .flag:before {
  left: -40px;
}

.direction-l .flag:after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  height: 0;
  width: 0;
  margin-top: -8px;
  border: solid transparent;
  border-left-color: rgb(248,248,248);
  border-width: 8px;
  pointer-events: none;
}

.direction-r .flag:after {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  height: 0;
  width: 0;
  margin-top: -8px;
  border: solid transparent;
  border-right-color: rgb(248,248,248);
  border-width: 8px;
  pointer-events: none;
}

.time-wrapper {
  display: inline;
  
  line-height: 1em;
  font-size: 0.66666em;
  color: rgb(250,80,80);
  vertical-align: middle;
}

.direction-l .time-wrapper {
  float: left;
}

.direction-r .time-wrapper {
  float: right;
}

.time {
  display: inline-block;
  padding: 4px 6px;
  background: rgb(248,248,248);
}

.desc {
  margin: 1em 0.75em 0 0;
  
  font-size: 0.77777em;
  font-style: italic;
  line-height: 1.5em;
}

.direction-r .desc {
  margin: 1em 0 0 0.75em;
}

/* ================ Timeline Media Queries ================ */

@media screen and (max-width: 660px) {

.timeline {
 	width: 100%;
	padding: 4em 0 1em 0;
}

.timeline li {
	padding: 2em 0;
}

.direction-l,
.direction-r {
	float: none;
	width: 100%;

	text-align: center;
}

.flag-wrapper {
	text-align: center;
}

.flag {
	background: rgb(255,255,255);
	z-index: 15;
}

.direction-l .flag:before,
.direction-r .flag:before {
  position: absolute;
  top: -30px;
	left: 50%;
	content: ' ';
	display: block;
	width: 12px;
	height: 12px;
	margin-left: -9px;
	background: #fff;
	border-radius: 10px;
	border: 4px solid rgb(255,80,80);
	z-index: 10;
}

.direction-l .flag:after,
.direction-r .flag:after {
	content: "";
	position: absolute;
	left: 50%;
	top: -8px;
	height: 0;
	width: 0;
	margin-left: -8px;
	border: solid transparent;
	border-bottom-color: rgb(255,255,255);
	border-width: 8px;
	pointer-events: none;
}

.time-wrapper {
	display: block;
	position: relative;
	margin: 4px 0 0 0;
	z-index: 14;
}

.direction-l .time-wrapper {
	float: none;
}

.direction-r .time-wrapper {
	float: none;
}

.desc {
	position: relative;
	margin: 1em 0 0 0;
	padding: 1em;
	background: rgb(245,245,245);
	-webkit-box-shadow: 0 0 1px rgba(0,0,0,0.20);
	-moz-box-shadow: 0 0 1px rgba(0,0,0,0.20);
	box-shadow: 0 0 1px rgba(0,0,0,0.20);
	
  z-index: 15;
}

.direction-l .desc,
.direction-r .desc {
	position: relative;
	margin: 1em 1em 0 1em;
	padding: 1em;
	
  z-index: 15;
}

}

@media screen and (min-width: 400px) and (max-width: 660px) {

.direction-l .desc,
.direction-r .desc {
	margin: 1em 4em 0 4em;
}

}

3. How to customize

Vertical Line: Size, color,.. Find this CSS code

.timeline:before {
    position: absolute;
    left: 50%;
    top: 0;
    content: ' ';
    display: block;
    width: 6px;
    height: 100%;
    margin-left: -3px;
    background: rgb(80,80,80);
    background: -moz-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
    background: -webkit-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
    background: -o-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
    background: -ms-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
    background: linear-gradient(to bottom, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
    z-index: 5;
}

Freelancer, Apple Inc...box

.flag {
    position: relative;
    display: inline;
    background: rgb(248,248,248);
    padding: 6px 10px;
    border-radius: 5px;
    font-weight: 600;
    text-align: left;
}

Red/white circle

.direction-l .flag:before, .direction-r .flag:before {
    position: absolute;
    top: 50%;
    right: -40px;
    content: ' ';
    display: block;
    width: 12px;
    height: 12px;
    margin-top: -10px;
    background: #fff;
    border-radius: 10px;
    border: 4px solid rgb(255,80,80);
    z-index: 10;
}

Time (2013 - present...)

.time {
    display: inline-block;
    padding: 4px 6px;
    background: rgb(248,248,248);
}

and

.time-wrapper {
    display: inline;
    line-height: 1em;
    font-size: 0.66666em;
    color: rgb(250,80,80);
    vertical-align: top;
}

Description

.desc {
    margin: 1em 0.75em 0 0;
    font-size: 0.77777em;
    font-style: italic;
    line-height: 1.5em;
}

Notes

Code on Codepen.io
Tested on SS 7.1

creedon · February 16, 2021

You are rockin' it!

Alexis-Reid-Design · March 29, 2021

Do you think you could take a look at my timeline issue?

tuanphan · March 31, 2021

On 3/30/2021 at 5:42 AM, Alexis-Reid-Design said:

Do you think you could take a look at my timeline issue?

Just aswered

BoulevardNorth · December 8, 2021

On 2/15/2021 at 9:24 PM, tuanphan said:

Timeline 02.

Demo (Password: abc)

1. Add a Code Block > Paste this code

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
  
<!-- The Timeline -->

<ul class="timeline">

	<!-- Item 1 -->
	<li>
		<div class="direction-r">
			<div class="flag-wrapper">
				<span class="flag">Freelancer</span>
				<span class="time-wrapper"><span class="time">2013 - present</span></span>
			</div>
			<div class="desc">My current employment. Way better than the position before!</div>
		</div>
	</li>
  
	<!-- Item 2 -->
	<li>
		<div class="direction-l">
			<div class="flag-wrapper">
				<span class="flag">Apple Inc.</span>
				<span class="time-wrapper"><span class="time">2011 - 2013</span></span>
			</div>
			<div class="desc">My first employer. All the stuff I've learned and projects I've been working on.</div>
		</div>
	</li>

	<!-- Item 3 -->
	<li>
		<div class="direction-r">
			<div class="flag-wrapper">
				<span class="flag">Harvard University</span>
				<span class="time-wrapper"><span class="time">2008 - 2011</span></span>
			</div>
			<div class="desc">A description of all the lectures and courses I have taken and my final degree?</div>
		</div>
	</li>
  
</ul>

2. Add to Design > Custom CSS

.timeline {	
  color: rgb(50,50,50);
  font-family: 'Open Sans', sans-serif;
  font-size: 112.5%;
  line-height: 1.6em;
}

/* ================ The Timeline ================ */

.timeline {
  position: relative;
  width: 660px;
  margin: 0 auto;
  margin-top: 20px;
  padding: 1em 0;
  list-style-type: none;
}

.timeline:before {
  position: absolute;
  left: 50%;
  top: 0;
  content: ' ';
  display: block;
  width: 6px;
  height: 100%;
  margin-left: -3px;
  background: rgb(80,80,80);
  background: -moz-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
  background: -webkit-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: -o-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: -ms-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: linear-gradient(to bottom, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  
  z-index: 5;
}

.timeline li {
  padding: 1em 0;
}

.timeline li:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.direction-l {
  position: relative;
  width: 300px;
  float: left;
  text-align: right;
}

.direction-r {
  position: relative;
  width: 300px;
  float: right;
}

.flag-wrapper {
  position: relative;
  display: inline-block;
  
  text-align: center;
}

.flag {
  position: relative;
  display: inline;
  background: rgb(248,248,248);
  padding: 6px 10px;
  border-radius: 5px;
  
  font-weight: 600;
  text-align: left;
}

.direction-l .flag {
  -webkit-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  -moz-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}

.direction-r .flag {
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}

.direction-l .flag:before,
.direction-r .flag:before {
  position: absolute;
  top: 50%;
  right: -40px;
  content: ' ';
  display: block;
  width: 12px;
  height: 12px;
  margin-top: -10px;
  background: #fff;
  border-radius: 10px;
  border: 4px solid rgb(255,80,80);
  z-index: 10;
}

.direction-r .flag:before {
  left: -40px;
}

.direction-l .flag:after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  height: 0;
  width: 0;
  margin-top: -8px;
  border: solid transparent;
  border-left-color: rgb(248,248,248);
  border-width: 8px;
  pointer-events: none;
}

.direction-r .flag:after {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  height: 0;
  width: 0;
  margin-top: -8px;
  border: solid transparent;
  border-right-color: rgb(248,248,248);
  border-width: 8px;
  pointer-events: none;
}

.time-wrapper {
  display: inline;
  
  line-height: 1em;
  font-size: 0.66666em;
  color: rgb(250,80,80);
  vertical-align: middle;
}

.direction-l .time-wrapper {
  float: left;
}

.direction-r .time-wrapper {
  float: right;
}

.time {
  display: inline-block;
  padding: 4px 6px;
  background: rgb(248,248,248);
}

.desc {
  margin: 1em 0.75em 0 0;
  
  font-size: 0.77777em;
  font-style: italic;
  line-height: 1.5em;
}

.direction-r .desc {
  margin: 1em 0 0 0.75em;
}

/* ================ Timeline Media Queries ================ */

@media screen and (max-width: 660px) {

.timeline {
 	width: 100%;
	padding: 4em 0 1em 0;
}

.timeline li {
	padding: 2em 0;
}

.direction-l,
.direction-r {
	float: none;
	width: 100%;

	text-align: center;
}

.flag-wrapper {
	text-align: center;
}

.flag {
	background: rgb(255,255,255);
	z-index: 15;
}

.direction-l .flag:before,
.direction-r .flag:before {
  position: absolute;
  top: -30px;
	left: 50%;
	content: ' ';
	display: block;
	width: 12px;
	height: 12px;
	margin-left: -9px;
	background: #fff;
	border-radius: 10px;
	border: 4px solid rgb(255,80,80);
	z-index: 10;
}

.direction-l .flag:after,
.direction-r .flag:after {
	content: "";
	position: absolute;
	left: 50%;
	top: -8px;
	height: 0;
	width: 0;
	margin-left: -8px;
	border: solid transparent;
	border-bottom-color: rgb(255,255,255);
	border-width: 8px;
	pointer-events: none;
}

.time-wrapper {
	display: block;
	position: relative;
	margin: 4px 0 0 0;
	z-index: 14;
}

.direction-l .time-wrapper {
	float: none;
}

.direction-r .time-wrapper {
	float: none;
}

.desc {
	position: relative;
	margin: 1em 0 0 0;
	padding: 1em;
	background: rgb(245,245,245);
	-webkit-box-shadow: 0 0 1px rgba(0,0,0,0.20);
	-moz-box-shadow: 0 0 1px rgba(0,0,0,0.20);
	box-shadow: 0 0 1px rgba(0,0,0,0.20);
	
  z-index: 15;
}

.direction-l .desc,
.direction-r .desc {
	position: relative;
	margin: 1em 1em 0 1em;
	padding: 1em;
	
  z-index: 15;
}

}

@media screen and (min-width: 400px) and (max-width: 660px) {

.direction-l .desc,
.direction-r .desc {
	margin: 1em 4em 0 4em;
}

}

3. How to customize

Vertical Line: Size, color,.. Find this CSS code

.timeline:before {
    position: absolute;
    left: 50%;
    top: 0;
    content: ' ';
    display: block;
    width: 6px;
    height: 100%;
    margin-left: -3px;
    background: rgb(80,80,80);
    background: -moz-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
    background: -webkit-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
    background: -o-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
    background: -ms-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
    background: linear-gradient(to bottom, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
    z-index: 5;
}

Freelancer, Apple Inc...box

.flag {
    position: relative;
    display: inline;
    background: rgb(248,248,248);
    padding: 6px 10px;
    border-radius: 5px;
    font-weight: 600;
    text-align: left;
}

Red/white circle

.direction-l .flag:before, .direction-r .flag:before {
    position: absolute;
    top: 50%;
    right: -40px;
    content: ' ';
    display: block;
    width: 12px;
    height: 12px;
    margin-top: -10px;
    background: #fff;
    border-radius: 10px;
    border: 4px solid rgb(255,80,80);
    z-index: 10;
}

Time (2013 - present...)

.time {
    display: inline-block;
    padding: 4px 6px;
    background: rgb(248,248,248);
}

and

.time-wrapper {
    display: inline;
    line-height: 1em;
    font-size: 0.66666em;
    color: rgb(250,80,80);
    vertical-align: top;
}

Description

.desc {
    margin: 1em 0.75em 0 0;
    font-size: 0.77777em;
    font-style: italic;
    line-height: 1.5em;
}

Notes

Code on Codepen.io
Tested on SS 7.1

Is there a way to expand the timeline block so it is the full width of the container instead of it being more narrow? I have a very long timeline with a lot of descriptive text, so I'd like the description box to expand further to the left and right on their respective sides of the timeline.

tuanphan · December 12, 2021

On 12/9/2021 at 6:33 AM, BoulevardNorth said:

Is there a way to expand the timeline block so it is the full width of the container instead of it being more narrow? I have a very long timeline with a lot of descriptive text, so I'd like the description box to expand further to the left and right on their respective sides of the timeline.

Can you share link to page where you added Timeline code? We can check & tweak the code easier

Phex · December 21, 2021

@tuanphan

First of all: Thank you so much for time line. Looks great! I tweaked some settings according to my wishes, however, I was unable to change the color of the time-line itself. Im trying to get it gold'ish. However, I dont get any results changing the RGB Codes. Could you help me out?

Also, would it be possible to have an animated effect on the timeline? For instance the one where you scroll down and it slowly appears to the user?

Greetings!

Edited December 21, 2021 by Phex

tuanphan · December 25, 2021

On 12/22/2021 at 5:49 AM, Phex said:

@tuanphan

First of all: Thank you so much for time line. Looks great! I tweaked some settings according to my wishes, however, I was unable to change the color of the time-line itself. Im trying to get it gold'ish. However, I dont get any results changing the RGB Codes. Could you help me out?

Also, would it be possible to have an animated effect on the timeline? For instance the one where you scroll down and it slowly appears to the user?

Greetings!

#1. Can you share link to page where you added timeline code & which element you want to change color?

#2. Not sure, if you share link, we can check easier

Phex · January 10, 2022

On 12/25/2021 at 9:12 AM, tuanphan said:

#1. Can you share link to page where you added timeline code & which element you want to change color?

#2. Not sure, if you share link, we can check easier

Sorry, I was on vacation and couldn't reply faster.

The link: https://echidna-sheep-7ykn.squarespace.com/

Password: Spandovia

The timeline is on the sub-page "Unsere Geschichte". The vertical timeline is kinda dark-grey'ish? Would love to make it golden'ish.

tuanphan · January 12, 2022

On 1/10/2022 at 8:07 PM, Phex said:

Sorry, I was on vacation and couldn't reply faster.

The link: https://echidna-sheep-7ykn.squarespace.com/

Password: Spandovia

The timeline is on the sub-page "Unsere Geschichte". The vertical timeline is kinda dark-grey'ish? Would love to make it golden'ish.

Thank you. Which elements you want to change color?

Phex · January 14, 2022

On 1/12/2022 at 4:32 AM, tuanphan said:

Thank you. Which elements you want to change color?

Kinda like in the attachment.

Greetings!

tuanphan · January 15, 2022

On 1/14/2022 at 6:16 PM, Phex said:

Kinda like in the attachment.

Greetings!

Add to Design > Custom CSS

/* Timeline Vertical line */
ul.timeline:before {
    background-image: linear-gradient(to bottom,rgba(80,80,80,0) 0%,#b6b53d 8%,#b6b53d 92%,rgba(80,80,80,0) 100%) !important;
}

Phex · January 16, 2022

On 1/15/2022 at 3:19 PM, tuanphan said:

Add to Design > Custom CSS

/* Timeline Vertical line */
ul.timeline:before {
    background-image: linear-gradient(to bottom,rgba(80,80,80,0) 0%,#b6b53d 8%,#b6b53d 92%,rgba(80,80,80,0) 100%) !important;
}

Man, you're awesome, really appreciate it. Thank you so much ❤️

kelli_carley · June 9, 2022

Site URL: https://dixon-inc.squarespace.com/config/design/custom-css

https://dixon-inc.squarespace.com/config/design/custom-css

pw: dixoninc

Hi there! Is there a way to remove the angled text and use the text+icon I have in a separate code block for my timeline? Also, is there a way to have my timeline horizontal on web and then change to vertical when viewing it on mobile?

tuanphan · June 11, 2022

Hi. Can you share link to page where you added timeline?

https://dixon-inc.squarespace.com/?noredirect

kelli_carley · June 14, 2022

@tuanphan Hi There! For the vertical timeline, could you help me add an svg icon for each item above/centered the Item Name?

Edited June 14, 2022 by kelli_carley

tuanphan · June 15, 2022

7 hours ago, kelli_carley said:

@tuanphan Hi There! For the vertical timeline, could you help me add an svg icon for each item above/centered the Item Name?

Which timeline code are you referring to?

kelli_carley · June 16, 2022

On 6/14/2022 at 11:00 PM, tuanphan said:

Which timeline code are you referring to?

@tuanphan

Ideally, I'd like a horizontal timeline on web (see attached image) and vertical timeline on mobile - if possible. If not, I'd like to use the vertical timeline without the white containers from above and svg icons instead.

https://dixonincorp.squarespace.com/services pw: dixoninc

Edited June 16, 2022 by kelli_carley

kelli_carley · June 27, 2022

@tuanphan Hi There! Any solution to the above comment:

JustinSeimits · July 7, 2022

@kelli_carley Have you figured out your timeline yet? I am looking to build one and wonder how it works and what would need to be done to accomplish it.

tuanphan · July 8, 2022

On 6/27/2022 at 11:55 PM, kelli_carley said:

@tuanphan Hi There! Any solution to the above comment:

Forgot your question. Have you solved it yet?

JonnyShaw · August 11, 2022

Hey everyone, thanks Tuaphan for this great code!

I have 1 last issue that I cannot figure out as I am very new to the coding world.

I have added hyperlinks on to some of my timeline points but I cannot understand how to change the colour for the text that has been made into the link. I think I'm right in thinking it needs to be done on the CSS side of things but I can't for the life of me work it out.

Does anybody have some code from where they have already done this on the timeline 2 that I could copy and paste please? I need to know where it should go too please.

Thanks in advance.

tuanphan · August 14, 2022

On 8/12/2022 at 12:17 AM, JonnyShaw said:

Hey everyone, thanks Tuaphan for this great code!

I have 1 last issue that I cannot figure out as I am very new to the coding world.

I have added hyperlinks on to some of my timeline points but I cannot understand how to change the colour for the text that has been made into the link. I think I'm right in thinking it needs to be done on the CSS side of things but I can't for the life of me work it out.

Does anybody have some code from where they have already done this on the timeline 2 that I could copy and paste please? I need to know where it should go too please.

Thanks in advance.

Can you share link to page where you added timeline? We can help easier

[Share] Timeline Collection

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan

tuanphan

creedon

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources