deedee2344

1. Download the file package from: https://nicepage.com/qt/41839/counter-synergy-design-squarespace-template 2. Upload only nicepage.js into Squarespace. (Create a text link. Link the text to a file. Upload nicepage.js file. Delete the link. File is now uploaded to Squarespace's backend.) Note: This is where it's a bit of a hack bc I'm not well-versed in Javascript, so I just uploaded the entire .js file without editing. Others more knowledgeable might want to edit the .js file to only include the number counter code bit to cut down on webpage load times. 3. Under Settings > Advanced > Code Injection > Header, paste the following code: <!-- Installing Number Counter --> <script class="u-script" type="text/javascript" src="/s/nicepage.js" defer></script> 4. This is the HTML for one number. Add as a code block, which Squarespace will naturally make responsive if multiple code blocks/numbers are added in a row. Note: I love how I can just add any additional text in front of or after the number and the number counter will still work. See attached screenshots. Numbers are set to animate on "scroll," and animation duration is set to 3000, both of which can be further customized if need-be. <section id="carousel_9139"> <div style="text-align: center"> <!--Replace img link here--><img src="/s/counter1.png" alt=""> <h1 data-animation-name="counter" data-animation-event="scroll" data-animation-duration="3000" style="margin-top: 0; margin-bottom: 0;"> <!--Edit number here-->1,255 Customers </h1> <p class="sqsrte-large"> <!--Edit copy here-->Served Annually Through Education Programs </p> </div> </section> See attached video to see how it looks on two pages on my site: 1290494964_numbercounters.mov

Client wanted number counters to showcase impact, but I had difficulty finding one that is: (a) free (b) simple to implement (c) responsive (d) easily customizable (add image, set animation duration, set animation on scroll/load, etc.), and (e) could easily accommodate different prefixes and suffixes for each number (for this last one, I found that lots of plugins are limited or inflexible in this sense). Ghost plugins has a paid number counter and, I bought it, only to find out that I need to create a blog page and use summary blocks, which are limiting creatively, and only lets me set either a prefix or suffix for all (I can't pick and choose for each number). Super annoying. So, after some searching, I found this code: https://nicepage.com/qt/41839/counter-synergy-design-squarespace-template. It's a bit of a hack, but it ended up working great and I wanted to share for anyone who's also looking. What I love about this one is that I can easily type "50%" or "49 Families" or "$7000" and the number counter will still work with any prefixes, suffixes, or other text that I add. See comments below for steps/code and gifs.

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:

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.

@tuanphan You are amazing, thank you!! This works great.

I have a List section (Simple List) for team members - is there a way to remove the brownish image overlay? I have tried inspecting the code but couldn't find anything that works. Thanks in advance. Site URL (password: everypersonsage): https://raspberry-falcon-dr5p.squarespace.com/about-ycd