Roger Smith 2/1/21 Roger Smith 2/1/21

Squarepaste.com Timeline code - Overview

Screen Shot 2021-02-01 at 7.38.43 PM.png

Squarepaste Timeline Purchased 1/31/21

Vertical Timeline Installation (using Embed Block)

Password: u9LVLV7J6aj83N7Q

Instructions:

1. Copy & paste the code into the designated area.

{Choose from options in original 4 code examples supplied by Squarepaste or currently active code found elsewhere in this documentatio blog.}

Designated Area Options:

Page Header Code Injection
For Business & Commerce Squarespace Plans, applies the code to one page

Code Block
For Business & Commerce Squarespace Plans, applies the code to one page

Embed Block
For Personal Squarespace Plan, applies the code to one page

2. Add Quote Blocks onto the page

Each quote block is an event in the timeline. Type the event information into the quote area, type the date into the source/author area.

3. Disable Ajax (for Squarespace 7.0 only

Go to Design → Site Styles → SITE: LOADING → Enable Ajax Loading  • Make sure “Enable Ajax Loading” is unchecked.

Note: Not required as our current site template, Pacific, does not use Ajax. Would be needed if we change templates in some cases.

Roger Smith 2/1/21 Roger Smith 2/1/21

How to add images to the CSS area for use within the Vertical Timeline quote blocks

This is a tedious, yet simple process.

From Pages area, Edit Timeline page

Click Plus Symbol to add new Quote Block

A choice of Content Blocks will appear

Choose Quote Block

Enter Timeline entry content

Add <img src=/temporary_placeholder/> tag

Click "Save"

Quote Block will appear with Image Placeholder

Navigate to "Design" and click

Choose "Custom CSS"

Click into end of code area and add a few "Returns"

Click "Manage Custom Files"

Choose "Add images or fonts."

Select your desired image to upload

Scroll to bottom of images to locate your recent upload

Click to select image

The code will likely show an error - not an issue

Select and cut the link code

Error will disappear after "cut"

Click "Save"

Navigate to Timeline and Edit page

Select temporary placeholder in the <img src> HTML tag

Paste the link and adjust until it appears

Click "Apply"

Click "Save"

Roger Smith 2/1/21 Roger Smith 2/1/21

Applying code to a single page - Timeline page

Our use of the Squarepaste.com Timeline code

Select the Settings Gear on the Timeline Page.png — From the Pages area, select the Timeline Page Settings [Gear icon]

Click Advanced.png — Click “Advanced” to show injected code for the page

Make Edits and Close.png — Edit the code and click “Close.”

Roger Smith 2/1/21 Roger Smith 2/1/21

Active Vertical Timeline Code

Active Timeline Code

<script src="https://drive.google.com/uc?export=view&id=1iBS8Jg9Ty5bjY_5QllDLxcNH0EkcrJto"></script>
<script src="https://drive.google.com/uc?export=view&id=1TRYODB131CM86wLA5rYNgCwB8xEjM-Va"></script>

<style type="text/css">
.sqs-block-quote blockquote {overflow:hidden;}
.sqs-block-quote blockquote span, .quote-block figcaption::first-letter, .quote-block .source::first-letter {display: none !important;}

.quote-block {color:inherit;font-size: inherit;}
/* Header */ .quote-block h1 {color:inherit;font-size: 22;margin: 5px 0 0;}
/* Image */ .quote-block img {max-width: 100%;margin: 5px 0;}
/* Date */ .quote-block.sqs-block-quote figcaption {font-size: 15px;font-weight: 500;}
/* Link */ .quote-block a {color: inherit;font-size: inherit;text-decoration: none;padding-bottom: 1px;background-image: -webkit-gradient(linear,left top,left bottom,from(#1c1c1c),to(#1c1c1c));background-image: -o-linear-gradient(#1c1c1c 0%,#1c1c1c 100%);background-image: linear-gradient(#1c1c1c 0%,#1c1c1c 100%);background-repeat: no-repeat;background-size: 100% 1px;background-position: 0 bottom;-webkit-transition: opacity 700ms cubic-bezier(.694,0,.335,1),background-position 100ms cubic-bezier(.694,0,.335,1);-o-transition: opacity 700ms cubic-bezier(.694,0,.335,1),background-position 100ms cubic-bezier(.694,0,.335,1);transition: opacity 700ms cubic-bezier(.694,0,.335,1),background-position 100ms cubic-bezier(.694,0,.335,1);}
/* Link Hover */ .quote-block a:hover {background-position: center bottom 3px;}

.sqs-block-quote figure {display: flex;flex-direction: column;margin: 0 3px;}
.sqs-block-quote blockquote {order: 2;margin: 4px;}
.sqs-block-quote figcaption {order: 1;}

body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block blockquote, body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block figcaption {text-align: left;}
body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block blockquote, body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block figcaption {text-align: right;}

body:not(.sqs-edit-mode-active) .quote-block figcaption {padding: 0;margin: 0 0 5px 0;line-height: initial !important;}
.quote-block figcaption::first-letter {visibility: hidden;font-size: 0;}

body:not(.sqs-edit-mode-active) .quote-block.sqs-block {list-style-type: none;position: relative;width: 2px !important;margin: 0 auto;padding: 0 0 10px !important;background: #cccccc;}

body:not(.sqs-edit-mode-active) .quote-block::after {content: '';position: absolute;left: 50%;top: 50%;transform: translateX(-50%);width: 20px;height: 20px;border-radius: 50%;background: inherit;}

body:not(.sqs-edit-mode-active) .col .timeline-event:first-child .quote-block::after {top: 0;}
body:not(.sqs-edit-mode-active) .col .timeline-event:last-child .quote-block::after {bottom: 0;top: unset;}

body:not(.sqs-edit-mode-active) .col .timeline-event .quote-block .sqs-block-content {position: relative;bottom: 0px;width: 400px;visibility: hidden;opacity: 0;transition: all .5s ease-in-out;padding: 0;}
body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block .sqs-block-content {left: 45px;}
body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block div {left: -445px;}

body:not(.sqs-edit-mode-active) .quote-block::after {background: #34B451;}
body:not(.sqs-edit-mode-active) .quote-block.in-view::after {border: 2px solid #cccccc;}


body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block .sqs-block-content {transform: translate3d(200px,0,0);}
body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block .sqs-block-content {transform: translate3d(-200px,0,0);}

body:not(.sqs-edit-mode-active) .col .timeline-event .quote-block.in-view .sqs-block-content {transform: none;visibility: visible;opacity: 1;}

.quote-block iframe {max-width: 100% !important;}

@media screen and (max-width: 992px) {
body:not(.sqs-edit-mode-active) .col .timeline-event .quote-block .sqs-block-content {width: 250px;}
body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block .sqs-block-content {left: -289px;}
}

@media screen and (max-width: 600px) {
body:not(.sqs-edit-mode-active) .quote-block .sqs-block-content {transform:none !important;}
body:not(.sqs-edit-mode-active) .quote-block {margin-left: 20px !important;}
body:not(.sqs-edit-mode-active) .quote-block .sqs-block-content {width: calc(100vw - 91px);}
body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block .sqs-block-content {left: 45px;}
body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block blockquote, body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block figcaption {text-align: left;}
body:not(.sqs-edit-mode-active) .quote-block::after {top: 0;}
}
/* Paragraph */ .quote-block blockquote {color: #000000;font-size: 16px; line-height: 1.2;}
mark {
  background-color: #037d8b;
  color: white;
}
body:not(.sqs-edit-mode-active) .quote-block.sqs-block {padding: 0 0 5px !important;}
</style>

Roger Smith 2/1/21 Roger Smith 2/1/21

Original Vertical Timeline code from Squarepaste.com

Code as Provided

Note: Solution has 4 versions [With and without motion and begin timeline entries on left or right ]

Each version is in a separate box.

Consider copying to a text file before editing and inserting into the page code.

Code below will begin the timeline on the left side of the middle line with a sliding feature.

<script src="https://drive.google.com/uc?export=view&id=1iBS8Jg9Ty5bjY_5QllDLxcNH0EkcrJto"></script>

<script src="https://drive.google.com/uc?export=view&id=1TRYODB131CM86wLA5rYNgCwB8xEjM-Va"></script>

<style type="text/css">

.sqs-block-quote blockquote {overflow:hidden;}

.sqs-block-quote blockquote span, .quote-block figcaption::first-letter, .quote-block .source::first-letter {display: none !important;}

.quote-block {color:inherit;font-size: inherit;}

/* Header */ .quote-block h1 {color:inherit;font-size: inherit;margin: 10px 0 0;}

/* Image */ .quote-block img {max-width: 100%;margin: 15px 0;}

/* Date */ .quote-block.sqs-block-quote figcaption {font-size: 11px;font-weight: 500;}

/* Link */ .quote-block a {color: inherit;font-size: inherit;text-decoration: none;padding-bottom: 1px;background-image: -webkit-gradient(linear,left top,left bottom,from(#1c1c1c),to(#1c1c1c));background-image: -o-linear-gradient(#1c1c1c 0%,#1c1c1c 100%);background-image: linear-gradient(#1c1c1c 0%,#1c1c1c 100%);background-repeat: no-repeat;background-size: 100% 1px;background-position: 0 bottom;-webkit-transition: opacity 700ms cubic-bezier(.694,0,.335,1),background-position 100ms cubic-bezier(.694,0,.335,1);-o-transition: opacity 700ms cubic-bezier(.694,0,.335,1),background-position 100ms cubic-bezier(.694,0,.335,1);transition: opacity 700ms cubic-bezier(.694,0,.335,1),background-position 100ms cubic-bezier(.694,0,.335,1);}

/* Link Hover */ .quote-block a:hover {background-position: center bottom 3px;}

.sqs-block-quote figure {display: flex;flex-direction: column;margin: 0 3px;}

.sqs-block-quote blockquote {order: 2;margin: 4px;}

.sqs-block-quote figcaption {order: 1;}

body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block blockquote, body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block figcaption {text-align: left;}

body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block blockquote, body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block figcaption {text-align: right;}

body:not(.sqs-edit-mode-active) .quote-block figcaption {padding: 0;margin: 0 0 10px 0;line-height: initial !important;}

.quote-block figcaption::first-letter {visibility: hidden;font-size: 0;}

body:not(.sqs-edit-mode-active) .quote-block.sqs-block {list-style-type: none;position: relative;width: .5px !important;margin: 0 auto;padding: 0 0 50px !important;background: #cccccc;}

body:not(.sqs-edit-mode-active) .quote-block::after {content: '';position: absolute;left: 50%;top: 50%;transform: translateX(-50%);width: 10px;height: 10px;border-radius: 50%;background: inherit;}

body:not(.sqs-edit-mode-active) .col .timeline-event:first-child .quote-block::after {top: 0;}

body:not(.sqs-edit-mode-active) .col .timeline-event:last-child .quote-block::after {bottom: 0;top: unset;}

body:not(.sqs-edit-mode-active) .col .timeline-event .quote-block .sqs-block-content {position: relative;bottom: 0px;width: 400px;visibility: hidden;opacity: 0;transition: all .5s ease-in-out;padding: 0;}

body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block .sqs-block-content {left: 45px;}

body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block div {left: -445px;}

body:not(.sqs-edit-mode-active) .quote-block::after {background: #ffffff;}

body:not(.sqs-edit-mode-active) .quote-block.in-view::after {border: 1px solid #cccccc;}

body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block .sqs-block-content {transform: translate3d(200px,0,0);}

body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block .sqs-block-content {transform: translate3d(-200px,0,0);}

body:not(.sqs-edit-mode-active) .col .timeline-event .quote-block.in-view .sqs-block-content {transform: none;visibility: visible;opacity: 1;}

.quote-block iframe {max-width: 100% !important;}

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

body:not(.sqs-edit-mode-active) .col .timeline-event .quote-block .sqs-block-content {width: 250px;}

body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block .sqs-block-content {left: -289px;}

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

body:not(.sqs-edit-mode-active) .quote-block .sqs-block-content {transform:none !important;}

body:not(.sqs-edit-mode-active) .quote-block {margin-left: 20px !important;}

body:not(.sqs-edit-mode-active) .quote-block .sqs-block-content {width: calc(100vw - 91px);}

body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block .sqs-block-content {left: 45px;}

body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block blockquote, body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block figcaption {text-align: left;}

body:not(.sqs-edit-mode-active) .quote-block::after {top: 0;}

</style>

</span>

Code below will begin the timeline on the left side of the middle line with no sliding feature.

<script src="https://drive.google.com/uc?export=view&id=1iBS8Jg9Ty5bjY_5QllDLxcNH0EkcrJto"></script>
<script src="https://drive.google.com/uc?export=view&id=1TRYODB131CM86wLA5rYNgCwB8xEjM-Va"></script>

<style type="text/css">
.sqs-block-quote blockquote {overflow:hidden;}
.sqs-block-quote blockquote span, .quote-block figcaption::first-letter, .quote-block .source::first-letter {display: none !important;}

.quote-block {color:inherit;font-size: inherit;}
/* Header */ .quote-block h1 {color:inherit;font-size: inherit;margin: 10px 0 0;}
/* Image */ .quote-block img {max-width: 100%;margin: 15px 0;}
/* Date */ .quote-block.sqs-block-quote figcaption {font-size: 11px;font-weight: 500;}
/* Link */ .quote-block a {color: inherit;font-size: inherit;text-decoration: none;padding-bottom: 1px;background-image: -webkit-gradient(linear,left top,left bottom,from(#1c1c1c),to(#1c1c1c));background-image: -o-linear-gradient(#1c1c1c 0%,#1c1c1c 100%);background-image: linear-gradient(#1c1c1c 0%,#1c1c1c 100%);background-repeat: no-repeat;background-size: 100% 1px;background-position: 0 bottom;-webkit-transition: opacity 700ms cubic-bezier(.694,0,.335,1),background-position 100ms cubic-bezier(.694,0,.335,1);-o-transition: opacity 700ms cubic-bezier(.694,0,.335,1),background-position 100ms cubic-bezier(.694,0,.335,1);transition: opacity 700ms cubic-bezier(.694,0,.335,1),background-position 100ms cubic-bezier(.694,0,.335,1);}
/* Link Hover */ .quote-block a:hover {background-position: center bottom 3px;}

.sqs-block-quote figure {display: flex;flex-direction: column;margin: 0 3px;}
.sqs-block-quote blockquote {order: 2;margin: 4px;}
.sqs-block-quote figcaption {order: 1;}

body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block blockquote, body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block figcaption {text-align: left;}
body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block blockquote, body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block figcaption {text-align: right;}

body:not(.sqs-edit-mode-active) .quote-block figcaption {padding: 0;margin: 0 0 10px 0;line-height: initial !important;}
.quote-block figcaption::first-letter {visibility: hidden;font-size: 0;}

body:not(.sqs-edit-mode-active) .quote-block.sqs-block {list-style-type: none;position: relative;width: .5px !important;margin: 0 auto;padding: 0 0 50px !important;background: #cccccc;}

body:not(.sqs-edit-mode-active) .quote-block::after {content: '';position: absolute;left: 50%;top: 50%;transform: translateX(-50%);width: 10px;height: 10px;border-radius: 50%;background: inherit;}

body:not(.sqs-edit-mode-active) .col .timeline-event:first-child .quote-block::after {top: 0;}
body:not(.sqs-edit-mode-active) .col .timeline-event:last-child .quote-block::after {bottom: 0;top: unset;}

body:not(.sqs-edit-mode-active) .col .timeline-event .quote-block .sqs-block-content {position: relative;bottom: 0px;width: 400px;visibility: hidden;opacity: 0;transition: all .5s ease-in-out;padding: 0;}
body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block .sqs-block-content {left: 45px;}
body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block div {left: -445px;}

body:not(.sqs-edit-mode-active) .quote-block::after {background: #ffffff;}
body:not(.sqs-edit-mode-active) .quote-block.in-view::after {border: 1px solid #cccccc;}

body:not(.sqs-edit-mode-active) .col .timeline-event .quote-block.in-view .sqs-block-content {transform: none;visibility: visible;opacity: 1;}

.quote-block iframe {max-width: 100% !important;}

@media screen and (max-width: 992px) {
body:not(.sqs-edit-mode-active) .col .timeline-event .quote-block .sqs-block-content {width: 250px;}
body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block .sqs-block-content {left: -289px;}
}

@media screen and (max-width: 600px) {
body:not(.sqs-edit-mode-active) .quote-block .sqs-block-content {transform:none !important;}
body:not(.sqs-edit-mode-active) .quote-block {margin-left: 20px !important;}
body:not(.sqs-edit-mode-active) .quote-block .sqs-block-content {width: calc(100vw - 91px);}
body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block .sqs-block-content {left: 45px;}
body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block blockquote, body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block figcaption {text-align: left;}
body:not(.sqs-edit-mode-active) .quote-block::after {top: 0;}
}
</style>

Code below will begin the timeline on the right side of the middle line with a sliding feature

<script src="https://drive.google.com/uc?export=view&id=1iBS8Jg9Ty5bjY_5QllDLxcNH0EkcrJto"></script>
<script src="https://drive.google.com/uc?export=view&id=1TRYODB131CM86wLA5rYNgCwB8xEjM-Va"></script>

<style type="text/css">
.sqs-block-quote blockquote {overflow:hidden;}
.sqs-block-quote blockquote span, .quote-block figcaption::first-letter, .quote-block .source::first-letter {display: none !important;}

.quote-block {color:inherit;font-size: inherit;}
/* Header */ .quote-block h1 {color:inherit;font-size: inherit;margin: 10px 0 0;}
/* Image */ .quote-block img {max-width: 100%;margin: 15px 0;}
/* Date */ .quote-block.sqs-block-quote figcaption {font-size: 11px;font-weight: 500;}
/* Link */ .quote-block a {color: inherit;font-size: inherit;text-decoration: none;padding-bottom: 1px;background-image: -webkit-gradient(linear,left top,left bottom,from(#1c1c1c),to(#1c1c1c));background-image: -o-linear-gradient(#1c1c1c 0%,#1c1c1c 100%);background-image: linear-gradient(#1c1c1c 0%,#1c1c1c 100%);background-repeat: no-repeat;background-size: 100% 1px;background-position: 0 bottom;-webkit-transition: opacity 700ms cubic-bezier(.694,0,.335,1),background-position 100ms cubic-bezier(.694,0,.335,1);-o-transition: opacity 700ms cubic-bezier(.694,0,.335,1),background-position 100ms cubic-bezier(.694,0,.335,1);transition: opacity 700ms cubic-bezier(.694,0,.335,1),background-position 100ms cubic-bezier(.694,0,.335,1);}
/* Link Hover */ .quote-block a:hover {background-position: center bottom 3px;}

.sqs-block-quote figure {display: flex;flex-direction: column;margin: 0 3px;}
.sqs-block-quote blockquote {order: 2;margin: 4px;}
.sqs-block-quote figcaption {order: 1;}

body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block blockquote, body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block figcaption {text-align: left;}
body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block blockquote, body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block figcaption {text-align: right;}

body:not(.sqs-edit-mode-active) .quote-block figcaption {padding: 0;margin: 0 0 10px 0;line-height: initial !important;}
.quote-block figcaption::first-letter {visibility: hidden;font-size: 0;}

body:not(.sqs-edit-mode-active) .quote-block.sqs-block {list-style-type: none;position: relative;width: .5px !important;margin: 0 auto;padding: 0 0 50px !important;background: #cccccc;}

body:not(.sqs-edit-mode-active) .quote-block::after {content: '';position: absolute;left: 50%;top: 50%;transform: translateX(-50%);width: 10px;height: 10px;border-radius: 50%;background: inherit;}

body:not(.sqs-edit-mode-active) .col .timeline-event:first-child .quote-block::after {top: 0;}
body:not(.sqs-edit-mode-active) .col .timeline-event:last-child .quote-block::after {bottom: 0;top: unset;}

body:not(.sqs-edit-mode-active) .col .timeline-event .quote-block .sqs-block-content {position: relative;bottom: 0px;width: 400px;visibility: hidden;opacity: 0;transition: all .5s ease-in-out;padding: 0;}
body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block .sqs-block-content {left: 45px;}
body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block div {left: -445px;}

body:not(.sqs-edit-mode-active) .quote-block::after {background: #ffffff;}
body:not(.sqs-edit-mode-active) .quote-block.in-view::after {border: 1px solid #cccccc;}


body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block .sqs-block-content {transform: translate3d(200px,0,0);}
body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block .sqs-block-content {transform: translate3d(-200px,0,0);}

body:not(.sqs-edit-mode-active) .col .timeline-event .quote-block.in-view .sqs-block-content {transform: none;visibility: visible;opacity: 1;}

.quote-block iframe {max-width: 100% !important;}

@media screen and (max-width: 992px) {
body:not(.sqs-edit-mode-active) .col .timeline-event .quote-block .sqs-block-content {width: 250px;}
body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block .sqs-block-content {left: -298px;}
}

@media screen and (max-width: 600px) {
body:not(.sqs-edit-mode-active) .quote-block .sqs-block-content {transform:none !important;}
body:not(.sqs-edit-mode-active) .quote-block {margin-left: 20px !important;}
body:not(.sqs-edit-mode-active) .quote-block .sqs-block-content {width: calc(100vw - 91px);}
body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block .sqs-block-content {left: 45px;}
body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block blockquote, body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block figcaption {text-align: left;}
body:not(.sqs-edit-mode-active) .quote-block::after {top: 0;}
}
</style>

Code below will begin the timeline on the right side of the middle line with no sliding feature.

<script src="https://drive.google.com/uc?export=view&id=1iBS8Jg9Ty5bjY_5QllDLxcNH0EkcrJto"></script>

<script src="https://drive.google.com/uc?export=view&id=1TRYODB131CM86wLA5rYNgCwB8xEjM-Va"></script>

<style type="text/css">

.sqs-block-quote blockquote {overflow:hidden;}

.sqs-block-quote blockquote span, .quote-block figcaption::first-letter, .quote-block .source::first-letter {display: none !important;}

.quote-block {color:inherit;font-size: inherit;}

/* Header */ .quote-block h1 {color:inherit;font-size: inherit;margin: 10px 0 0;}

/* Image */ .quote-block img {max-width: 100%;margin: 15px 0;}

/* Date */ .quote-block.sqs-block-quote figcaption {font-size: 11px;font-weight: 500;}

/* Link */ .quote-block a {color: inherit;font-size: inherit;text-decoration: none;padding-bottom: 1px;background-image: -webkit-gradient(linear,left top,left bottom,from(#1c1c1c),to(#1c1c1c));background-image: -o-linear-gradient(#1c1c1c 0%,#1c1c1c 100%);background-image: linear-gradient(#1c1c1c 0%,#1c1c1c 100%);background-repeat: no-repeat;background-size: 100% 1px;background-position: 0 bottom;-webkit-transition: opacity 700ms cubic-bezier(.694,0,.335,1),background-position 100ms cubic-bezier(.694,0,.335,1);-o-transition: opacity 700ms cubic-bezier(.694,0,.335,1),background-position 100ms cubic-bezier(.694,0,.335,1);transition: opacity 700ms cubic-bezier(.694,0,.335,1),background-position 100ms cubic-bezier(.694,0,.335,1);}

/* Link Hover */ .quote-block a:hover {background-position: center bottom 3px;}

.sqs-block-quote figure {display: flex;flex-direction: column;margin: 0 3px;}

.sqs-block-quote blockquote {order: 2;margin: 4px;}

.sqs-block-quote figcaption {order: 1;}

body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block blockquote, body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block figcaption {text-align: left;}

body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block blockquote, body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block figcaption {text-align: right;}

body:not(.sqs-edit-mode-active) .quote-block figcaption {padding: 0;margin: 0 0 10px 0;line-height: initial !important;}

.quote-block figcaption::first-letter {visibility: hidden;font-size: 0;}

body:not(.sqs-edit-mode-active) .quote-block.sqs-block {list-style-type: none;position: relative;width: .5px !important;margin: 0 auto;padding: 0 0 50px !important;background: #cccccc;}

body:not(.sqs-edit-mode-active) .quote-block::after {content: '';position: absolute;left: 50%;top: 50%;transform: translateX(-50%);width: 10px;height: 10px;border-radius: 50%;background: inherit;}

body:not(.sqs-edit-mode-active) .col .timeline-event:first-child .quote-block::after {top: 0;}

body:not(.sqs-edit-mode-active) .col .timeline-event:last-child .quote-block::after {bottom: 0;top: unset;}

body:not(.sqs-edit-mode-active) .col .timeline-event .quote-block .sqs-block-content {position: relative;bottom: 0px;width: 400px;visibility: hidden;opacity: 0;transition: all .5s ease-in-out;padding: 0;}

body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block .sqs-block-content {left: 45px;}

body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block div {left: -445px;}

body:not(.sqs-edit-mode-active) .quote-block::after {background: #ffffff;}

body:not(.sqs-edit-mode-active) .quote-block.in-view::after {border: 1px solid #cccccc;}

body:not(.sqs-edit-mode-active) .col .timeline-event .quote-block.in-view .sqs-block-content {transform: none;visibility: visible;opacity: 1;}

.quote-block iframe {max-width: 100% !important;}

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

body:not(.sqs-edit-mode-active) .col .timeline-event .quote-block .sqs-block-content {width: 250px;}

body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block .sqs-block-content {left: -298px;}

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

body:not(.sqs-edit-mode-active) .quote-block .sqs-block-content {transform:none !important;}

body:not(.sqs-edit-mode-active) .quote-block {margin-left: 20px !important;}

body:not(.sqs-edit-mode-active) .quote-block .sqs-block-content {width: calc(100vw - 91px);}

body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block .sqs-block-content {left: 45px;}

body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block blockquote, body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block figcaption {text-align: left;}

body:not(.sqs-edit-mode-active) .quote-block::after {top: 0;}

</style>

Roger Smith 2/1/21 Roger Smith 2/1/21

Instructions for Customizing Timeline code

Customization Instructions

Adding Elements

Adding a Title

Within the quote area, copy and paste the text below. Replace the “Title” text below with your desired title.

<h1>*Title*</h1>

Adding a Link

Within the quote area, copy and paste the text below. Replace the text in asterisks (*) with the link.

Example 1: <p><a href=*link*>Link Text</a></p>

Example 2 (using a real link): <p><a href=*https://www.squarepaste.com/*>Link Text</a></p>

Example 3 (Opens link in new tab): <p><a href=*https://www.squarepaste.com/* target=_blank>Link Text</a></p>

Adding an Image

Within the quote area, copy and paste the text below. Replace the text in bold with the image’s link. To create or get the image link, you will need to upload your image via Custom CSS. Find out how to upload your image file here, Using the CSS Editor. Example 1: <img src=link /> Example 2 (using a real image link):

<img src=https://images.squarespace-cdn.com/content/v1/5ec1b134ff60074cba311b2d/1599599808099-IVD8G8I1K7AR6ILV2GTD/ke17ZwdGBToddI8pDm48kLkXF2pIyv_F2eUT9F60jBl7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0iyqMbMesKd95J-X4EagrgU9L3Sa3U8cogeb0tjXbfawd0urKshkc5MgdBeJmALQKw/image-asset.jpeg />

Example 3 (applying a width): <img src=imagelinkhere width=500 />

Adding a Video

Within the quote area, copy and paste the video’s embed code, then delete every quotation mark, “. An example from YouTube has been provided below. Replace the text in bold with the image’s link. <iframe width=560 height=315src=https://www.youtube.com/embed/EqvhEbOn7R8 frameborder=0 allowfullscreen>

Adding Audio

Within the quote area, copy and paste the audio’s embed code below. Replace the text in bold with the mp3 and/or ogg file link. Find out how to upload your audio file here, Uploading files. We recommend creating a private page, typing your audio file names, then creating links and uploading your file to each link.

MP3 Only :

<audio controls>
<source src=audio.mp3 type=audio/mpeg>
</audio>

OGG Only :

<audio controls>
<source src=audio.ogg type=audio/ogg>
</audio>

MP3 & OGG :

<audio controls>
<source src=audio.mp3 type=audio/mpeg>
<source src=audio.ogg type=audio/ogg>
</audio>

Customizing the Timeline

Change Font Color/Size

Copy and paste the following solutions right before the closing style tag in Step #1.

Change the text in bold to your desired color (Color Generator) and size.

/* Paragraph */ .quote-block blockquote {color: #000000;font-size: 14px;}
/* Date */ .quote-block.sqs-block-quote figcaption {color: #000000;font-size: 11px;}
/* Title */ .quote-block h1 {color: #000000;font-size: 26px;}
/* Link */ .quote-block a {color: #000000;font-size: 14px;}

Change Color of Line & Circle

Copy and paste the following solutions right before the closing style tag in Step #1.

Change the text in bold to your desired color (Color Generator).

/* Circle Border */ body:not(.sqs-edit-mode-active) .quote-block::after {border: 1px solid #cccccc !important;}
/* Circle Background */ body:not(.sqs-edit-mode-active) .quote-block::after {background: #ffffff !important;}
/* Line */ body:not(.sqs-edit-mode-active) .quote-block.sqs-block {background: #cccccc !important;}

Change Spacing Between Events

Copy and paste the following solutions right before the closing style tag in Step #1.

Change the text in bold to your desired number. The default number is 50.

body:not(.sqs-edit-mode-active) .quote-block.sqs-block {padding: 0 0 20px !important;}

Place Event Dots at Top of Each Event

Copy and paste the following solutions right before the closing style tag in Step #1.

body:not(.sqs-edit-mode-active) .quote-block::after {bottom: unset;top: 0;}

Align All Text to the Left>

Copy and paste the following solutions right before the closing style tag in Step #1.

body:not(.sqs-edit-mode-active) .quote-block blockquote, body:not(.sqs-edit-mode-active) .quote-block figcaption {text-align: left !important;}

Alternating Sides on Mobile Device

Copy and paste the following solutions right before the closing style tag in Step #1.

For Left Side only

@media screen and (max-width: 600px) {
 body:not(.sqs-edit-mode-active) .col .timeline-event .quote-block .sqs-block-content {width: 180px;}
 body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block .sqs-block-content {left: -194px;}
 body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block .sqs-block-content {left: 20px;}
 }

 @media screen and (max-width: 400px) {
 body:not(.sqs-edit-mode-active) .col .timeline-event .quote-block .sqs-block-content {width: 135px;}
 body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block .sqs-block-content {left: -150px;}
 body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block .sqs-block-content {left: 20px;}
 }

Roger Smith 2/1/21 Roger Smith 2/1/21

CSS Used in Site

Active CSS

.entry-dateline-link { display: none; } .banner-thumbnail-wrapper .color-overlay {background-color: rgba(0,0,0,0);}

#block-yui_3_17_2_1_1611962852179_3759 .summary-item {display: flex;}

#block-yui_3_17_2_1_1611962852179_3759 .summary-item .summary-content.sqs-gallery-meta-container { margin-top: auto; margin-bottom: auto; }

.sqs-simple-like {display: none;}

.like-count {display: none;}

.yui3-socialbutton-content {display: none;}

Explanation

.entry-dateline-link { display: none; } = removes date from blog posts

.banner-thumbnail-wrapper .color-overlay {background-color: rgba(0,0,0,0);} = removes color tint over header images (does not apply to the slides used for top level pages

#block-yui_3_17_2_1_1611962852179_3759 .summary-item {display: flex;}

#block-yui_3_17_2_1_1611962852179_3759 .summary-item .summary-content.sqs-gallery-meta-container { margin-top: auto; margin-bottom: auto; } = vertical align the text in the summary block list on the Press page to middle instead of top of the image.

.sqs-simple-like {display: none;} .like-count {display: none;} .yui3-socialbutton-content {display: none;}

= turns off likes, count of likes and sharing at the bottom of blog posts.

Squarepaste.com Timeline code - Overview

Instructions:

Page Header Code Injection

Code Block

Embed Block

How to add images to the CSS area for use within the Vertical Timeline quote blocks

This is a tedious, yet simple process.

Applying code to a single page - Timeline page

From the Pages area, select the Timeline Page Settings [Gear icon]

Click “Advanced” to show injected code for the page

Edit the code and click “Close.”

Active Vertical Timeline Code

Active Timeline Code

Original Vertical Timeline code from Squarepaste.com

Code as Provided

Instructions for Customizing Timeline code

Customization Instructions

Adding Elements

Adding a Title

Adding a Link

Adding an Image

Adding a Video

Adding Audio

Customizing the Timeline

Change Font Color/Size

Change Color of Line & Circle

Change the text in bold to your desired color (Color Generator).

Change Spacing Between Events

Change the text in bold to your desired number. The default number is 50.

Place Event Dots at Top of Each Event

Alternating Sides on Mobile Device

For Left Side only

CSS Used in Site

Explanation