Cookies Popup

Squarespace now adds in a popup to notify visitors of the cookie policy due to GDPR. The text can be customized but the button always says "CONTINUE". There are no current stylizing for it, so below is how to style it to fit on the site. 

You can enable to the cookie banner in Squarespace by going to: 
SETTINGS > Cookies & Visitor Data > Enable Cookie Banner

CSS

@cookie-background: rgba(0,0,0,.8); 
@cookie-button: #eb5a34;
.cookie-notice {background: @cookie-background!important; color: white!important; border: 0px!important;  width: 97.2%; top: 85%!important; bottom: 0px; position: fixed!important; display: inline;}
.cookie-notice p {width: 90%}
.accept {padding: 5px 20px!important; text-transform: uppercase; letter-spacing: 2px; border: 2px solid @cookie-button; color: @cookie-button; background: rgba(0,0,0,.0); margin-top: -70px!important; margin-left: 5%; position: absolute; right: 8%!important;}
@media screen and (max-width: 840px) { .cookie-notice {top: 75%!important; line-height: 1.2em;} .accept {margi

Expand Summary Block to reveal

CSS

Shows 2 lines of text then expands. You may need to update height and max height properties to reflect current p text height size. 

.summary-excerpt p {
  overflow: hidden;
  max-height: 37px; // set height to display 2 lines only
  text-overflow: ellipsis;
  transition: all ease 1000ms;
}

.summary-item:hover {
  height: 600px!important; // Set height the whole container needs to be at end
  z-index: 99999;
  transition: all ease 1000ms;
  p {
      color: rgba(0,0,0,0.9);
      max-height: 150px; 
      transition: all ease 1000ms;
  }
  }

CSS 2

Cuts off the line of text at 1 line and adds in ellipsis (...) until hovered over, then displays all of the text.

.summary-excerpt p {
  overflow: hidden;
  max-height: 37px; // set height to display 2 lines only
  text-overflow: ellipsis;
  transition: all ease 1000ms;
  white-space: nowrap;
}

.summary-item:hover {
  height: 600px!important; // Set height the whole container needs to be at end
  z-index: 99999;
  transition: all ease 1000ms;
  p {
      color: rgba(0,0,0,0.9);
      max-height: 150px; 
      white-space: normal;
      transition: all ease 1000ms;
  }
  }

Go Back Btn

CSS

@color: #ff0000;

// Go Back Button
.go-back-button {
  background: @color;
  color: white;
  font-size: .8em;
  text-transform: uppercase;
  letter-spacing: .2em;
  padding: 10px 20px;
  border: none;
  margin-bottom: 50px;
  width: 130px;
  text-align: center;
}

Javascript

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

<script>  
  $('.BlogItem').prepend('<input type="button" value="Go Back" class="go-back-button" onclick="history.back(-1)" />');
  $('.sqs-events-collection-item').prepend('<input type="button" value="Go Back" class="go-back-button" onclick="history.back(-1)" />');
  $('.ProductItem-summary').prepend('<input type="button" value="Go Back" class="go-back-button" onclick="history.back(-1)" />');
</script>


Autoplay Carousel

JS

You'll need to update var container so it is the accurate page slug. Current page slug of beign used in the sample is is #latest-posts. You can change the timeout feature to change the speed. Time is measured in 1000's. 5000 = 5 seconds

 <script>  
   Y.on('domready', function () {
     try {
       var container = Y.one("#latest-posts");
       var gallery = Y.Squarespace.GalleryManager.getGalleryByContainer(container);
       gallery.setAttrs({
         "autoplay":true,
         "autoplayOptions": {
           "timeout":5000,
           "randomize": true
         }
       });
     } catch (e) {
       console.error("Could not configure Gallery autoplay.", e);
     }
   });
 </script>


Fixes HTML in img header

NOTE:

You will most likely need to retype in all of the HTML into the gallery image caption because it’s been deleted with the update. Once you add in the HTML again, add in the below code, then refresh it will be back.

JS - Code Injection - Header

<!--Script to fix gallery options-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(function(){
  $(".image-slide-title").each(function(){
    $(this).html($(this).text());
  });
});
</script>

Testimonial Carousel

HTML

<center>
<section id="testimonials">
<div class="cust-quotes">
  <blockquote data-timeout="9800"><p>Show was fantastic and wonderful! I loved the music and lights! So different from other Christmas 'Shows'</p><cite>- Beverly Dzienn</cite></blockquote>

  <blockquote data-timeout="9800"><p>Wow! That was great! The choice of music was super too. Thanks for doing this.</p><cite>- Mary </cite></blockquote>

  <blockquote data-timeout="9800"><p>We visited two days ago and it was a BLAST! Thank you for the wonderful show and great fun at Santa's Village.</p><cite>—Rogers Reyna </cite></blockquote>

  <blockquote data-timeout="9800"><p>Lights were great and song selection was outstanding! We are telling all our friends about it.</p><cite>—Scott Hermel </cite></blockquote>

  <blockquote data-timeout="9800"><p>My wife and I have gone three times and really enjoy it. We have taken friends and family, and it never fails!</p><cite>—Ronn Grace </cite></blockquote>
  
  <blockquote data-timeout="9800"><p>I wish everyone could see this at least once. Amazing!</p><cite>—Hazel Rector Nash </cite></blockquote>
  
  <blockquote data-timeout="9800"><p>Took my 4 year old daughter. Just to hear her reaction was priceless. Brought tears to my eyes.</p><cite>—Amanda Williamson </cite></blockquote>


  </div>
  </section>
  </center>

CSS

//  Custom Quote Carousel  //
.cust-quotes {
//  width: 640px;
    height: 150px;
//  position:relative;\
}


.cust-quotes blockquote {
  position: absolute;
//  bottom: 0px;
  left: 0px;
  right: 0px;
  font-size: 26px;
  line-height: 1.1em;
  text-align: center;
  opacity: 0;
  z-index: 0;
  transition: opacity 0.5s ease-out 0s, transform 0.5s ease-in 0s;
}

/* IE < 10 fallback */
.no-csstransitions .cust-quotes blockquote,
.no-csstransforms .cust-quotes blockquote {
   position:relative;
}

.cust-quotes blockquote:first-child {
    opacity: 0;
    transform: translateY(-10px) scale(1.1);
}
.cust-quotes blockquote:first-child + blockquote {
    opacity: 1;
    z-index: 1;
    transition: opacity 1.6s ease 0s;
}
.cust-quotes blockquote p{
  font-size: 28px;
//  font-weight:normal;
  font-style:italic;
  color: @red;
//  line-height: 30px;
//  margin-bottom: 10px;
}
.cust-quotes blockquote p:before {
   content: '\201C';
}
.cust-quotes blockquote p:after {
   content: '\201D';
}
.cust-quotes blockquote cite {
    text-align: center;
    font-size: 20px;
    color: green;
}
.cust-quotes blockquote cite a {
  font-size: 14px;
  font-weight:normal;
}

JS

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

<script>
function initQuoteCarousel() {

    var $quotesWrapper = $(".cust-quotes");
    var $quotes = $quotesWrapper.find("blockquote");

    if (!$quotes.length) {
        return;
    }

    var selectNextQuote = function () {
        // keep move first quote in dom to the end to make continous
        var $quote = $quotesWrapper.find("blockquote:first").detach().appendTo($quotesWrapper);

        setTimeout(selectNextQuote, $quote.data("timeout"));
    };

    setTimeout(selectNextQuote, $quotes.filter(":first").data("timeout"));

}

$(function () {
    initQuoteCarousel();
});
</script>


Zoom Hover

Depending on the template used, you'll need to edit the class the hover affects are applied to.

For newer (2016) index gallery templates, use something like this (Examples: http://www.eu-tech.biz/):

// Ease transition on hover animation
.Index-gallery-item-image img {
  transition: all .7s ease-in-out!important; 
}

// Makes Image Zoom on Hover
.Index-gallery-item:hover img {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transition: -webkit-transform 1s ease;
    -webkit-transition: transform 1s ease;
    -moz-transition: transform 1s ease;
    transition: transform 1s ease;
}

For older index gallery templates, use (Examples: http://www.bhochevar.com/media-1/):

// Ease transition on hover animation
.slide img {
  transition: all .7s ease-in-out; 
}

// Makes Image Zoom on Hover
.slide-wrapper:hover img {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transition: -webkit-transform 1s ease;
    -webkit-transition: transform 1s ease;
    -moz-transition: transform 1s ease;
    transition: transform 1s ease;
}