Jump to content

Code for Vertical Timeline on 7.1 (Solved)

Go to solution Solved by deedee2344,

Recommended Posts

I needed a simple, responsive vertical timeline for a site I'm building. I found this solution and thought I'd share for others who might be searching. I found this code and edited the HTML and CSS to suit: https://codepen.io/taraswenson/pen/xyMmox. HTML is pasted as a code block. CSS is added under Design > Custom CSS.

See comment below for the code I ended up using and screenshots.

 

 

Edited by deedee2344
Link to comment
  • Replies 11
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

 This is the code I ended up using on my site:

HTML

<div class="timeline">
  <div class="timeline-container timeline-left">
    <div class="timeline-content">
      <p class="timeline-date">SEP 2019</p>
      <p class="timeline-copy sqsrte-large">Funded by Robin Hood, Tipping Point Community and HOPE SF</p>
    </div>
  </div>
  <div class="timeline-container timeline-right">
    <div class="timeline-content">
      <p class="timeline-date">NOV 2019</p>
      <p class="timeline-copy sqsrte-large">Hired key staff, formalized partnerships and created an advisory group</p>
    </div>
  </div>
    <div class="timeline-container timeline-left">
    <div class="timeline-content">
      <p class="timeline-date">FEB 2020</p>
      <p class="timeline-copy sqsrte-large">Community Kick-Off Events</p>
    </div>
  </div>
    <div class="timeline-container timeline-right">
    <div class="timeline-content">
      <p class="timeline-date">JUN-AUG 2020</p>
      <p class="timeline-copy sqsrte-large">Community Interviews</p>
    </div>
  </div>
  <div class="timeline-container timeline-left">
    <div class="timeline-content">
      <p class="timeline-date">SEP 2020</p>
      <p class="timeline-copy sqsrte-large">Community Shareout & Design Input</p>
    </div>
  </div>
    <div class="timeline-container timeline-right">
    <div class="timeline-content">
      <p class="timeline-date">OCT-NOV 2020</p>
      <p class="timeline-copy sqsrte-large">Market Test Design</p>
    </div>
  </div>
  <div class="timeline-container timeline-left">
    <div class="timeline-content">
      <p class="timeline-date">DEC 2020</p>
      <p class="timeline-copy sqsrte-large">Secure funding for full implementation</p>
    </div>
  </div>
</div>

CSS

Note: I renamed all classes with a "timeline-" prefix as to not affect other Squarespace code. I also folded "box-sizing: border-box" into .timeline and .timeline-container, otherwise it will also affect other Squarespace code.

// VERTICAL TIMELINE //
/* The actual timeline (the vertical ruler) */
.timeline {
  box-sizing: border-box;
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}
/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: white;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}
/* Container around content */
.timeline-container {
  box-sizing: border-box;
  padding: 10px 50px;
  position: relative;
  background-color: inherit;
  width: 50%;
}
/* The circles on the timeline */
.timeline-container::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: #eb8d31;
  border: 4px solid #eb8d31;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}
/* Place the container to the left */
.timeline-left {
  left: 0;
}
/* Place the container to the right */
.timeline-right {
  left: 50%;
}
/* Add arrows to the left container (pointing right) */
.timeline-left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}
/* Add arrows to the right container (pointing left) */
.timeline-right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}
/* Fix the circle for containers on the right side */
.timeline-right::after {
  left: -16px;
}
/* The actual content */
.timeline-content {
  padding: 20px 30px;
  background-color: white;
  position: relative;
  border-radius: 6px;
 }
/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
/* Place the timelime to the left */
  .timeline::after {
    left: 31px;
  }
/* Full-width containers */
  .timeline-container {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }
/* Make sure that all arrows are pointing leftwards */
  .timeline-container::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }
/* Make sure all circles are at the same spot */
  .timeline-left::after {
    left: 15px;
  }
  .timeline-right::after {
    left: 15px;
  }
/* Make all right containers behave like the left ones */
  .timeline-right {
    left: 0px;
  }
}
/* Style copy */
.timeline-date {
  color: #009fa1; font-weight: 700;
}
.timeline-copy {
  color: black !important;
}
// VERTICAL TIMELINE END //

How it looks on desktop:

image.thumb.png.7dcca92c68f70cef17a36ef04c2654c3.png

How it looks on mobile: 

image.thumb.png.c253db0cb2434aa000e32098dbdb0687.png

Link to comment
  • 2 months later...

HTML must be placed in a Code Block. Only CSS can be added to Design > Custom CSS.

About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

Link to comment
  • 1 month later...
On 7/26/2022 at 12:04 AM, deedee2344 said:

 This is the code I ended up using on my site:

HTML

<div class="timeline">
  <div class="timeline-container timeline-left">
    <div class="timeline-content">
      <p class="timeline-date">SEP 2019</p>
      <p class="timeline-copy sqsrte-large">Funded by Robin Hood, Tipping Point Community and HOPE SF</p>
    </div>
  </div>
  <div class="timeline-container timeline-right">
    <div class="timeline-content">
      <p class="timeline-date">NOV 2019</p>
      <p class="timeline-copy sqsrte-large">Hired key staff, formalized partnerships and created an advisory group</p>
    </div>
  </div>
    <div class="timeline-container timeline-left">
    <div class="timeline-content">
      <p class="timeline-date">FEB 2020</p>
      <p class="timeline-copy sqsrte-large">Community Kick-Off Events</p>
    </div>
  </div>
    <div class="timeline-container timeline-right">
    <div class="timeline-content">
      <p class="timeline-date">JUN-AUG 2020</p>
      <p class="timeline-copy sqsrte-large">Community Interviews</p>
    </div>
  </div>
  <div class="timeline-container timeline-left">
    <div class="timeline-content">
      <p class="timeline-date">SEP 2020</p>
      <p class="timeline-copy sqsrte-large">Community Shareout & Design Input</p>
    </div>
  </div>
    <div class="timeline-container timeline-right">
    <div class="timeline-content">
      <p class="timeline-date">OCT-NOV 2020</p>
      <p class="timeline-copy sqsrte-large">Market Test Design</p>
    </div>
  </div>
  <div class="timeline-container timeline-left">
    <div class="timeline-content">
      <p class="timeline-date">DEC 2020</p>
      <p class="timeline-copy sqsrte-large">Secure funding for full implementation</p>
    </div>
  </div>
</div>

CSS

Note: I renamed all classes with a "timeline-" prefix as to not affect other Squarespace code. I also folded "box-sizing: border-box" into .timeline and .timeline-container, otherwise it will also affect other Squarespace code.

// VERTICAL TIMELINE //
/* The actual timeline (the vertical ruler) */
.timeline {
  box-sizing: border-box;
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}
/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: white;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}
/* Container around content */
.timeline-container {
  box-sizing: border-box;
  padding: 10px 50px;
  position: relative;
  background-color: inherit;
  width: 50%;
}
/* The circles on the timeline */
.timeline-container::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: #eb8d31;
  border: 4px solid #eb8d31;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}
/* Place the container to the left */
.timeline-left {
  left: 0;
}
/* Place the container to the right */
.timeline-right {
  left: 50%;
}
/* Add arrows to the left container (pointing right) */
.timeline-left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}
/* Add arrows to the right container (pointing left) */
.timeline-right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}
/* Fix the circle for containers on the right side */
.timeline-right::after {
  left: -16px;
}
/* The actual content */
.timeline-content {
  padding: 20px 30px;
  background-color: white;
  position: relative;
  border-radius: 6px;
 }
/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
/* Place the timelime to the left */
  .timeline::after {
    left: 31px;
  }
/* Full-width containers */
  .timeline-container {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }
/* Make sure that all arrows are pointing leftwards */
  .timeline-container::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }
/* Make sure all circles are at the same spot */
  .timeline-left::after {
    left: 15px;
  }
  .timeline-right::after {
    left: 15px;
  }
/* Make all right containers behave like the left ones */
  .timeline-right {
    left: 0px;
  }
}
/* Style copy */
.timeline-date {
  color: #009fa1; font-weight: 700;
}
.timeline-copy {
  color: black !important;
}
// VERTICAL TIMELINE END //

How it looks on desktop:

image.thumb.png.7dcca92c68f70cef17a36ef04c2654c3.png

How it looks on mobile: 

image.thumb.png.c253db0cb2434aa000e32098dbdb0687.png

Does anyone know how to add images to the individual timeline points? @tuanphan

Link to comment
19 minutes ago, srobinsondesign said:

Does anyone know how to add images to the individual timeline points? @tuanphan

Which position? Above date or?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 months later...
On 4/7/2023 at 8:59 PM, WorkplaceConsultant said:

I have the same question; I would like to include an icon/image in the text box. How could I do that? btw thanks for sharing

Depend on position. Above Date, under text or?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
Posted (edited)

Nice work! 👏

That's definitely a great, and easy option for a vertical timeline.

However, as Squarespace is built around the idea of not having to write or edit HTML code I wanted a solution fully editable in 7.1 fluid engine:

CleanShot2023-06-08at16_53_44.gif.873f5edd9232435532a378c5dcde4ae1.gif

 

It's a bit more minimalist to fit into the Squarespace aesthetics, and of course design is editable in Squarespace Site Styles. It also has subtle scrolling animation option

 

CleanShot2023-06-08at16_57_12.gif.9a5ac959a1e3e6cd85855ed8da73363a.gif

 

 

Free tutorial for vertical timelines

So if you're interested in an option with less coding, more visual editing, you can check my free tutorial on how to build a timeline with 7.1 fluid engine  for a simple DIY version.

(Paid) plugin with animations and mobile design

..or try out this vertical timeline plugin, with scroll animations, mobile-friendly design, custom styling etc. 

Edited by codeandtonic
more clarity

Freelance Squarespace developer making plugins like Full-Width Blocks, Hover effects for grid gallery and the Darkmode plugin. I know Squarespace inside out and I'm able to solve pretty much any Squarespace code problem.

Get in touch here!

Link to comment
On 6/9/2023 at 7:12 PM, andreashirey1914 said:

This code worked great for me but I cannot get the ruler to grow with new content added to the timeline. Can someone please help me with that? 

Can you describe in detail + link to page where you added timeline?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...

I've updated the code to adjust the height of the timeline line -  @andreashirey1914 ~ not sure if you still need this or not, but I thought I'd include it here just in case or to help anyone else out in future. You'll just need to adjust the height in both desktop and mobile to suit your needs. You can see the added code, highlighted in green below. 

I do prefer the flexibility of 7.1, but I have a client whose site is built on 7.0, so this is a decent work around until they're ready for a site overhaul.

 

// VERTICAL TIMELINE //
/* The actual timeline (the vertical ruler) */
.timeline {
  box-sizing: border-box;
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}
/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 1250px;
  background-color: white;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}
/* Container around content */
.timeline-container {
  box-sizing: border-box;
  padding: 10px 50px;
  position: relative;
  background-color: inherit;
  width: 50%;
}
/* The circles on the timeline */
.timeline-container::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: #f9a733;
  border: 4px solid #f9a733;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}
/* Place the container to the left */
.timeline-left {
  left: 0;
}
/* Place the container to the right */
.timeline-right {
  left: 50%;
}
/* Add arrows to the left container (pointing right) */
.timeline-left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}
/* Add arrows to the right container (pointing left) */
.timeline-right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}
/* Fix the circle for containers on the right side */
.timeline-right::after {
  left: -16px;
}
/* The actual content */
.timeline-content {
  padding: 20px 30px;
  background-color: white;
  position: relative;
  border-radius: 6px;
 }
/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
/* Place the timeline to the left */
  .timeline::after {
    left: 31px;
    height: 1575px
  }
/* Full-width containers */
  .timeline-container {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }
/* Make sure that all arrows are pointing leftwards */
  .timeline-container::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }
/* Make sure all circles are at the same spot */
  .timeline-left::after {
    left: 15px;
  }
  .timeline-right::after {
    left: 15px;
  }
/* Make all right containers behave like the left ones */
  .timeline-right {
    left: 0px;
  }
}
/* Style copy */
.timeline-date {
  color: #a64050 ;font-size: 16pt; font-weight: 900;
}
.timeline-copy {
  color: #272a4f !important;
}
// VERTICAL TIMELINE END //

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.