Search block code

HTML

<!-- Begin Search Bar -->
<div id="coded-search-wrapper">
<div id="coded-search">
<div id="block-yui_3_17_2_12_1475347908415_5895" class="yui3-widget sqs-widget yui3-block-base sqs-block-modelsync sqs-block-search sqs-block search-block"> 
<div id="yui_3_17_2_12_1475347908415_5897" class="sqs-search-ui-text-input sqs-search-ui-button-wrapper color-light" data-source="block" data-preview="true" id="yui_3_17_2_12_1475347908415_6404"> 
<div class="spinner-wrapper" id="yui_3_17_2_12_1475347908415_6508" hidden="hidden" style="display: none;"></div>
<input type="search" class="search-input hover-effect" value placeholder="Search" id="yui_3_17_2_12_1475347908415_6784">
<div id="yui_3_17_2_12_1475347908415_6395" class="yui3-widget sqs-widget sqs-search-preview">
<div id="yui_3_17_2_12_1475347908415_6397" class="sqs-search-preview-content"></div>
</div>
</div>
</div>
  </div></div>
<!-- End Search Bar -->

Mobile responsive table

Mobile Responsive Table

Header color will be changed in the CSS. The last final row color is changed in the HTML inline styles. 

HTML

Table with H2 Column Heads, H3 Row Titles, and highlighted last row. 

<table class="responsive-table">
    <thead>
    <tr>
        <th><h2>Type of Mortgage</h2></th>
        <th><h2>Traditional</h2></th>
        <th><h2>Traditional</h2></th>
      <th><h2>Designed To Prosper</h2></th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td><h3>Term/Payoff</h3></td>
    <td> 30 Year </td>
    <td> 15 Year </td>
    <td> 5 Years, 1 Month**</td>
    </tr>
    <tr>
    <td><h3>Mtg. Amount</h3></td>
    <td> $250,000 </td>
    <td> $250,000 </td>
    <td> $250,000</td>
  </tr>
      <tr>
    <td><h3>Interest Rate</h3></td>
    <td> 3.75% </td>
    <td> 3.25% </td>
    <td> 3.75% </td>
  </tr>
        <tr>
    <td><h3>Min. Payment</h3></td>
    <td> $1157 </td>
    <td> $1757 </td>
    <td> $781 Decreasing Quickly</td>
  </tr>
        <tr>
    <td><h3>Total Interest Paid</h3></td>
    <td> $166,804 </td>
    <td> $66,201 </td>
    <td> $25,010</td>
  </tr>
        <tr>
    <td><h3>Mtg. Bal. at 5 Yr. 1 Mo. </h3></td>
    <td> $224,284 </td>
    <td> $177,225 </td>
    <td> $0</td>
  </tr>
        <tr>
    <td><h3>Saved Payments</h3></td>
    <td> $345,943 </td>
    <td> $209,083 </td>
          <td>-</td>
  </tr>
        <tr style="background-color: #FF0000; color: white!important;">
    <td><h3 style="color: white;">Interest Saved</h3></td>
    <td> $141,794 </td>
    <td> $41,191 </td>
        <td>Using Designed to Prosper</td>
    </tr>
    </tbody>
</table>

CSS

Update the color variables for the Headers at the top. On mobile, the final rows will need to be updated to reflect the column titles and the amount of columns in the table. 

@header-background: #68BF3F;
@header-text: #f1f1f1;

// Generic Styling, for Desktops/Laptops 
table { 
  width: 100%; 
}
tr:nth-of-type(odd) { background: #eee;  }
th { 
  background: @header-background; 
  font-weight: bold; 
}
td, th { 
  padding: .3em; 
  text-align: left; 
}

// Mobile
@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
// Force table to not be like tables anymore
    table, thead, tbody, th, td, tr { display: block;  }    

  // Hide table headers (but not display: none;, for accessibility)
    thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px; }
  
    tr { border-bottom: 1px solid #ccc; margin-left: -20px; margin-right: -20px; }

  // Behave  like a "row"
  td {  
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 60%;  }
    
// Now like a table header
  td:before { 
        position: absolute;
        top: 10px;
        left: 10px;
        width: 50%; 
        padding-right: 10px; 
        padding-left: 10px;
        white-space: nowrap;
    }
  
//  Add In Header Labels & Styles to New Table (Copy & Paste to Add New Column Titles on Mobile - Don't forget to change the nth type')
    td:nth-of-type(1):before { content: "1st Column Title"; background: @header-background; color: @header-text; font-size: 24px; }
    td:nth-of-type(2):before { content: "2nd Column Title"; background: @header-background; color: @header-text; font-size: 24px; }
    td:nth-of-type(3):before { content: "3rd Column Title"; background: @header-background; color: @header-text; font-size: 24px;}
    td:nth-of-type(4):before { content: "4th Column Title"; background: @header-background; color: @header-text; font-size: 24px;}
}


Sticky nav

CSS

The "width", "padding", and "right" attributes will need to be updated depending upon how long the words are for the calls to action.

You will also need to move the navigation down so that the buttons don't lay on top of the navigation.

@button-color: #ffa500;

//// Social Media ////
// Stylizes Social Media At Top of SIte
.social-gallery {
  position: fixed; 
  z-index: 999999;
  top: 5px;
  right: 315px;
  }
// Hides Social Media On Smaller Screens
@media screen and (max-width: 1024px) { .social-gallery { display: none;  } }

//// Stick Button Contact ////
// Style sticky button contact
.second-button a {color: white;}
.second-button:hover {opacity: .9; transition: all ease .5s;}

.second-button {
  position: fixed; 
  display: block;
  z-index: 999999;
  background-color: @button-color;
  right: 40px;
  width: 90px;
  padding: 10px 0px 10px 20px;
  margin-top: 0px!important;
  font-family: "Adobe Garamond Pro",Georgia,serif;
  font-weight: 400;
  font-size: 15px;
  }

// sticky cta on mobile
@media screen and (max-width: 768px) {
  .second-button {
    padding:15px 20px 10px 20px;
    right: 10px!important;
    top: -4px;
    width: 70px;
  }
}

// style sticky button admissions tickets
.first-button a {color: white;}
.first-button:hover {opacity: .9; transition: all ease .5s;}

.first-button {
  position: fixed; 
  display: block;
  z-index: 999999;
  background-color: @button-color;
  right: 155px;
  width: 115px;
  padding: 10px 0px 10px 25px;
  margin-top: 0px!important;
  font-family: "Adobe Garamond Pro",Georgia,serif;
  font-weight: 400;
  font-size: 15px;
  }

// sticky cta on mobile
@media screen and (max-width: 768px) {
  .first-button {
    padding: 15px 20px 10px 20px;
    right: 130px!important;
    width: 90px;
    top: -4px;
  }
}

Code Injection - Header

White Icons

<div class="first-button">  <a href="/events">ADMISSIONS</a></div>
<div class="second-button"><a href="/donate">CONTACT</a></div>
<div class="social-gallery">
  <a href="https://www.facebook.com/castcenters/" target="_blank"><img src="//static1.squarespace.com/static/5554ebc6e4b0f33dbaf91ce1/t/593831ef1b631b1aa4e1b5bf/1496855024016/FB+Icon.png" style="width: 20px; height: 20px; padding: 2px;"></a>
  <a href="https://www.instagram.com/castcenters/" target="_blank"><img src="//static1.squarespace.com/static/5554ebc6e4b0f33dbaf91ce1/t/593831f21b631b1aa4e1b5cb/1496855026294/IG+Icon.png" style="width: 20px; height: 20px; padding: 2px;"></a>
  <a href="https://twitter.com/castcenters" target="_blank"><img src="//static1.squarespace.com/static/5554ebc6e4b0f33dbaf91ce1/t/593831f4d482e9d9497001c4/1496855028563/Twitter+Icon.png" style="width: 20px; height: 20px; padding: 2px;"></a>
  <a href="https://youtube.com/castcenters" target="_blank"><img src="//static1.squarespace.com/static/5554ebc6e4b0f33dbaf91ce1/t/593831f8e6f2e1de4897b598/1496855032241/Youtube+Icon.png" style="width: 20px; height: 20px; padding: 2px;"></a>
    <a href="https://www.linkedin.com/in/titusmejia" target="_blank"><img src="//static1.squarespace.com/static/5554ebc6e4b0f33dbaf91ce1/t/593833359f7456e2786d572f/1496855349146/LinkedIn+Icon.png" style="width: 20px; height: 20px; padding: 2px;"></a>
  <a href="mailto:info@castcenters.com" target="_blank"><img src="//static1.squarespace.com/static/5554ebc6e4b0f33dbaf91ce1/t/593831fe1e5b6c832fe50b4d/1496855038134/Mail+Icon.png" style="width: 20px; height: 20px; padding: 2px;"></a>
</div>

Black Icons

<div class="first-button">  <a href="/events">ADMISSIONS</a></div>
<div class="second-button"><a href="/donate">CONTACT</a></div>
<div class="social-gallery">
  <a href="https://www.facebook.com/castcenters/" target="_blank"><img src="//static1.squarespace.com/static/5554ebc6e4b0f33dbaf91ce1/t/59383494a5790a9793c057ef/1496855700577/FB+Icon.png" style="width: 20px; height: 20px; padding: 2px;"></a>
  <a href="https://www.instagram.com/castcenters/" target="_blank"><img src="//static1.squarespace.com/static/5554ebc6e4b0f33dbaf91ce1/t/5938349659cc68b6c0f32c06/1496855702594/IG+Icon.png" style="width: 20px; height: 20px; padding: 2px;"></a>
  <a href="https://twitter.com/castcenters" target="_blank"><img src="//static1.squarespace.com/static/5554ebc6e4b0f33dbaf91ce1/t/59383499197aea38eb427f82/1496855705189/Twitter+Icon.png" style="width: 20px; height: 20px; padding: 2px;"></a>
  <a href="https://youtube.com/castcenters" target="_blank"><img src="//static1.squarespace.com/static/5554ebc6e4b0f33dbaf91ce1/t/5938349e03596e4aa835b1d2/1496855710323/Youtube+Icon.png" style="width: 20px; height: 20px; padding: 2px;"></a>
    <a href="https://www.linkedin.com/in/titusmejia" target="_blank"><img src="//static1.squarespace.com/static/5554ebc6e4b0f33dbaf91ce1/t/593834a0db29d6c8258cda6f/1496855712923/LinkedIn+Icon.png" style="width: 20px; height: 20px; padding: 2px;"></a>
  <a href="mailto:info@castcenters.com" target="_blank"><img src="//static1.squarespace.com/static/5554ebc6e4b0f33dbaf91ce1/t/5938349b03596e4aa835b186/1496855708027/Mail+Icon.png" style="width: 20px; height: 20px; padding: 2px;"></a>
</div>

All Templates


Countdown timer

CSS

// Countdown Timer
ul#countdown{
  text-align:center;
  margin: 0 auto;
}
ul#countdown li {
    color:#000;
    display: inline-block;
    margin-right:18px;
    margin-bottom:10px;
    width: 100px;
    height:100px;
    text-align: center;
    line-height:0px;
}
ul#countdown li span {
    font-size: 50px;
    font-weight: 500;
    color: #428957;
  letter-spacing: 2px;
    position: relative;
    line-height: 65px;
  top: 7px;
}

ul#countdown li p.timeRefDays,
ul#countdown li p.timeRefHours,
ul#countdown li p.timeRefMinutes,
ul#countdown li p.timeRefSeconds {
    text-transform:capitalize;
    text-align:center;
  font-weight: 500;
  font-size: 20px;
    padding-right:0px;
    line-height: 1px;
}

HTML

<ul id="countdown">
   <li><span class="days">00</span><p class="timeRefDays">days</p></li>
   <li><span class="hours">00</span><p class="timeRefHours">hours</p></li>
   <li><span class="minutes">00</span><p class="timeRefMinutes">minutes</p></li>
   <li><span class="seconds">00</span><p class="timeRefSeconds">seconds</p></li>
</ul>

JS

PAGE HEADER CODE INJECTION (ON PAGE OR INDEX)

You'll need to change the date and time on Line 8 of the JS.  The time is in military time (24 hour clock) Hours: Minutes: Seconds. 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
                           
    $("#countdown").countdown({
                date: "16 March 2018 00:00:00 PST",
                format: "on"
            },
            
            function() {
                // callback function
            });
});





(function($) {
    $.fn.countdown = function(options, callback) {

        thisEl = $(this);

        var settings = { 
            'date': null,
            'format': null
        };

        if(options) {
            $.extend(settings, options);
        }
        
        function countdown_proc() {
            
            eventDate = Date.parse(settings['date']) / 1000;
            currentDate = Math.floor($.now() / 1000);
            
            if(eventDate <= currentDate) {
                callback.call(this);
                clearInterval(interval);
            }
            
            seconds = eventDate - currentDate;
            
            days = Math.floor(seconds / (60 * 60 * 24)); 
            seconds -= days * 60 * 60 * 24;
            
            hours = Math.floor(seconds / (60 * 60));
            seconds -= hours * 60 * 60;
            
            minutes = Math.floor(seconds / 60);
            seconds -= minutes * 60;
            
            if (days == 1) { thisEl.find(".timeRefDays").text("day"); } else { thisEl.find(".timeRefDays").text("days"); }
            if (hours == 1) { thisEl.find(".timeRefHours").text("hour"); } else { thisEl.find(".timeRefHours").text("hours"); }
            if (minutes == 1) { thisEl.find(".timeRefMinutes").text("minute"); } else { thisEl.find(".timeRefMinutes").text("minutes"); }
            if (seconds == 1) { thisEl.find(".timeRefSeconds").text("second"); } else { thisEl.find(".timeRefSeconds").text("seconds"); }
            
            if(settings['format'] == "on") {
                days = (String(days).length >= 2) ? days : "0" + days;
                hours = (String(hours).length >= 2) ? hours : "0" + hours;
                minutes = (String(minutes).length >= 2) ? minutes : "0" + minutes;
                seconds = (String(seconds).length >= 2) ? seconds : "0" + seconds;
            }
            
            if(!isNaN(eventDate)) {
                thisEl.find(".days").text(days);
                thisEl.find(".hours").text(hours);
                thisEl.find(".minutes").text(minutes);
                thisEl.find(".seconds").text(seconds);
            } else { 
                alert("Invalid date. Here's an example: 12 Tuesday 2012 17:30:00");
                clearInterval(interval); 
            }
        }
        
        countdown_proc();
        
        interval = setInterval(countdown_proc, 1000);
        
    }
}) (jQuery);
</script>


Carousel arrows bigger spread apart

CSS

// Increases the arrows on Carousel Summary Blocks
.sqs-gallery-design-carousel .sqs-gallery-controls .next:before { font-family: 'squarespace-ui-font'; font-style: normal; speak: none; font-weight: normal; -webkit-font-smoothing: antialiased; content: "\E003"; text-align: center; display: inline-block; vertical-align: middle; font-size: 32px; width: 16px; height: 32px; line-height: 32px; }
.sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { font-family: 'squarespace-ui-font'; font-style: normal; speak: none; font-weight: normal; -webkit-font-smoothing: antialiased; content: "\E000"; text-align: center; display: inline-block; vertical-align: middle; font-size: 32px; width: 16px; height: 32px; line-height: 32px; }
.summary-heading { text-align: center !important; font-size: 24px; }
.summary-header-text{ position: relative !important; padding: 0 !important; left: 45px!important; }
.summary-carousel-pager .previous { position: absolute !important; left: -25px !important; right: inherit !important; top: 45%!important;}
.summary-carousel-pager .next { position: absolute !important; right: -10px !important; left: inherit !important; top: 45%!important;}
// MOVES ARROWS UP ON MOBILE
@media screen and (max-width:640px) {
  .summary-carousel-pager .previous { position: absolute !important; left: 0px !important; right: inherit !important;  top: 6%!important;}
.summary-carousel-pager .next { position: absolute !important; right: 12px !important; left: inherit !important; top: 6%!important;}
}

OLD CODE/ BACK UP IN CASE SOMETHING AT THE TOP IS MESSED UP

.sqs-gallery-design-carousel .sqs-gallery-controls .next, .sqs-gallery-design-carousel .sqs-gallery-controls .previous { display: block; float: right; position: relative; top: auto; left: -15px; right: 15px; bottom: auto; margin: 0 0 15px 0; padding: 0; background-color: transparent; color: inherit !important; font-size: 16px; line-height: 16px; cursor: pointer; } .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { font-family: 'squarespace-ui-font'; font-style: normal; speak: none; font-weight: normal; -webkit-font-smoothing: antialiased; content: "\E003"; text-align: center; display: inline-block; vertical-align: middle; } .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { font-size: 64px; width: 64px; height: 64px; line-height: 64px; } .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { font-size: 32px; width: 16px; height: 32px; line-height: 32px; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous { margin-right: 10px; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { font-family: 'squarespace-ui-font'; font-style: normal; speak: none; font-weight: normal; -webkit-font-smoothing: antialiased; content: "\E000"; text-align: center; display: inline-block; vertical-align: middle; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { font-size: 64px; width: 64px; height: 64px; line-height: 64px; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { font-size: 32px; width: 16px; height: 32px; line-height: 32px; } .sqs-block-summary-v2 .summary-heading { font-size: 24px; } .summary-heading { text-align: center !important; } .summary-carousel-pager .previous { position: absolute !important; left: 18px !important; right: inherit !important; } .summary-header-text{ position: relative !important; padding: 0 !important; left: 25px !important; }


Typing Animation

HTML

You can edit the text but don't change any of the text in < brackets >. You can also duplicate the <b> lines to add more animated lines. Copy the last line (<b>letters</b>) and create paste it on the next line in the same position.

<section class="sp-intro">
    <h4 class="sp-headline letters type">
        <span>Simple demonstration</span>
        <span class="sp-words-wrapper">
            <b class="is-visible">text</b>
            <b>words</b>
            <b>letters</b>
        </span>
    </h4>
</section>

CSS

/* TYPING ANIMATION CSS */

.sp-intro {
width: 90%;
max-width: 90%;
text-align: center;
margin: 0 auto;
}
.sp-intro, .sp-words-wrapper {
h4, b, i, p, span {
line-height: 56px;
font-size: 44px;
font-weight: 400;
color: #111111;
font-style: initial;
}
}
.sp-words-wrapper {
display: inline-block;
position: relative;
text-align: left;
}
.sp-words-wrapper b {
display: inline-block;
position: absolute;
white-space: nowrap;
left: 0;
top: 0;
}
.sp-words-wrapper b.is-visible {
position: relative;
}
.no-js .sp-words-wrapper b {
opacity: 0;
}
.no-js .sp-words-wrapper b.is-visible {
opacity: 1;
}

.sp-headline.type .sp-words-wrapper {
vertical-align: top;
overflow: hidden;
}
.sp-headline.type .sp-words-wrapper.waiting::after {
content: '';
position: absolute;
right: 0;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
height: 100%;
width: 1px;
background-color: #111;
-webkit-animation: sp-pulse 1s infinite;
-moz-animation: sp-pulse 1s infinite;
animation: sp-pulse 1s infinite;
}
.sp-headline.type .sp-words-wrapper.selected {
background-color: #ccc;
}
.sp-headline.type .sp-words-wrapper.selected::after {
visibility: hidden;
}
.sp-headline.type .sp-words-wrapper.selected b {
color: #0d0d0d;
}
.sp-headline.type b {
visibility: hidden;
}
.sp-headline.type b.is-visible {
visibility: visible;
}
.sp-headline.type i {
position: absolute;
visibility: hidden;
}
.sp-headline.type i.in {
position: relative;
visibility: visible;
}

@-webkit-keyframes sp-pulse {
0% {
-webkit-transform: translateY(-50%) scale(1) !important;
opacity: 1;
}
40% {
-webkit-transform: translateY(-50%) scale(0.9) !important;
opacity: 0;
}
100% {
-webkit-transform: translateY(-50%) scale(0) !important;
opacity: 0;
}
}
@-moz-keyframes sp-pulse {
0% {
-moz-transform: translateY(-50%) scale(1);
opacity: 1;
}
40% {
-moz-transform: translateY(-50%) scale(0.9);
opacity: 0;
}
100% {
-moz-transform: translateY(-50%) scale(0);
opacity: 0;
}
}
@keyframes sp-pulse {
0% {
-webkit-transform: translateY(-50%) scale(1);
-moz-transform: translateY(-50%) scale(1);
-ms-transform: translateY(-50%) scale(1);
-o-transform: translateY(-50%) scale(1);
transform: translateY(-50%) scale(1);
opacity: 1;
}
40% {
-webkit-transform: translateY(-50%) scale(0.9);
-moz-transform: translateY(-50%) scale(0.9);
-ms-transform: translateY(-50%) scale(0.9);
-o-transform: translateY(-50%) scale(0.9);
transform: translateY(-50%) scale(0.9);
opacity: 0;
}
100% {
-webkit-transform: translateY(-50%) scale(0);
-moz-transform: translateY(-50%) scale(0);
-ms-transform: translateY(-50%) scale(0);
-o-transform: translateY(-50%) scale(0);
transform: translateY(-50%) scale(0);
opacity: 0;
}
}
// TABLET STYLES
@media (min-width : 668px) and (max-width : 1024px) {
.sp-intro, .sp-words-wrapper {
h4, b, i, p, span {
line-height: 46px !important;
font-size: 38px !important;
font-weight: 400 !important;
}
}
}
// MOBILE STYLES
@media (max-width : 667px) {
.sp-intro, .sp-words-wrapper {
h4, b, i, span, p {
line-height: 36px !important;
font-size: 28px !important;
font-weight: 400 !important;
}
}
}
/* END OF TYPING ANIMATION */

JS - Page Header Code Injection

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){

var animationDelay = 2500,
barAnimationDelay = 3800,
barWaiting = barAnimationDelay - 3000, 
lettersDelay = 50,
typeLettersDelay = 150,
selectionDuration = 500,
typeAnimationDelay = selectionDuration + 800,
revealDuration = 600,
revealAnimationDelay = 1500;

initHeadline();


function initHeadline() {

singleLetters($('.sp-headline.letters').find('b'));
animateHeadline($('.sp-headline'));
}

function singleLetters($words) {
$words.each(function(){
var word = $(this),
letters = word.text().split(''),
selected = word.hasClass('is-visible');
for (i in letters) {
if(word.parents('.rotate-2').length > 0) letters[i] = '<em>' + letters[i] + '</em>';
letters[i] = (selected) ? '<i class="in">' + letters[i] + '</i>': '<i>' + letters[i] + '</i>';
}
var newLetters = letters.join('');
word.html(newLetters).css('opacity', 1);
});
}

function animateHeadline($headlines) {
var duration = animationDelay;
$headlines.each(function(){
var headline = $(this);

if(headline.hasClass('loading-bar')) {
duration = barAnimationDelay;
setTimeout(function(){ headline.find('.sp-words-wrapper').addClass('is-loading') }, barWaiting);
} else if (headline.hasClass('clip')){
var spanWrapper = headline.find('.sp-words-wrapper'),
newWidth = spanWrapper.width() + 10
spanWrapper.css('width', newWidth);
} else if (!headline.hasClass('type') ) {

var words = headline.find('.sp-words-wrapper b'),
width = 0;
words.each(function(){
var wordWidth = $(this).width();
if (wordWidth > width) width = wordWidth;
});
headline.find('.sp-words-wrapper').css('width', width);
};

setTimeout(function(){ hideWord( headline.find('.is-visible').eq(0) ) }, duration);
});
}

function hideWord($word) {
var nextWord = takeNext($word);

if($word.parents('.sp-headline').hasClass('type')) {
var parentSpan = $word.parent('.sp-words-wrapper');
parentSpan.addClass('selected').removeClass('waiting');
setTimeout(function(){ 
parentSpan.removeClass('selected'); 
$word.removeClass('is-visible').addClass('is-hidden').children('i').removeClass('in').addClass('out');
}, selectionDuration);
setTimeout(function(){ showWord(nextWord, typeLettersDelay) }, typeAnimationDelay);

} else if($word.parents('.sp-headline').hasClass('letters')) {
var bool = ($word.children('i').length >= nextWord.children('i').length) ? true : false;
hideLetter($word.find('i').eq(0), $word, bool, lettersDelay);
showLetter(nextWord.find('i').eq(0), nextWord, bool, lettersDelay);

}else if($word.parents('.sp-headline').hasClass('clip')) {
$word.parents('.sp-words-wrapper').animate({ width : '2px' }, revealDuration, function(){
switchWord($word, nextWord);
showWord(nextWord);
});

} else if ($word.parents('.sp-headline').hasClass('loading-bar')){
$word.parents('.sp-words-wrapper').removeClass('is-loading');
switchWord($word, nextWord);
setTimeout(function(){ hideWord(nextWord) }, barAnimationDelay);
setTimeout(function(){ $word.parents('.sp-words-wrapper').addClass('is-loading') }, barWaiting);

} else {
switchWord($word, nextWord);
setTimeout(function(){ hideWord(nextWord) }, animationDelay);
}
}

function showWord($word, $duration) {
if($word.parents('.sp-headline').hasClass('type')) {
showLetter($word.find('i').eq(0), $word, false, $duration);
$word.addClass('is-visible').removeClass('is-hidden');

}else if($word.parents('.sp-headline').hasClass('clip')) {
$word.parents('.sp-words-wrapper').animate({ 'width' : $word.width() + 10 }, revealDuration, function(){ 
setTimeout(function(){ hideWord($word) }, revealAnimationDelay); 
});
}
}

function hideLetter($letter, $word, $bool, $duration) {
$letter.removeClass('in').addClass('out');

if(!$letter.is(':last-child')) {
 setTimeout(function(){ hideLetter($letter.next(), $word, $bool, $duration); }, $duration);
} else if($bool) { 
 setTimeout(function(){ hideWord(takeNext($word)) }, animationDelay);
}

if($letter.is(':last-child') && $('html').hasClass('no-csstransitions')) {
var nextWord = takeNext($word);
switchWord($word, nextWord);
} 
}

function showLetter($letter, $word, $bool, $duration) {
$letter.addClass('in').removeClass('out');

if(!$letter.is(':last-child')) { 
setTimeout(function(){ showLetter($letter.next(), $word, $bool, $duration); }, $duration); 
} else { 
if($word.parents('.sp-headline').hasClass('type')) { setTimeout(function(){ $word.parents('.sp-words-wrapper').addClass('waiting'); }, 200);}
if(!$bool) { setTimeout(function(){ hideWord($word) }, animationDelay) }
}
}

function takeNext($word) {
return (!$word.is(':last-child')) ? $word.next() : $word.parent().children().eq(0);
}

function takePrev($word) {
return (!$word.is(':first-child')) ? $word.prev() : $word.parent().children().last();
}

function switchWord($oldWord, $newWord) {
$oldWord.removeClass('is-visible').addClass('is-hidden');
$newWord.removeClass('is-hidden').addClass('is-visible');
}
});
</script>


Accordiant Dropdown

HTML - MARKDOWN

Paste the following sample text into the Markdown block’s edit panel. Edit the sample text with your own content, and replicate it to create more tabs in the accordion. Be careful to maintain the structure shown in the sample.

**+** Title line or FAQ?
--------------------------------------------------
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</br>

**+** As many headings as required...
--------------------------------------------------
Enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</br>

CSS

@accent-color: #F65959;

.sqs-block-markdown {
  h2 {
    font-size: 28px;
    font-weight: 800;
    margin-top: 10px;
    strong {
      color: @accent-color;
      padding-right: 8px;
    }
  }
  p {
    border-top: solid 1px #ccc;
    padding-top: 15px;
  }
}

JS - Code Injection Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>

init();             //Start the code when the page loads

function init(){
    $('.sqs-block-markdown h2').nextUntil('.sqs-block-markdown h2').slideUp();      //Your code (wrapped in a function)
    $('.sqs-block-markdown h2').unbind().click(function(){
        $('.sqs-block-markdown h2').not(this).nextUntil('.sqs-block-markdown h2').slideUp(),
        $(this).nextUntil('.sqs-block-markdown h2').slideToggle();
    });
  $('.sqs-block-markdown h2').css('cursor','pointer');
}

document.addEventListener('pageChange', function(){             //When the change page event fires due to ajax
    init();                                                     //Call the code again
});

/*This stuff listens for an ajax page change*/
window.onload = watch;
function watch(){MutationObserver=window.MutationObserver||window.WebKitMutationObserver;var a=new MutationObserver(function(a){for(var b=0;b<a.length;b++){var c=a[b];if("attributes"===c.type){var d=new Event("pageChange");document.dispatchEvent(d)}}});a.observe(document.body,{attributes:!0,attributeFilter:["id"]})}
</script>


Animated vertical timeline

HTML 

You can edit the text but don't change any of the text in < brackets >. You can also add or remove items on the timeline by selecting everything from the opening item tag  <!- TIMELINE ITEM -!>  to the end item tag <!- END OF TIMELINE ITEM -!>.

NOTE: Ensure all odd TIMELINE ITEMS include the js--fadeInLeft tag, and all even TIMELINE ITEMS include the js--fadeInRight tag.

Edit the titles by altering the h2 lines, and edit the text by editing the p lines.

<section class="timeline">
    <div class="container">

      <!- TIMELINE ITEM -!>
      <div class="timeline-item">
                <div class="timeline-img"></div>
        <div class="timeline-content js--fadeInLeft">
          <h2>Project Briefing</h2>
            <div class="Xdate">JAN 3RD 2017</div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
        </div>
      </div>
        <!- END OF TIMELINE ITEM -!>
        <!- TIMELINE ITEM -!>
      <div class="timeline-item">
                <div class="timeline-img"></div>
        <div class="timeline-content timeline-card js--fadeInRight">
            <h2>Title</h2>
            <div class="Xdate">DATE OR SUBTITLE</div>
          <p>Adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
        </div>
      </div>
        <!- END OF TIMELINE ITEM -!>
        <!- TIMELINE ITEM -!>
      <div class="timeline-item">
                <div class="timeline-img"></div>
        <div class="timeline-content timeline-card js--fadeInLeft">
            <h2>Project Spec Outlined</h2>
            <div class="Xdate">FEB 2ND 2017</div>
          <p>Dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
        </div>
      </div>
        <!- END OF TIMELINE ITEM -!>
        <!- TIMELINE ITEM -!>
      <div class="timeline-item">
                <div class="timeline-img"></div>
        <div class="timeline-content timeline-card js--fadeInRight">
            <h2>Final Launch</h2>
            <div class="Xdate">MARCH 10TH 2017</div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
        </div>
      </div>
        <!- END OF TIMELINE ITEM -!>
      
    </div>
  </section>

CSS

Update hex codes as necessary for colors. 

// COLORS
  // LINE
  .timeline:before {
    background: #36D7B7;
  }
  // DOTS
  .timeline-img {
  background: #E9D460;
  }
  // TIMELINE ITEM BACKGROUND
  .timeline-content {
    background: #fafafa;
  }
  // SUBTITLE AREA
  .Xdate {
    background: #36D7B7;
    color: #fff;
  }
  
  
  .timeline:before {
    content: '';
    width: 5px;
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .timeline-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  margin-top: 65px;
  margin-left: -15px;
}
    .timeline-item:nth-child(even) {
      .timeline-content {
        float: right;
        .Xdate {
          right: auto;
          left: 0;
        }
        &::after {
          content: '';
          position: absolute;
          border-style: solid;
          width: 0;
          height: 0;
          top: 70px;
          left: -15px;
          border-width: 10px 15px 10px 0;
          border-color: transparent #fafafa transparent transparent;
        }
      }
    }
  .timeline-item {
    width: 100%;
    margin-bottom: 70px;
    &::after {
      content: '';
      display: block;
      clear: both;
    }
  }
  .timeline-content {
    position: relative;
    width: 45%;
    box-sizing: border-box !important;
        padding: 80px 40px 40px 40px !important;
    border-radius: 1px;
    &::after {
      content: '';
      position: absolute;
      border-style: solid;
      width: 0;
      height: 0;
      top: 70px;
      right: -15px;
      border-width: 10px 0 10px 15px;
      border-color: transparent transparent transparent #fafafa;
    }
  }
  .Xdate {
    display: inline-block;
    padding: 10px 40px;
    font-size: 13px;
    position: absolute;
    top: 0;
    width: 100%;
    box-sizing: border-box !important;
    right: 0;
  }

  @media screen and (max-width: 768px) {
    .timeline {
      &::before {
        left: 20px;
      }
    .timeline-img {
      left: 20px;
    }
      .timeline-content {
        max-width: 100%;
        width: auto;
        margin-left: 70px;
      }
      .timeline-item {
        &:nth-child(even) {
          .timeline-content {
            float: none;
          }
        }
        &:nth-child(odd) {
          .timeline-content {
            &::after {
              content: '';
              position: absolute;
              border-style: solid;
              width: 0;
              height: 0;
              top: 70px;
              left: -15px;
              border-width: 10px 15px 10px 0;
              border-color: transparent #fafafa transparent transparent;
            }
          }
        }
      }
    }
  }

JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/scrollreveal.js/3.3.1/scrollreveal.min.js"></script>
<script>
$(function(){

  window.sr = ScrollReveal();

  if ($(window).width() < 768) {

    if ($('.timeline-content').hasClass('js--fadeInLeft')) {
        $('.timeline-content').removeClass('js--fadeInLeft').addClass('js--fadeInRight');
    }

    sr.reveal('.js--fadeInRight', {
        origin: 'right',
        distance: '30px',
        easing: 'ease-in-out',
        duration: 800,
      });

  } else {
    
    sr.reveal('.js--fadeInLeft', {
        origin: 'left',
        distance: '30px',
          easing: 'ease-in-out',
        duration: 800,
      });

      sr.reveal('.js--fadeInRight', {
        origin: 'right',
        distance: '30px',
        easing: 'ease-in-out',
        duration: 800,
      });

  }
  
  sr.reveal('.js--fadeInLeft', {
        origin: 'left',
        distance: '30px',
          easing: 'ease-in-out',
        duration: 800,
      });

      sr.reveal('.js--fadeInRight', {
        origin: 'right',
        distance: '30px',
        easing: 'ease-in-out',
        duration: 800,
      });


});

</script>


Auto update copyright footer

HTML

Add: " #date " in the footer for the auto updating date. Type a space, then  highlight the space, make it a link and add the external link to be #date. 

CSS

// Removes Underline from Links in Footer
#preFooter a, #footer a { border: 0px solid red !important;}

JS - Code Injection - Footer

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<!-- BEGIN AUTO UPDATING DATE -->
<script>
  $("a[href='#date']").html(new Date().getFullYear());
</script>
<!-- END AUTO UPDATING DATE -->

CSS Template

Helpful outline for Sqs Custom CSS

//-----------------------------------//
//  Index:
//  1. Variables
//     - Images
//     - Typography
//     - Colors
//  2 - Header
//  3 - Global Page/Blog Styles
//  4 - Home Page Styles
//  5 - Subpage 1 Styles
//  6 - Subpage 2 Styles
//  7 - Subpage 3 Styles
//  8 - Footer Styles
//------------------------------------//
// 1. VARIABLES 
//------------------------------------//


//------------------------------------//
//  Images
//------------------------------------//


//------------------------------------//
//  Typography
//------------------------------------//


//------------------------------------//
//  Colors
//------------------------------------//


//------------------------------------//
// 2. HEADER
//------------------------------------//


//------------------------------------//
// 3. GLOBAL PAGE STYLES
//------------------------------------//


//------------------------------------//
// 4. HOME PAGE EDITS
//------------------------------------//


//------------------------------------//
// 5. PAGE SPECIFIC EDITS
//------------------------------------//


//------------------------------------//
// 6. PAGE SPECIFIC EDITS
//------------------------------------//


//------------------------------------//
// 7. PAGE SPECIFIC EDITS
//------------------------------------//


//------------------------------------//
// 8. FOOTER
//------------------------------------//


Inject img before heading

CHANGE THE IMAGE URL AND DIMENSIONS ACCORDINGLY.

h1:not(#logoImage):before {
    content: ''; 
    display: inline-block!important;
    width: 50px;
    height: 60px;
    background-image: @logo-element;
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: bottom;
    margin-left: -15px;
    margin-bottom: -10px;
}

Inject image in form block

Put an image in a form block, before the description.

.description:before {
    content: ''; 
    display: inline-block!important;
    float: left!important;
    width: 308px;
    height: 440px;
    background-image: url(' //static1.squarespace.com/static/58ed3c2c3e00bec5b2d89275/t/58ed40b22994caabb23d3315/1491943603091/dr.-lipari.jpg');
    background-repeat: no-repeat;
    margin-bottom: 10px;
    margin-right: 25px;
}

Removes hyphens

// remove HYPHENS
* {-webkit-hyphens: manual !important;
  -moz-hyphens: manual !important;
  -ms-hyphens: manual !important;
  hyphens: manual !important;}

Gradient banner overlay

Change div ID or class to apply overlay to correct container.

#div {
  width: 100%;
  height: 100%;
  &:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(to top left,#3d59e6,#00188f);
    opacity: .75; 
  }
}

Tab plugin

Add html code block to start tab section:

<div class="tabs-start"></div>

Next add a line of code for the first tabbed section. Name it whatever that content section is:

<div class="tab-section">Overview</div>

After this code block, add whatever content you want in that first tab through normal squarespace blocks. Ex: If you want text content, add & style it through a normal text block. If you want images, add a gallery block... etc.

Repeat the the line of code for each subsequent tab section and give it a unique name. Add the content under that accordingly:

<div class="tab-section">Tab Section 2</div>

Lastly add the javascript the advanced code injection:

/* HEADER CODE INJECTION */
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

/* FOOTER CODE INJECTION */
<style type="text/css">
/*=============== SQUARE STUDIO TABBED CONTENT PLUGIN START ===============*/
.sqpl-tab-button{cursor:pointer;display:inline-block;border-bottom:2px solid transparent;padding:.5em 2em;margin:0;text-align:center;color:#888;position:relative;z-index:3}.sqpl-tab-button:hover{border-bottom:2px solid #000;color:#000}.sqpl-active-tab{border-bottom:2px solid #000;color:#000}.sqpl-tab-content{border-top:2px solid #d4d4d4;z-index:1}.sqpl-tab-controls{margin-bottom:-2px;z-index:2}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
function init_sqpl_tabs(){tab_groups=[],build_tabs();var a=block_search();a.length>0&&(find_tabs(a),find_tab_heights(),create_tab_wrappers(),add_tab_buttons(),load_first_tabs())}function build_tabs(){$(".tabs-start").each(function(a,b){$(this).closest(".sqs-block").addClass("tabs-start-parent")}),$(".tabs-end").each(function(a,b){$(this).closest(".sqs-block").addClass("tabs-end-parent")}),$(".tabs-start-parent").each(function(a,b){$(this).before('<div id="sqpl-tab-group-'+a+'" class="sqpl-tabs"><div class="sqpl-tab-controls"></div><div class="sqpl-tab-content"></div></div>')}),$(".sqpl-tab-content").css({overflow:"hidden",position:"relative"})}function block_search(){var a=[];return $(".tabs-start-parent").each(function(b,c){var d=[];$(this).nextUntil(".tabs-end-parent").each(function(a,b){d.push($(this))}),a.push(d)}),$(".tabs-start-parent").remove(),$(".tabs-end-parent").remove(),a}function find_tabs(a){for(var b=0;b<a.length;b++){for(var c=a[b],d=[],e=[],f="",g=!1,h=0;h<c.length;h++)c[h].find(".tab-section").length>0?(0==g?g=!0:(d.push({elements:e,tab_name:f}),f="",e=[]),f=c[h].text(),c[h].remove()):g&&e.push(c[h]);d.push({elements:e,tab_name:f}),tab_groups.push(d)}}function find_tab_heights(){for(var a=0;a<tab_groups.length;a++)for(var b=tab_groups[a],c=0;c<b.length;c++){var d=b[c].elements[0],e=b[c].elements[b[c].elements.length-1],f=d.offset().top,g=e.offset().top+e.outerHeight(),h=g-f;b[c].section_height=h}}function create_tab_wrappers(){for(var a=0;a<tab_groups.length;a++)for(var b=$("#sqpl-tab-group-"+a).find(".sqpl-tab-content"),c=tab_groups[a],d=0;d<c.length;d++){b.append('<div class="sqpl-tab sqpl-tab-'+d+'"></div>'),c[d].wrapper=$("#sqpl-tab-group-"+a).find(".sqpl-tab-"+d),c[d].wrapper.css("opacity",0);for(var e=0;e<c[d].elements.length;e++)c[d].wrapper.append(c[d].elements[e])}$(".sqpl-tab").css({position:"absolute",width:"100%"})}function add_tab_buttons(){for(var a=0;a<tab_groups.length;a++){for(var b=tab_groups[a],c=$("#sqpl-tab-group-"+a).find(".sqpl-tab-controls"),d=0;d<b.length;d++)c.append('<div class="sqpl-tab-button sqpl-tab-button-'+d+'" sqpl-tab="'+d+'" sqpl-group="'+a+'">'+b[d].tab_name+"</div>"),b[d].button=$("#sqpl-tab-group-"+a).find(".sqpl-tab-button-"+d),b[d].button.click(function(){var a=parseInt($(this).attr("sqpl-tab")),b=parseInt($(this).attr("sqpl-group"));load_tab(b,a)});tab_groups[a].group_wrapper=$("#sqpl-tab-group-"+a),tab_groups[a].content_wrapper=$("#sqpl-tab-group-"+a).find(".sqpl-tab-content"),tab_groups[a].controls_wrapper=$("#sqpl-tab-group-"+a).find(".sqpl-tab-controls"),tab_groups[a].current_tab=0}}function load_first_tabs(){for(var a=0;a<tab_groups.length;a++){var b=tab_groups[a],c=b.current_tab;b[c].wrapper.css({top:"25px",opacity:1}),b.content_wrapper.css({height:b[c].section_height});for(var d=0;d<b.length;d++)d!=c&&b[d].wrapper.css("top",b[c].section_height+50);b.controls_wrapper.find(".sqpl-tab-button-"+c).toggleClass("sqpl-active-tab")}}function load_tab(a,b){var c=tab_groups[a],d=c.current_tab;if(b!=d){find_tab_heights(),c.controls_wrapper.find(".sqpl-tab-button-"+d).toggleClass("sqpl-active-tab"),c.controls_wrapper.find(".sqpl-tab-button-"+b).toggleClass("sqpl-active-tab"),c[d].wrapper.animate({opacity:0},{duration:300,complete:function(){$(this).css("top",c[b].section_height+100)}}),c[b].wrapper.css("top","25px"),c[b].wrapper.animate({opacity:1},{duration:300}),c.content_wrapper.css({height:c[b].section_height+25});for(var e=0;e<c.length;e++)e!=b&&e!=d&&c[e].wrapper.css("top",c[b].section_height+100);c.current_tab=b}}function interval(a,b,c){var d=function(b,c){return function(){if("undefined"==typeof c||c-- >0){setTimeout(d,b);try{a.call(null)}catch(a){throw c=0,a.toString()}}}}(b,c);setTimeout(d,b)}function watch(){MutationObserver=window.MutationObserver||window.WebKitMutationObserver;var a=new MutationObserver(function(a){for(var b=0;b<a.length;b++){var c=a[b];if("attributes"===c.type){var d=new Event("pageChange");document.dispatchEvent(d)}}});a.observe(document.body,{attributes:!0,attributeFilter:["id"]})}var tab_groups=[];$(document).ready(function(){init_sqpl_tabs()});var update_tab_heights=function(){find_tab_heights();for(var a=0;a<tab_groups.length;a++){var b=tab_groups[a],c=b[b.current_tab].section_height;b.content_wrapper.css({height:c+25})}};interval(update_tab_heights,2e3,5),document.addEventListener("pageChange",function(){init_sqpl_tabs()}),window.onload=watch;
/*================ SQUARE STUDIO TABBED CONTENT PLUGIN END ================*/
</script>

Add custom styling through inspecting and targeting specific classes.

Blog circle style

Custom CSS
// BLOG SUMMARY 1
.sqs-gallery-design-autocolumns .sqs-gallery-design-autocolumns-slide img {
 height: 80px;
 width: auto;
 margin: 0 auto;
 position: absolute;
}
 
.sqs-gallery-design-autocolumns .sqs-gallery-design-autocolumns-slide .summary-thumbnail.img-wrapper {
 height: 80px;
 width: 80px;
 margin: 0 auto;
 border-radius: 200px;
 overflow: hidden;
}
 
.sqs-block-summary-v2 .summary-excerpt {
 margin-bottom: 20px;
}
 
.sqs-gallery-design-autocolumns .summary-content.sqs-gallery-meta-container {
 border-top: solid 3px #4ECDC4;
 background: #fafafa;
} 
 .sqs-gallery-design-autocolumns .summary-content.sqs-gallery-meta-container {
 padding: 55px 30px 30px 30px;
}
 .sqs-gallery-design-autocolumns .summary-content.sqs-gallery-meta-container {
 margin-top: -55px;
}

.summary-title a {
 font-weight: 700;
}
 
.summary-read-more-link {
 display: inline !important;
 text-transform: uppercase;
 background: #4ECDC4 ;
 color: #fff !important;
 font-size: 12px;
 padding: 5px 12px;
}
 
.summary-read-more-link:hover {
 border-radius: 100px !important;
 transition: all ease-in-out 1200ms;
} 
 
.summary-metadata-container.summary-metadata-container--below-content {
 text-align: right;
 display: block;
 margin-top: -18px;
}

PRIMARY INFORMATION TO DISPLAY:

Title, Thumbnail, Excerpt, Read More Link.

Primary Metadata:
Date Posted

Secondary Metadata:
None

Recommendation: Images to be cropped SQUARE in Blog Post Settings.

Inject Faux banner

ADD THIS TO THE PAGE HEADER CODE INJECTION FOR THE BLOG.

<style>
  .Header.Header--bottom {background-image: url('//static1.squarespace.com/static/59e00594d55b41c2c7c2cf78/t/59e6a14564b05f6bc9855313/1508286789602/footer5.jpg'); background-size: cover; background-position: center; padding-bottom: 30px;}
  .Header-nav-item {color: white!important;}
</style>

Lazy load

JS

You'll need to update which specific animation you want to use from https://github.com/daneden/animate.css/blob/master/animate.css i.e. BounceUp, Fade In, etc. You'll also need to update the Block ID or Class used below.

<!-- Lazy Load Begin-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(window).ready(function() {
$('#block-yui_3_17_2_2_1517017989706_17900').each(function(){var o=$(this).offset().top,n=$(window).scrollTop();n+2000>o&&$(this).addClass("animated fadeInUp")})});
</script>
<!-- Lazy Load Begin-->

CSS

You'll need to update which specific animation you want to use from https://github.com/daneden/animate.css/blob/master/animate.css i.e. BounceUp, Fade In, etc.

You'll also need to update the Block ID or Class used above.

// Animate General
.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility: visible !important; }
.animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }

// INSERT SPECIFIC ANIMATION REQUEST HERE
Choose From https://github.com/daneden/animate.css/blob/master/animate.css

// Hides Block Before Animation Then Displays
#block-yui_3_17_2_2_1517017989706_17900 { visibility:hidden;}

// Delays Animation From First Load
#block-yui_3_17_2_2_1517017989706_17900 {animation-delay: 4s;}