Square Accordion

The following is super-simple. If it get’s complicated, you’re not doing it right.
Follow these instructions closely and you’ll have your new plugin working on your site in a few minutes!

Insert the Block

Insert a Markdown Block, on your Squarespace website.

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>

 

Now the markdown block is set up and ready, however it will not begin to function like an accordion block without a simple script, and a version of jquery. Adding these are easy!

Insert the Script

From the Home Sidebar Menu shown when editing your Squarespace site, go to: Settings > Advanced > Code Injection > Footer.

Copy the following script and paste it into the ‘Footer’ area.

 

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

 

Finally, let’s add some styling to the accordion.

Copy & Paste the CSS

Copy the following code snippet and paste it into the ‘Custom CSS’ area of your website.
To find out how to access this area of your site, click here.

The plugin is styled with the color #F65959. We have highlighted all incidences of this color to make it easy for you to edit the plugin with a color of your choosing. flatuicolorpicker.com has a great range of flat colors to choose from, with the hex code (6-digit code) clearly shown. Swap the hex codes to re-color your plugin.

/* CUSTOM CSS */

.sqs-block-markdown {
  h2 {
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    margin-top: 10px;
    border: solid 1px #ddd;
    padding: 10px 16px;
    margin-bottom: 0;
    strong {
      color: #F65959;
      padding-right: 8px;
    }
  }
  p {
    padding: 15px 20px;
    background: #f7f7f7;
    margin-top: 0;
  }
}

Button Style 5

The following is super-simple. If it get’s complicated, you’re not doing it right.
Follow these instructions closely and you’ll have your new plugin working on your site in a few minutes!

Insert the Block

Insert a Button Block on your Squarespace website.

Button Settings:

Size: Small
All other settings can be changed to your preferences and this plugin will still function.

 

Copy & Paste

Copy the following code snippet and paste it into the ‘Custom CSS’ area of your website.
To find out how to access this area of your site, click here.

The plugin is styled with the color #4ecdc4. We have highlighted all incidences of this color to make it easy for you to edit the plugin with a color of your choosing. flatuicolorpicker.com has a great range of flat colors to choose from, with the hex code (6-digit code) clearly shown.

 

/* CUSTOM CSS */

.sqs-block-button .sqs-block-button-element--small {
border: solid 2px #4ECDC4;
color: #4ECDC4 !important;
border-radius: 1px !important;
transition: all ease-in-out 700ms !important;
background-size: 202% 100%;
background-color: transparent !important;
background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, #4ECDC4 50%) !important;
}
.sqs-block-button .sqs-block-button-element--small:hover {
color: #fff !important;
background-position: -98% 0% !important;
}

Animated Counter Code

The following is simple. Take is slowly, step-by-step.
Follow these instructions closely and you’ll have your new plugin working on your site in a few minutes!

The HTML bit

Insert a Code Block, on your Squarespace website.

 

Delete the example HTML, and Paste the following HTML into the code area, and click save.

<div class="counter-container">
  <div id="counterbox">
    <div class="counter one" data-count="604">0</div>
  </div>
  <div id="counterbox">
    <div class="counter two" data-count="801">0</div>
  </div>
  <div id="counterbox">
    <div class="counter three" data-count="8">0</div>
  </div>
  <div id="counterbox">
    <div class="counter four" data-count="72">0</div>
  </div>
</div>

 

Editing the HTML

You can alter the numbers that the counters will count to.
We have highlighted the numbers in the code, simply edit them, and the counters will count to that number.

You can remove counters by deleting the HTML for a counter. The following shows the HTML of a single counter:

  <div id="counterbox">
    <div class="counter four" data-count="72">0</div>
  </div>

The CSS bit

Copy and paste the following CSS code into the Custom CSS area of your site, found under the Design menu. We've highlighted the counter titles for you to change. Simply change the highlighted words.

The plugin is styled with the color #f65959. We have highlighted the only incidence of this color to make it easy for you to edit the plugin with a color of your choosing. flatuicolorpicker.com has a great range of flat colors to choose from, with the hex code (6-digit code) clearly shown.

 

.counter-container {
  margin: auto;
  color: #f65959;
  text-align: center;
  display: table;
  border-spacing: 10px !important;
}
#counterbox {
  display: inline-block;
}
.counter {
  display: table-cell;
  font-size:60px;
  font-weight: 100;
  background: none !important;
  width:200px !important;
  min-width: 200px !important;
  height:200px;
  vertical-align: middle;
  margin-right: 20px !important;
}
.counter.one:after {
  content: "Clients";
  display: block;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 24px !important;
}
.counter.two:after {
  content: "Productions";
  display: block;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 24px !important;
}
.counter.three:after {
  content: "Awards";
  display: block;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 24px !important;
}
.counter.four:after {
  content: "Destinations";
  display: block;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 24px !important;
}

The JS bit

Copy and paste the following code into the header code injection area of your page and click save. If your page is within an index, paste the code into the header code injection area of the Index, not the page.

 

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
/*=============== SQUARE STUDIO ANIMATED COUNTER PLUGIN START ===============*/
function watch(){MutationObserver=window.MutationObserver||window.WebKitMutationObserver,new MutationObserver(function(a){for(var b=0;b<a.length;b++){if("attributes"===a[b].type){var d=new Event("pageChange");document.dispatchEvent(d)}}}).observe(document.body,{attributes:!0,attributeFilter:["id"]})}var executed=!1;$(document).ready(function(){function a(){$(".counter-container").length>0&&$(window).scroll(function(){b()})}function b(){if(!executed){var a=.1*$(".counter-container").outerHeight();$(window).scrollTop()>$(".counter-container").offset().top-$(window).height()+a&&(executed=!0,$(".counter").each(function(){var a=$(this),b=a.attr("data-count");$({countNum:a.text()}).animate({countNum:b},{duration:3e3,easing:"linear",step:function(){a.text(Math.floor(this.countNum))},complete:function(){a.text(this.countNum)}})}))}}a()}),document.addEventListener("pageChange",function(){executed=!1,$(window).unbind("scroll"),init()}),window.onload=watch;
/*================ SQUARE STUDIO ANIMATED COUNTER PLUGIN END ================*/
</script>

Back To Top Button

The following is simple. If it get’s complicated, you’re not doing it right.
Follow these instructions closely and you’ll have your new plugin working on your site in a few minutes!
The loader text will display while your page elements load in the background.

The CSS bit

Copy and paste the following CSS code into the Custom CSS area of your site, found under the Design menu.
You can alter our brand red, by altering the highlighted hex codes with your own. Hex codes here.
 

.sp-back-to-top.visible {
opacity: 0.85;
}
.sp-back-to-top {
opacity: 0;
background-color: #F65959;
border-color: #F65959;
border-style: solid;
border-width: 3px;
margin: 0 auto;
position: fixed;
height: 50px;
  width: 50px;
bottom: 0px;
right: 0px;
z-index: 99999;
cursor: pointer;
transition: all ease-in-out 150ms !important;
 -webkit-transition: all ease-in-out 150ms !important;
 -moz-transition: all ease-in-out 150ms !important;
 -ms-transition: all ease-in-out 150ms !important;
}

.sp-back-to-top:hover {
opacity: 1;
}

.sp-back-to-top:active {
opacity:0.8;
}

.sp-back-to-top-arrow-container {
padding: 0px;
}

.sp-back-to-top-arrow {
  position: absolute;
  top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 35px;
height: 35px;
background: url('https://static1.squarespace.com/static/5660870ce4b07de43e2d27fd/t/56d4d5802b8ddea29eb38477/1456788864385/bttarrow.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

The JS bit

Copy and paste the following code into your site's header code injection area.
Go to Settings > Advanced > Code Injection.

 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    var h = $(".sp-back-to-top:first").innerHeight();
    $(".sp-back-to-top-arrow").css("line-height", h + "px");
    $(".sp-back-to-top").click(function() {
      $('body,html').animate({
        scrollTop : 0
      }, 500);
    }); 
  });
</script>
<div class="sp-back-to-top">
  <div class="sp-back-to-top-arrow-container">
    <div class="sp-back-to-top-arrow">
      </div>
  </div>
</div>
<script>
$(function(){
 var visibleTop = 300;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= visibleTop ) {
           $('.sp-back-to-top').addClass('visible');
        }
        else {
            $('.sp-back-to-top').removeClass('visible');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});
</script>

Skill Bars

This plugin is adapted from W3Lessons
The following is simple. Take is slowly, step-by-step.
Follow these instructions closely and you’ll have your new plugin working on your site in a few minutes!

The HTML bit

Insert a Code Block, on your Squarespace website.

 

Delete the example HTML, and Paste the following HTML into the code area, and click save.

<div class="skills">
  <ul>
    
    <!-- 1st Bar -->
    <li><em>50%</em><span class="bar1" style="background: #EF4836;"></span><p style="background: #EF4836;">HTML 5</p></li>
    <!-- End of 1st Bar -->
    
    <!-- 2nd Bar -->
    <li><em>80%</em><span class="bar2" style="background: #59ABE3;"></span><p style="background: #59ABE3;">CSS 3</p></li>
    <!-- End of 2nd Bar -->
    
    <!-- 3rd Bar -->
    <li><em>60%</em><span class="bar3" style="background: #F4D03F;"></span><p style="background: #F4D03F;">jQuery</p></li>
    <!-- End of 3rd Bar -->
    
    <!-- 4th Bar -->
    <li><em>70%</em><span class="bar4" style="background: #2ECC71;"></span><p style="background: #2ECC71;">Photoshop</p></li>
    <!-- End of 4th Bar -->
    
  </ul>
</div>

 

Editing the HTML

You can edit the plugin to your values (percentages), skills and colors. We've red highlighted some of the HTML - this is the only text you should change. Do not edit any of the other text.
The hex codes (beginning with #) indicate the color of that bar - you can find a good range of modern flat color codes here.

Add or remove bars by duplicating or deleting the HTML for a single bar (indicated by the <!-- titles -->)
If you add a bar, you'll also have to duplicate some sections of the CSS code and the JS code. We've highlighted the CSS sections and the JS sections that you need to duplicate. Copy the highlighted code, hit the enter key on your keyboard, then hit the backspace key until the cursor is at the beginning of the line (far-left) and then paste the code that you have copied. This will ensure that the new code you add/duplicate is the same format as the other bars and is readable by your browser.

The CSS bit

Copy and paste the following CSS code into the Custom CSS area of your site, found under the Design menu. We've highlighted the percentage values for you to change - you can edit these numbers to your preference for bar 1, 2, 3 and 4.
 

/* SKILL BARS CSS */

.skills {
width:100%;
position:relative;
padding:30px 0;

ul { 
list-style-type: none;
padding: 0;
li { 
margin-bottom:18px; 
background:#eee; 
height:40px; 
border-radius:3px;
em {
position: absolute;
right: 0;
font-size: 13px;
line-height: 13px;
margin-top: 13px !important;
margin-right: 14px;
opacity: 0.6;
}
p {
font-size: 15px;
line-height: 15px !important;
position:relative; 
top: 0px;
padding: 13px 20px 2px 20px;
height: 25px;
color: #fff;
font-weight: 700;
font-style: initial;
letter-spacing: -0.5px;
width: 80px;
border-radius: 3px;
}
span { 
height:40px;
opacity: 0.75;
position:absolute;
border-radius: 3px;
}
}
}

.bar1.go { 
width:70%;
animation:bar1 2s ease-out;
}
.bar2.go { 
width:80%;
animation:bar2 2s ease-out; 
}
.bar3.go { 
width:50%;
animation:bar3 2s ease-out;
}
.bar4.go { 
width:60%;
animation:bar4 2s ease-out;
}
}

@keyframes bar1 { 
0%{ width:0px;} 
100%{ width:70%;}
}
@keyframes bar2 {
0%{ width:0px;} 
100%{ width:80%;}
}
@keyframes bar3 {
0%{ width:0px;}
100%{ width:50%;}
}
@keyframes bar4 {
0%{ width:0px;} 
100%{ width:60%;}
}
@media (max-width : 667px) {
.skills {
.bar1 { 
width:70%;
animation:bar1 2s ease-out;
}
.bar2 { 
width:80%;
animation:bar2 2s ease-out; 
}
.bar3 { 
width:50%;
animation:bar3 2s ease-out;
}
.bar4 { 
width:60%;
animation:bar4 2s ease-out;
}
}
}

/* END OF SKILL BARS CSS */

The JS bit

Copy and paste the following code into the header code injection area of your page and click save. If your page is within an index, paste the code into the header code injection area of the Index, not the page.

 

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $(window).scroll( function(){
        $('.bar1, .bar2, .bar3, .bar4').each(function(i){
            var objectHeight = $(this).outerHeight()*0 + 100;
            var bottom_of_object = $(this).offset().top + objectHeight;
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            if( bottom_of_window > bottom_of_object ){
                $(this).addClass('go');
            }
        });
    });
});
</script>
<script>
$(function() {
        $('.bar1, .bar2, .bar3, .bar4').each(function(i){
            var objectHeight = $(this).outerHeight()*0 + 100;
            var bottom_of_object = $(this).offset().top + objectHeight;
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            if( bottom_of_window > bottom_of_object ){
                $(this).addClass('go');
            }
    });
});
</script>

Countdown Timer

The following is simple. If it get’s complicated, you’re not doing it right.
Follow these instructions closely and you’ll have your new plugin working on your site in a few minutes!

The HTML bit

Insert a Code Block, on your Squarespace website.

 

Delete the example HTML, and Paste the following HTML into the code area, and click save.

<div id="timer"> 
    <div id="days"></div>
    <div id="hours"></div>
    <div id="minutes"></div>
    <div id="seconds"></div>
</div>

 

The CSS bit

Copy and paste the following CSS code into the Custom CSS area of your site, found under the Design menu. The red highlighted CSS styles the text. You can edit these numbers to your preference. The number beginning with a # sets the font color. Flat UI Color Picker have some great modern color codes you could use.
 

/* COUNTDOWN TIMER CSS */

#timer {
  margin: 0 auto;
  display: table;
  div {
    display: table-cell;
// STYLE NUMBERS
    font-size: 50px;
    letter-spacing: 2px;
    font-weight: 500;
    color: #f65959;
  padding: 20px;
    border-radius: 300px;
    text-align: center;
    span {
// STYLES DAYS, HOURS, MINUTES, SECONDS
      letter-spacing: 0px;
      color: #111111;
  font-size: 20px;
      margin-left: -4px;
      margin-top: 16px;
      display: block;
    }
  }
}
@media (max-width : 667px) {
  #timer {
    div {
      padding: 16px;
      font-size: 26px !important;
      span {
        margin-top: 2px;
        font-size: 12px !important;
      }
    }
  }
}

/* END OF COUNTDOWN TIMER CSS */

The JS bit

Copy and paste the following code into the header code injection area of your page and click save. If your page is within an index, paste the code into the header code injection area of the Index, not the page.
Change the red highlighted text to a countdown target - it is structured: Month Date, Year Time Time-Zone. The plugin will automatically countdown to the point in time that you set. Currently we've set it to midday on Christmas day in NYC.

 

 

 

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

var endTime = new Date("December 25, 2019 12:00:00 EST");
var endTime = (Date.parse(endTime)) / 1000;

var now = new Date();
var now = (Date.parse(now) / 1000);

var timeLeft = endTime - now;

var days = Math.floor(timeLeft / 86400); 
var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));

if (hours < "10") { hours = "0" + hours; }
if (minutes < "10") { minutes = "0" + minutes; }
if (seconds < "10") { seconds = "0" + seconds; }

$("#days").html(days + "<span>Days</span>");
$("#hours").html(hours + "<span>Hours</span>");
$("#minutes").html(minutes + "<span>Minutes</span>");
$("#seconds").html(seconds + "<span>Seconds</span>");

}

setInterval(function() { makeTimer(); }, 1000);
</script>

Flat Price Table


The following is super-simple. If it get’s complicated, you’re not doing it right.
Follow these instructions closely and you’ll have your new plugin working on your site in a few minutes!

Insert the Block

Insert a Markdown Block, on your Squarespace website.

 

 

Paste the following sample text into the Markdown block’s edit panel. Edit the sample text with your own content, and add or remove feature lines as you like. Be careful to maintain the structure shown in the sample.

 

Professional
-----

**29** /mo
==========

First wonderful feature

Another phenomenal feature

Probably the third feature

Penultimate perhaps

Let's make this the final one

Select

 

Change the word 'select' to the link word of your choice.
Then, highlight the link and click the link icon to add a link.
This will automatically be rendered by the plugin code as a button!

Now the markdown block is set up and ready, however it will not begin to function like a pricing table without a simple block of CSS. Adding this is easy!

Copy & Paste the CSS

Copy the following code snippet and paste it into the ‘Custom CSS’ area of your website.
To find out how to access this area of your site, click here.

The plugin is styled with the color #F65959. Replace all incidences of this color with a new hex code to change the accent color. flatuicolorpicker.com has a great range of flat colors to choose from, with the hex code (6-digit code) clearly shown.

 

.sqs-block-markdown:hover {
  -webkit-box-shadow: 0px 0px 14px 0px rgba(191,191,191,0.4);
-moz-box-shadow: 0px 0px 14px 0px rgba(191,191,191,0.4);
box-shadow: 0px 0px 14px 0px rgba(191,191,191,0.4);
}
.sqs-block-markdown {
   background: #f9f9f9;
   padding: 20px 5px 35px 5px;
   margin: 20px;
   text-align: left;
  -webkit-box-shadow: 0px 0px 6px 0px rgba(191,191,191,0.2);
-moz-box-shadow: 0px 0px 6px 0px rgba(191,191,191,0.2);
box-shadow: 0px 0px 6px 0px rgba(191,191,191,0.2);
  transition: all ease-in-out 300ms !important;
  -moz-transition: all ease-in-out 300ms !important;
  -webkit-transition: all ease-in-out 300ms !important;
}
.sqs-block-markdown h2 {
     font-size: 26px;
     letter-spacing: 1px;
     text-transform: none;
     padding: 40px 30px 0px 30px;
   }
.sqs-block-markdown h1 {
     font-weight: 600 !important;
     font-size: 25px !important;
     padding: 10px 30px;
  letter-spacing: 1px !important;
     color: #F65959;
  text-transform: none !important;
}
.sqs-block-markdown h1:after {
  content: ".";
  color: #eee;
  letter-spacing: -1px;
  display: block;
  font-size: 0px;
  font-weight: 100;
  margin-bottom: 5px;
  margin-top: 10px;
  border-bottom: solid 2px #eee;
}
.sqs-block-markdown h1 strong {
       font-size: 40px;
       line-height: 20px;
       font-weight: 200;
   }
.sqs-block-markdown p {
     padding: 10px 30px 10px 30px;
     margin: 0;
  color: #aaa;
  font-weight: 100 !important;
     font-size: 14px;
  line-height: 20px;
     letter-spacing: 0.7px;
}
.sqs-block-markdown p a {
  margin-left: -2px;
       color: #F65959;
       text-transform: uppercase;
       font-size: 15px;
       letter-spacing: 1px;
       font-weight: 600;
       margin-top:10px !important;
       margin-bottom:20px !important;
       display: block;
       border: solid 1px #F65959;
       padding: 13px 20px;
  text-align: center;
       border-radius: 200px;
  transition: all ease-in-out 300ms !important;
  -moz-transition: all ease-in-out 300ms !important;
  -webkit-transition: all ease-in-out 300ms !important;
     }
.sqs-block-markdown p a:hover {
       background: #F65959;
       color: #fff;
     }
@media only screen and (min-width: 668px) and (max-width: 1024px) {
  .sqs-block-markdown h2 {
      font-size: 16px !important;
    }
   .sqs-block-markdown h1:not(.site-title):not(.page-title), .entry-title h1 {
      font-size: 20px !important;
   }
     .sqs-block-markdown strong {
        font-size: 30px !important;
      }
}
@media (max-width : 667px) {
  .sqs-block-markdown h2 {
      padding-top: 6px !important;
  }
}

Instagram Slide Out


The following is super-simple. If it get’s complicated, you’re not doing it right.
Follow these instructions closely and you’ll have your new plugin working on your site in a few minutes!

Insert the Instagram Block

If you haven't connected your Instagram account already, go to Settings > Connected Accounts and link your Instagram account.
Insert an Instagram Block in Grid design to the Footer of your Squarespace website. Connect your Instagram account, and select your preferred settings.
 

 

Insert the Script

From the Home Sidebar Menu shown when editing your Squarespace site, go to: Settings > Advanced > Code Injection > Header.

 

 

 

Copy the following script and paste it into the ‘Header’ area.
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="insta-trigger">
  <div class="hover-arrow">
  </div>
</div>
<div class="insta-overlay">
</div>
<script>
$(document).ready(function(){
  $("footer .sqs-block-instagram").appendTo('body').addClass('instagallery');
});
</script>
<script>
$(document).ready(function(){
$(".insta-trigger").click(function() {
  $(".instagallery").toggleClass('insta-triggered');
  $(this).toggleClass('now-triggered');
  $(".insta-overlay").toggleClass('overlay-trigger');
});
});
</script>
<style>
  body:not(.sqs-edit-mode-active) footer .sqs-block-instagram {
    max-height: 0px !important;
    overflow-y: hidden;
}
  .insta-overlay {
    opacity: 0;
    display: block;
    position: fixed;
    pointer-events: none;
    background: rgba(0,0,0,0.4);
    top: 0;
    left: 0 !important;
    width: 100vw;
    height: 100vh;
    z-index: 999 !important;
  transition: all ease-in-out 200ms;
  -ms-transition: all ease-in-out 200ms;
  -moz-transition: all ease-in-out 200ms;
  -webkit-transition: all ease-in-out 200ms;
  }
  .overlay-trigger {
    opacity:1 !important;
  }
  .insta-trigger {
    cursor: pointer;
    position: fixed;
    bottom: 40px;
    right: 0;
    margin-right: 0px;
    z-index: 99999;
    width: 50px;
    height: 50px;
    background-color: #000;
    background-image: url('https://static1.squarespace.com/static/54dcf1f3e4b03174c3dc75f5/t/5ae9b4da758d4616551db2f3/1525265626904/X-insta.png');
    background-size: 28px;
    background-repeat: no-repeat;
    background-position: center;
  transition: all ease-in-out 300ms;
  -ms-transition: all ease-in-out 300ms;
  -moz-transition: all ease-in-out 300ms;
  -webkit-transition: all ease-in-out 300ms;
  }
  .now-triggered {
    right: 65vw !important;
    background-image: url('https://static1.squarespace.com/static/54dcf1f3e4b03174c3dc75f5/t/5ae9d51a352f5312f8b31bc9/1525273882224/rightarrow.png') !important;
    background-size: 13px !important;

  }
  .now-triggered .hover-arrow {
    visibility: hidden !important;
  }
  .insta-trigger:hover .hover-arrow {
    opacity: 1 !important;
  }
  .hover-arrow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: #000;
    background-image: url('https://static1.squarespace.com/static/54dcf1f3e4b03174c3dc75f5/t/5ae9d50e2b6a28f6fbaec15e/1525273870493/leftarrow.png');
    background-size: 13px;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    pointer-events: none;
  transition: all ease-in-out 200ms;
  -ms-transition: all ease-in-out 200ms;
  -moz-transition: all ease-in-out 200ms;
  -webkit-transition: all ease-in-out 200ms;
  }
  .instagallery {
    position: fixed;
    top: 0;
    right: -65vw;
    height: 100vh;
    width: 65vw;
    padding: 0 !important;
    overflow-x:hidden;
    overflow-y: scroll;
    z-index:9999;
  transition: all ease-in-out 300ms;
  -ms-transition: all ease-in-out 300ms;
  -moz-transition: all ease-in-out 300ms;
  -webkit-transition: all ease-in-out 300ms;
  }
  .instagallery.insta-triggered {
    right: 0 !important;
  }
  @media (max-width:768px) {
    .instagallery {
      width: 100vw !important;
      right:-200vw;
    }
    .now-triggered {
      right: 0 !important;
    }
  }
</style>

Logo Gallery

 

The following is super-simple. If it get’s complicated, you’re not doing it right.
Follow these instructions closely and you’ll have your new plugin working on your site in a few minutes!

Insert the Block

Insert a Gallery Block in Grid style, on your Squarespace website.

 

 

In the Gallery Block edit panel, select the following settings.

Design Settings:

Aspect Ratio: 1:1 Square
Crop Images: X
Thumbnails per row: Flexible
Padding: Flexible

 

Upload your logos as images in the Gallery.

Copy & Paste

Copy the following code snippet and paste it into the ‘Custom CSS’ area of your website.
To find out how to access this area of your site, click here.

 

/* CUSTOM CSS */

.sqs-gallery-block-grid {
.sqs-gallery-design-grid-slide {
  max-height: 160px !important;
}
.slide .margin-wrapper a.image-slide-anchor {
  padding-bottom: 160px !important;
}
img {
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    filter: grayscale(1);
   transition: all ease-in-out 600ms !important;
}
.slide:hover {
  img {
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    filter: grayscale(0);
  }
}
}

Masonry Gallery

The following is super-simple. If it get’s complicated, you’re not doing it right.
Follow these instructions closely and you’ll have your new plugin working on your site in a few minutes!

Gallery Block

Insert a Gallery Block in Grid style, on your Squarespace website.
Upload your Images.
You can choose any settings you want.

 

Code Block

Now insert a code block immediately below the Gallery Block (this code block will become invisible).

 

Copy & Paste

Delete the example code in the code block so it contains nothing, and then copy the following code snippet and paste it into the Code Block.
Then, click Save!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var recent_page = false;

    var column_drop_width = 600;
    var width_offset = 20;

    var photos = [];
    var p =0;
    var numPerRow = 2;
    var origNumPerRow = 2;
    var border_val = 10;
    var sideby = true;
    var sectionNum = -1;
    var rowNum = -1;
    var colNum = -1;
    var containerNum = -1;

    var lightbox = false;
    var lightbox_theme = 'dark';
    var lightbox_next = false;
    var lightbox_prev = false;
    var lightbox_num = 0;
    var lightbox_image_1 = null;
    var lightbox_image_2 = null;
    var lightbox_open = false;
    var page_width = $(window).width();
    var page_height = $(window).height();
    var parent_width;

    var attempts = 10;

    init();

    function init(){
        if($('.sqs-gallery-block-grid').length>0){
            photos = [];
            get_data();
            console.log(photos);
            buildMasonary();
        }
        else if(attempts>0){
            attempts--;
            setTimeout(function(){
                init();
            },500);
        }
    }

    function get_data(){
        $('.sqs-gallery-block-grid').find('img').each(function(index,value){
            var dimensions = $(this).attr('data-image-dimensions').split('x');
            
            var photo = {
                w: parseInt(dimensions[0]),
                h: parseInt(dimensions[1]),
                ratio: (parseInt(dimensions[1])/parseInt(dimensions[0])),
                path: $(this).attr('data-image'),
                url : $(this).parent().attr('href'),
                num : index,
            }
            photos.push(photo);
        });

        $('.sqs-gallery-block-grid').after('<div id="photosContainer" style="width:100%; text-align:center"></div>');
        $('#photosContainer').append('<div id="photos" style="display:inline-block"></div>');
        $('.sqs-gallery-block-grid').css('display','none');
        var gallery_info_str = $('.sqs-gallery-block-grid').parent().parent().attr('data-block-json');
        var gallery_info = JSON.parse(gallery_info_str);

        border_val = gallery_info['padding']/2;
        numPerRow = gallery_info['thumbnails-per-row'];
        lightbox = gallery_info['lightbox'];
        lightbox_theme = gallery_info['lightboxTheme'];
        origNumPerRow = numPerRow;
        parent_width = $('#photosContainer').width()-width_offset;

        if(page_width < column_drop_width){
            numPerRow = 2;
        }
        else{
            numPerRow = origNumPerRow;
        }           
    }
  
    function buildMasonary(){
        p=0;
        sectionNum = -1;
        rowNum = -1;
        colNum = -1;
        containerNum = -1;
        var leftOver = false;
        if(photos.length % numPerRow == 1){
            leftOver = true;
        }
        while(p < photos.length){
            var photosLeft = photos.length - p;
            if(photosLeft >= 2*numPerRow){
                if(sideby){
                    createNewSection();
                    placeRows(p,numPerRow);
                    p+=numPerRow;
                    sideby = false;
                }
                else{
                    var photosCol;
                    if(leftOver){
                        photosCol = photos.slice(p,p+(2*numPerRow)+1);
                        placeCol(photosCol,numPerRow,leftOver);
                        p+=((2*numPerRow)+1);
                        leftOver = false;
                    }
                    else{
                        photosCol = photos.slice(p,p+(2*numPerRow));
                        placeCol(photosCol,numPerRow,leftOver);
                        p+=(2*numPerRow);
                    }
                    
                    sideby = true;
                }
            }
            else{
                if(photosLeft <= numPerRow){
                    createNewSection();
                    placeRows(p,photosLeft);
                    p+=photosLeft;
                }
                else{
                    if(leftOver){
                        createNewSection();
                        placeRows(p,numPerRow-1);
                        p+=(numPerRow-1);
                        leftOver = false;
                    }
                    else{
                        createNewSection();
                        placeRows(p,numPerRow);
                        p+=numPerRow;                           
                    }           
                }
                sideby = false; 
            }
        }
        sideby = true;
        resizeMason();
    }

    function placeRows(j,inRow){
        createNewRow();
        scaleRowHeights(j,inRow);
        scaleRowToWidth(j,inRow);
        for(var i=j; i<(j+inRow); i++){
            addImage('row_'+rowNum,i,photos[i]);
        }       
    }

    function scaleRowHeights(j,inRow){
        for(var i=(j+1); i<(j+inRow); i++){
            var ratio = photos[j].h/photos[i].h;
            photos[i].h = photos[i].h * ratio;
            photos[i].w = photos[i].w * ratio;
        }
    }

    function scaleRowToWidth(j,inRow){
        var row_width = 0;
        for(var i=j; i<(j+inRow); i++){
            row_width += photos[i].w;
        }
        var ratio = parent_width / row_width;
        for(var i=j; i<(j+inRow); i++){         
            photos[i].w = (photos[i].w * ratio);
            photos[i].h = photos[i].w * photos[i].ratio;
        }
    }

    function placeCol(photosCol,numRow,leftOver){
        var inCol = 2;
        var pp;
        if(leftOver){
            pp = (numRow-1)*inCol;
        }
        else{
            pp = photosCol.length;
        }
        for(var i=0; i<pp; i+=inCol){
            scaleColImageWidth(i,inCol,photosCol);
        }

        if(leftOver){
            scaleColImageWidth(pp,(inCol+1),photosCol);         
        }

        var col_height = 0;
        for(var i=0; i<inCol; i++){
            col_height += photosCol[i].h
        }

        for(var i=2; i<pp; i+=inCol){
            scaleSecondColumn(i,inCol,col_height,photosCol);
        }

        if(leftOver){
            scaleSecondColumn(pp,(inCol+1),col_height,photosCol);           
        }

        var col_widths = 0;
        for(var i=0; i<pp; i+=inCol){
            col_widths += photosCol[i].w
        }

        if(leftOver){
            col_widths += photosCol[pp].w           
        }

        var ratio = parent_width/col_widths;

        createNewSection();

        for(var i=0; i<pp; i++){
            photosCol[i].w*=ratio;
            photosCol[i].h*=ratio;
            if(i%inCol == 0){
                createNewCol(photosCol[i].w);
            }
            addImage('col_'+colNum,i,photosCol[i]);
        }

        if(leftOver){
            for(var i=pp; i<photosCol.length; i++){
                photosCol[i].w*=ratio;
                photosCol[i].h*=ratio;
                if(i==pp){
                    createNewCol(photosCol[pp].w);
                }
                addImage('col_'+colNum,i,photosCol[i]);
            }
        }
    }

    function scaleColImageWidth(j,inCol,photosCol){
        for(var i=(j+1); i<(j+inCol); i++){
            var ratio = photosCol[j].w/photosCol[i].w;
            photosCol[i].h = photosCol[i].h * ratio;
            photosCol[i].w = photosCol[i].w * ratio;
        }
    }

    function scaleSecondColumn(j,inCol,col_height,photosCol){
        var col_height2 = 0;
        for(var i=j; i<(j+inCol); i++){
            col_height2 += photosCol[i].h
        }
        var ratio = col_height/col_height2;
        for(var i=j; i<(j+inCol); i++){
            photosCol[i].w *= ratio;
            photosCol[i].h *= ratio;
        }   
    }

    function createNewSection(){
        sectionNum++;
        $('#photos').append('<div class="sqpl_section" id="section_'+sectionNum+'"></div>');
    }

    function createNewRow(){
        rowNum++;
        $('#section_'+sectionNum).append('<div class="sqpl_row" id="row_'+rowNum+'"></div>');   
    }

    function createNewCol(w){
        colNum++;
        $('#section_'+sectionNum).append('<div class="sqpl_column" id="col_'+colNum+'" style="width: '+w+'px;display:inline-block;vertical-align:top"></div>'); 
    }
    function addImage(rowCol,j,p){
        containerNum++;
        $('#'+rowCol).append('<div class="mason_container" id="mason_container_'+containerNum+'" style="width:'+p.w+'px;height:'+p.h+'px;display:inline-block;position:relative;text-align:left;vertical-align:top"></div>');
        $('#mason_container_'+containerNum).append('<div class="border_mason" id="border_mason_'+containerNum+'" style="top:'+(border_val/2)+'px;left:'+(border_val/2)+'px;width:'+(p.w-border_val)+'px;height:'+((p.h-border_val))+'px;z-index:5;position:relative;overflow:hidden"></div>')
        $('#border_mason_'+containerNum).append('<img class="mason_photo" id="photo_'+j+'" src="'+p.path+'" style="top:'+(-(border_val/2))+'px;left:'+(-(border_val/2))+'px;width:'+(p.w)+'px;height:'+(p.h)+'px;display:inline-block;position:relative"/>');
        if(lightbox){
            $('#border_mason_'+containerNum).click(function(){
                add_lightbox(p.path,p.num);
            });
            $('#border_mason_'+containerNum).css({'cursor':'pointer'})
        }
        else if(p.url != null){
            $('#mason_container_'+containerNum).wrap('<a href="'+p.url+'"></a>');
        }
    }

    $(window).resize(function(){
        page_width = $(window).width();
        page_height = $(window).height();
        if(lightbox_open){
            resize_lightbox(lightbox_image_1);          
        }
        if(page_width < column_drop_width){
            numPerRow = 2;
        }
        else{
            numPerRow = origNumPerRow;
        }
        reBuild();
    });

    function resize_lightbox(lb){
        if(page_width < lb.width()){
            lb.css('max-width',page_width);         
        }
        else if(page_width > lb.width()){
            if(page_width > 900){
                lb.css('max-width',900);
            }
            else{
                lb.css('max-width',page_width);
            }
        }
    }

    function reBuild(){
        $('#photos').empty();
        buildMasonary();
    }

    function resizeMason(){
        var new_width =$('#photosContainer').width()-width_offset;
        var ratio = new_width/parent_width;
        parent_width = new_width;

        $('.sqpl_column').each(function(){
            var column = $(this);
            var w = column.width();
            column.width(w*ratio);
        });

        $('.mason_container').each(function(){
            var w = $(this).width();
            var h = $(this).height();
            var new_w = w*ratio;
            var new_h = h*ratio;
            var container = $(this);
            var border_div = $(this).children('.border_mason');
            var mason_image = border_div.children('.mason_photo');
            resizeElements(container,new_w,new_h,0);
            resizeElements(mason_image,new_w,new_h,0);
            resizeElements(border_div,new_w,new_h,border_val);
        });

        function resizeElements(elem,w,h,offset){
            elem.width(w-offset);
            elem.height(h-offset);
        }   
    }

    function add_lightbox(path,num){
        lightbox_open = true;
        lightbox_num = num;
        $('body').css({
            'overflow': 'hidden',
            'height': '100%'
        });
        $('body').append('<div id="lightbox_overlay"style="position:fixed;height:101%;width:101%;left:0;top:0;z-index:1000;"></div>');
        $('#lightbox_overlay').append('<div id="lightbox_background" style="height:100%;width:100%;background-color:black;z-index:0;opacity:0;"></div>');
        $('#lightbox_overlay').append('<img id="lightbox_image_1" src="'+path+'" style="max-width:'+(page_width-(page_width/4))+'px;max-height:'+(page_height-(page_height/8))+'px;position:absolute;margin:auto;top:0;left:0;right:0;bottom:0;opacity:1;z-index:1;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-o-user-select: none;user-select: none;"/>');
        $('#lightbox_overlay').append('<img id="lightbox_image_2" src="'+path+'" style="max-width:'+(page_width-(page_width/4))+'px;max-height:'+(page_height-(page_height/8))+'px;position:absolute;margin:auto;top:0;left:0;right:0;bottom:0;opacity:0;z-index:1;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-o-user-select: none;user-select: none;"/>');
        $('#lightbox_overlay').append('<img src="http://static1.squarespace.com/static/56fe5ba420c64743836b25e3/t/57a1d6acb3db2b02a17b33d5/1470224044007/cross_grey.png" id="lightbox_close_button" style="width:16px;height:16px;position:absolute;top:20px;right:15px;z-index:2;color:white;opacity:1;cursor:pointer;"/>');
        $('#lightbox_overlay').append('<img src="http://static1.squarespace.com/static/56fe5ba420c64743836b25e3/t/57a1d6bcb3db2b02a17b3432/1470224060627/prev_grey.png" id="lightbox_previous" style="width:14px;height:24px; position:absolute;top:50%;left:20px;transform:translate(0%,-50%);color:white;cursor:pointer;opacity:1;z-index:2;cursor:pointer;"/>');
        $('#lightbox_overlay').append('<img src="http://static1.squarespace.com/static/56fe5ba420c64743836b25e3/t/57a1d6cab3db2b02a17b349d/1470224074465/next_grey.png" id="lightbox_next" style="width:14px;height:24px; position:absolute;top:50%;right:20px;transform:translate(0%,-50%);color:white;cursor:pointer;opacity:1;z-index:2;cursor:pointer;"/>');
        $('#lightbox_close_button').click(function(){
            close_lightbox();
        });
        lightbox_image_1 = $('#lightbox_image_1');
        lightbox_image_2 = $('#lightbox_image_2');
        $('#lightbox_overlay').bind('mousemove',function(e){
                if(e.pageX < page_width/2 && !lightbox_prev){
                    $('#lightbox_previous').animate({opacity:1},100);
                    $('#lightbox_next').animate({opacity:0},100);
                    $(this).unbind('click');
                    $(this).click(function(){
                        previous_lightbox_image();
                    });
                    lightbox_prev = true;
                    lightbox_next = false;
                }
                else if(e.pageX > page_width/2 && !lightbox_next){
                    $('#lightbox_previous').animate({opacity:0},100);
                    $('#lightbox_next').animate({opacity:1},100);
                    $(this).unbind('click');
                    $(this).click(function(){
                        next_lightbox_image();
                    });
                    lightbox_prev = false;
                    lightbox_next = true;          
                }
        });
        $('#lightbox_overlay').bind('mouseleave',function(e){
            $('#lightbox_previous').animate({opacity:0},300);
            $('#lightbox_next').animate({opacity:0},100);
            $(this).unbind('click');
            lightbox_prev = false;
            lightbox_next = false;
        });
        $('#lightbox_background').animate({opacity: 0.93}, 200);
        $('#lightbox_previous').animate({opacity:0},1400);
        $('#lightbox_next').animate({opacity:0},1400);
        if(lightbox_theme == 'light'){
            $('#lightbox_background').css('background-color','#f2f2f2');
        }
        $('.scrollable').bind('touchmove', function(e){
          e.stopPropagation();
        });
        $('#lightbox_overlay').bind('touchmove', function(e){
          e.preventDefault();           
        });
        resize_lightbox(lightbox_image_1);
    }

    function close_lightbox(){
        $('body').css({
            'overflow': 'auto',
            'height': 'auto'
        });
        $('#lightbox_overlay').animate({opacity: 0}, 200,function(){
            $('#lightbox_overlay').remove();
            lightbox_prev = false;
            lightbox_next = false;
            lightbox_open = false;
        });
        $('.scrollable').bind('touchmove', function(e){
          return true;
        });
        $('#lightbox_overlay').bind('touchmove', function(e){
          return true;           
        });
    }

    function next_lightbox_image(){
        lightbox_num++;
        if(lightbox_num >= photos.length){
            lightbox_num = 0;
        }
        crossfade_images();
    }

    function previous_lightbox_image(){
        lightbox_num--;
        if(lightbox_num < 0){
            lightbox_num = photos.length - 1;
        }
        crossfade_images();
    }

    function crossfade_images(){
        resize_lightbox(lightbox_image_2);
        lightbox_image_2.attr('src',photos[lightbox_num].path);
        lightbox_image_2.animate({opacity: 1}, 200);
        lightbox_image_1.animate({opacity: 0}, 200);
        var temp = lightbox_image_1;
        lightbox_image_1 = lightbox_image_2;
        lightbox_image_2 = temp;
    }

    document.addEventListener('pageChange', function(){
        if(recent_page == false){                               //Stops the plugin thinking the page has changed twice in short succession
            init();
            console.log('change');       
            recent_page = true;
            setTimeout(function(){
                recent_page = false;
            },200); 
        }
    });
    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>

Nav Style 1 - underline

This is super easy to install.
1 copy and paste!

The CSS

Copy the code below and paste it into your site's CSS area.
You can change the color by altering highlighted hex code.

nav a:hover:before {
width: 30px !important;
margin-left: 0px !important;
}
nav a:before {
content: ".";
font-size: 0;
border-bottom: solid 2px #f65959;
position: absolute;
bottom: 14px !important;
width: 0px;
transition: all ease-in-out 200ms;
-ms-transition: all ease-in-out 200ms;
-moz-transition: all ease-in-out 200ms;
-webkit-transition: all ease-in-out 200ms;
}

Quote Style 4

The following is super-simple. If it get’s complicated, you’re not doing it right.
Follow these instructions closely and you’ll have your new plugin working on your site in a few minutes!

Insert the Block

Insert a Quote Block on your Squarespace website. Enter your quote and source as normal.

Copy & Paste

Copy the following code snippet and paste it into the ‘Custom CSS’ area of your website.
To find out how to access this area of your site, click here.

The plugin is styled with the color #4ecdc4. We have highlighted all incidences of this color to make it easy for you to edit the plugin with a color of your choosing. flatuicolorpicker.com has a great range of flat colors to choose from, with the hex code (6-digit code) clearly shown. Swap the hex codes to re-color your plugin.

 

.quote-block {
figure {
background: #fbfbfb;
color: #555;
padding: 0px 0px 0px 0px;
border-bottom: solid 3px #4ECDC4 !important;
}
blockquote {
display: block;
font-size: 18px;
line-height: 26px;
float: left;
text-align: left;
padding: 0px 20px 20px 20px !important;
font-style: initial !important;
font-weight: 100;
border-left: none !important;
}
blockquote>span:first-child {
color: #4ECDC4 !important;
display: block;
margin-left: 0px !important;
font-size: 30px;
padding: 24px 30px 0px 0px;
text-align: left;
width: 50px !important;
font-weight: 700;
}
.source {
text-align: right !important;
font-size: 12px;
padding-right: 25px;
color: #4ECDC4 !important;
font-weight: 900;
}
}

FireShot Capture 121 - Plugins – Page 6 – SquareStudio_ - https___squarestud.io_collections_plugins.png

Quote Style 2

The following is super-simple. If it get’s complicated, you’re not doing it right.
Follow these instructions closely and you’ll have your new plugin working on your site in a few minutes!

Insert the Block

Insert a Quote Block on your Squarespace website. Enter your quote and source as normal.

Copy & Paste

Copy the following code snippet and paste it into the ‘Custom CSS’ area of your website.
To find out how to access this area of your site, click here.

The plugin is styled with the color #4ecdc4. We have highlighted all incidences of this color to make it easy for you to edit the plugin with a color of your choosing. flatuicolorpicker.com has a great range of flat colors to choose from, with the hex code (6-digit code) clearly shown. Swap the hex codes to re-color your plugin.

 

/* CUSTOM CSS */

.quote-block {
  figure {
  background: #f7f7f7;
  color: #555;
  padding: 0px 0px 0px 20px;
}
blockquote {
  display: block;
  font-size: 18px;
  line-height: 26px;
  float: left;
  text-align: left;
  padding-bottom: 0px !important;
  border-left: none !important;
}
blockquote>span:first-child {
  color: #4ECDC4 !important;
  display: block;
  margin-left: 0px !important;
  font-size: 30px;
  padding: 24px 30px 0px 0px;
  text-align: left;
  width: 50px !important;
}
.source {
  text-align: right !important;
  font-size: 12px;
  margin-right: 25px;
  color: #4ECDC4 !important;
}
}

Review Quote Style

The following is super-simple. If it gets complicated, you’re not doing it right.
Follow these instructions closely and you’ll have your new plugin working on your site in a few minutes!

Insert the Block

Insert a Quote Block on your Squarespace website. Enter your quote as normal.
When you enter the source, wrap it in <em> and </em> tags. So it will look like this...

<em>Jenny Hitchins</em>

Replace 'Jenny Hitchins' with your source.

Copy & Paste

Copy the following code snippet and paste it into the ‘Custom CSS’ area of your website.
To find out how to access this area of your site, click here.

Currently the background color is set to white. You can change this by changing the 2 hex color codes that we have highlighted in the plugin code (#fefefe). You can find some simple hex color codes here. You can similarly edit the font colors, which we have highlighted also (currently #111111). The final thing you can change is the font sizes which we have highlighted – change the number leaving the 'px'.

 

.sqs-block-quote {
    padding-bottom: 0px;
    
    figure {
      padding: 10px 0px;
    }
    blockquote {
     background: #fefefe;
     padding: 25px 35px;
     text-align: left !important;
      font-size: 18px !important;
  color: #111111;
      line-height: 28px !important;
      font-weight: 500;
      font-style: initial !important;
    }
    .source:before {
      content: "";
      display: block;
      height: 0px;
      line-height: 0px !important;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent; 
  border-right: 20px solid #fefefe; 
      width: 92%;
    }
    .source {
      margin-top: -16px !important;
      padding: 0 !important;
      text-align: right !important;
      font-size: 16px !important;
      line-height: 35px !important;
      width: 98%;
      color: transparent;
      em {
        color: #111111;
      }
    }
    blockquote>span{
      display: none !important;
    }
  }

Tech Quote Style

The following is super-simple. If it gets complicated, you’re not doing it right.
Follow these instructions closely and you’ll have your new plugin working on your site in a few minutes!

Insert the Block

Insert a Quote Block on your Squarespace website. Enter your quote and source as normal.

Copy & Paste

Copy the following code snippet and paste it into the ‘Custom CSS’ area of your website.
To find out how to access this area of your site, click here.

The plugin is styled with the color #4ecdc4. We have highlighted all incidences of this color to make it easy for you to edit the plugin with a color of your choosing. flatuicolorpicker.com has a great range of flat colors to choose from, with the hex code (6-digit code) clearly shown. Swap the hex codes to re-color your plugin.

 

/* CUSTOM CSS */

.sqs-block-quote {
    border-left: solid 5px #4ECDC4;
    padding-bottom: 0px;
    
    figure {
      padding: 10px 20px;
    }
    blockquote {
     text-align: left !important;
      font-weight: 700;
      font-style: initial !important;
    }
    .source {
      text-align: left !important;
    }
    blockquote>span:first-child {
      display: none !important;
    }
  }