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;}
 }

---