deedee2344 Posted July 26, 2022 Share Posted July 26, 2022 (edited) 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 July 26, 2022 by deedee2344 Link to comment
Solution deedee2344 Posted July 26, 2022 Author Solution Share Posted July 26, 2022 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: How it looks on mobile: Link to comment
marketingelkhorn Posted September 28, 2022 Share Posted September 28, 2022 I am getting a syntax error for line 1 after pasting into Custom CSS. Any idea why? Link to comment
paul2009 Posted September 28, 2022 Share Posted September 28, 2022 HTML must be placed in a Code Block. Only CSS can be added to Design > Custom CSS. About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
srobinsondesign Posted November 8, 2022 Share Posted November 8, 2022 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: How it looks on mobile: Does anyone know how to add images to the individual timeline points? @tuanphan Link to comment
tuanphan Posted November 8, 2022 Share Posted November 8, 2022 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
WorkplaceConsultant Posted April 7 Share Posted April 7 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 Thank you so much! Wpl-c Link to comment
tuanphan Posted April 12 Share Posted April 12 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment