INTERNAL SUPPORT

Intro
 

Introduction

In the tabs above you will find the code needed to add and modify specific elements within SquareSpace. Many of these plugins were purchased using SquareStud.io and theCustomSquare.com.

 
Page Tabs

Page Tabs

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!

Copy & Paste

Open the Code Injection area of your site...

Copy the following code snippet and paste it into the ‘Footer Code Injection’ box.

<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 t=block_search();t.length>0&&(find_tabs(t),create_tab_wrappers(),find_tab_heights(),add_tab_buttons(),load_first_tabs())}function fix_html(){$(".sqs-row .sqs-col-12").each(function(){$(this).parent().replaceWith($(this).children()),$(this).remove()})}function build_tabs(){$(".tabs-start").each(function(t,a){$(this).closest(".sqs-block").addClass("tabs-start-parent")}),$(".tabs-end").each(function(t,a){$(this).closest(".sqs-block").addClass("tabs-end-parent")}),$(".tabs-start-parent").each(function(t,a){$(this).before('<div id="sqpl-tab-group-'+t+'" 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 t=[];return $(".tabs-start-parent").each(function(a,e){var n=[];$(this).nextUntil(".tabs-end-parent").each(function(t,a){n.push($(this))}),t.push(n)}),$(".tabs-start-parent").remove(),$(".tabs-end-parent").remove(),t}function find_tabs(t){for(var a=0;a<t.length;a++){for(var e=t[a],n=[],s=[],r="",o=!1,i=0;i<e.length;i++)e[i].find(".tab-section").length>0?(0==o?o=!0:(n.push({elements:s,tab_name:r}),r="",s=[]),r=e[i].text(),e[i].remove()):o&&s.push(e[i]);n.push({elements:s,tab_name:r}),tab_groups.push(n)}}function create_tab_wrappers(){for(var t=0;t<tab_groups.length;t++)for(var a=$("#sqpl-tab-group-"+t).find(".sqpl-tab-content"),e=tab_groups[t],n=0;n<e.length;n++){a.append('<div class="sqpl-tab sqpl-tab-'+n+'"></div>'),e[n].wrapper=$("#sqpl-tab-group-"+t).find(".sqpl-tab-"+n),e[n].wrapper.css("opacity",0);for(var s=0;s<e[n].elements.length;s++)e[n].wrapper.append(e[n].elements[s])}$(".sqpl-tab").css({position:"absolute",width:"100%"})}function add_tab_buttons(){for(var t=0;t<tab_groups.length;t++){for(var a=tab_groups[t],e=$("#sqpl-tab-group-"+t).find(".sqpl-tab-controls"),n=0;n<a.length;n++)e.append('<div class="sqpl-tab-button sqpl-tab-button-'+n+'" sqpl-tab="'+n+'" sqpl-group="'+t+'">'+a[n].tab_name+"</div>"),a[n].button=$("#sqpl-tab-group-"+t).find(".sqpl-tab-button-"+n),a[n].button.click(function(){var t=parseInt($(this).attr("sqpl-tab"));load_tab(parseInt($(this).attr("sqpl-group")),t)});tab_groups[t].group_wrapper=$("#sqpl-tab-group-"+t),tab_groups[t].content_wrapper=$("#sqpl-tab-group-"+t).find(".sqpl-tab-content"),tab_groups[t].controls_wrapper=$("#sqpl-tab-group-"+t).find(".sqpl-tab-controls"),tab_groups[t].current_tab=0}}function load_first_tabs(){for(var t=0;t<tab_groups.length;t++){var a=tab_groups[t],e=a.current_tab;a[e].wrapper.css({top:"25px",opacity:1}),a.content_wrapper.css({height:a[e].section_height});for(var n=0;n<a.length;n++)n!=e&&a[n].wrapper.css("top",a[e].section_height+50);a.controls_wrapper.find(".sqpl-tab-button-"+e).toggleClass("sqpl-active-tab")}}function find_tab_heights(){for(var t=0;t<tab_groups.length;t++)for(var a=tab_groups[t],e=0;e<a.length;e++)a[e].section_height=a[e].wrapper.outerHeight()}function load_tab(t,a){var e=tab_groups[t],n=e.current_tab;if(a!=n){find_tab_heights(),e.controls_wrapper.find(".sqpl-tab-button-"+n).toggleClass("sqpl-active-tab"),e.controls_wrapper.find(".sqpl-tab-button-"+a).toggleClass("sqpl-active-tab"),e[n].wrapper.animate({opacity:0},{duration:300,complete:function(){$(this).css("top",e[a].section_height+100)}}),e[a].wrapper.css("top","25px"),e[a].wrapper.animate({opacity:1},{duration:300}),e.content_wrapper.css({height:e[a].section_height+25});for(var s=0;s<e.length;s++)s!=a&&s!=n&&e[s].wrapper.css("top",e[a].section_height+100);e.current_tab=a}}function interval(t,a,e){var n=function(a,e){return function(){if(void 0===e||e-- >0){setTimeout(n,a);try{t.call(null)}catch(t){throw e=0,t.toString()}}}}(a,e);setTimeout(n,a)}function watch(){MutationObserver=window.MutationObserver||window.WebKitMutationObserver,new MutationObserver(function(t){for(var a=0;a<t.length;a++)if("attributes"===t[a].type){var e=new Event("pageChange");document.dispatchEvent(e)}}).observe(document.body,{attributes:!0,attributeFilter:["id"]})}var tab_groups=[],recent_page_tabs=!1;$(document).ready(function(){$(".tabs-start").length>0&&(fix_html(),init_sqpl_tabs())});var update_tab_heights=function(){find_tab_heights();for(var t=0;t<tab_groups.length;t++){var a=tab_groups[t],e=a[a.current_tab].section_height;a.content_wrapper.css({height:e+25})}};$(window).on("resize",function(){window.requestAnimationFrame(update_tab_heights)}),$(".sqs-block-markdown h1").click(function(){setTimeout(function(){update_tab_heights()},500)}),interval(update_tab_heights,2e3,5),document.addEventListener("pageChange",function(){0==recent_page_tabs&&(setTimeout(function(){fix_html(),init_sqpl_tabs()},1e3),recent_page_tabs=!0,setTimeout(function(){recent_page_tabs=!1},200))}),window.onload=watch;
/*================ SQUARE STUDIO TABBED CONTENT PLUGIN END ================*/
</script>
1479389586351.gif

Watch the video & Create tabs

You will need 3 snippets of code...

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

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

<div class="tab-section">Tab Name</div>
 
 

Center Tabs

If you would rather 'center-align' your tabs. Please copy and paste the CSS below into your website's Custom CSS area (Design > Custom CSS).

.sqpl-tab-controls {text-align: center !important;}
Logo Gallery

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.

1428638174849.jpg

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.

.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);
  }
}
}
Image Filter Brightness

Image Filter • Brightness

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!

This plugin will apply to all images on your website. This can be altered by making the plugin ‘page’ or ‘section’ specific. See our website for a guide on how to do this.

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.

img {
   transition: all ease-in-out 500ms !important;
}
.sqs-block-image:hover img, .slide:hover img, img:hover {
  -webkit-filter: brightness(0.7) !important;
  filter: brightness(0.7) !important;
}
img {
  -webkit-backface-visibility: hidden;
  transform: translate3d(0px,0px,0px);
}
Custom Form

Form 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 Form Block on your Squarespace website.

Build your form with the fields you require. This plugin will style all fields in the Squarespace form block.

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 #F04E26. 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.

.sqs-block-form {
.field-list .title {
  font-size: 12px;
  color: #fff;
  letter-spacing: 0.5px;
  font-weight: 900;
  margin-bottom: -33px;
  padding-left: 10px;
  text-transform: uppercase;
}
.field-element {
  font-size: 14px;
  color: #fff;
  font-weight: 300;
}
.field .field-element {
  border-radius: 0px !important;
  background: none !important;
  border: solid 1px #bbb !important;
  color: #fff !important;
  text-align: center;
  transition: all ease-in-out 700ms !important;
}
.field-element:hover {
  border: solid 1px #F04E26 !important;
}
.form-wrapper .field-list .fields .field.three-digits, .form-wrapper .field-list .fields .field.two-digits, .form-wrapper .field-list .fields .field.four-digits  {
  margin-top: 34px;
}
.form-wrapper .field-list .field  select {
  border: solid 1px #bbb;
  margin-top: 40px;
  font-size: 12px;
  color: #000;
  transition: all ease-in-out 700ms !important;
}
.form-wrapper .field-list .field  select:hover {
  border: solid 1px #F04E26;
}
.form-wrapper .field-list .field .option {
  display: inline-block !important;
  margin-top: 42px !important;
  padding: 5px 10px;
  margin-right: 10px;
  border: solid 1px #bbb;
  transition: all ease-in-out 700ms !important;
}
.form-wrapper .field-list .field .option:hover {
  border: solid 1px #F04E26;
}
.form-wrapper .field-list .field.likert .question {
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: -35px;
  font-size: 12px;
  font-weight: 700;
}
.form-wrapper .field-list .field.likert .option {
   width: 15% !important;}
.sqs-editable-button {
text-transform: uppercase !important;
font-weight: 500 !important;
font-size: 14px !important;
padding: 16px 26px !important;
border: solid 2px !important;
border-radius: 3px !important;
background: #333;
color: #fff !important;
letter-spacing: 1px !important;
width: 15% !important;
transition: all ease-in-out 700ms !important;
}
.sqs-editable-button:hover {
 background: #F04E26 !important;
 border: solid 2px #F04E26 !important;
}
@media (max-width : 870px) {
.fields .caption {color: rgba(0,0,0,0) !important;}
  }
}
Colored Social Icons

Colored Social Icons • Border

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!
This tutorial is for the built in SquareSpace Social icons.

Build the Block

Insert the Social Links Block, on your Squarespace website.

 

Edit the Block and select the following settings.

1428640552668.jpg

Design Settings:

Style: Circle - Border or Square - Border or Rounded - Border
Color: Dark

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 #4BBDAD. 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.

.social-icons-style-border.social-icons-color-black .sqs-svg-icon--wrapper {
    border: solid 1px #FFF !important;
}
.sqs-use--icon {
    fill: #FFF !important;
}
.social-icons-style-border.social-icons-color-black .sqs-svg-icon--wrapper:hover {
  background: #4BBDAD !important;
  .sqs-use--icon {
    fill: #fff !important;
}
}
Custom Button

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

1428622474796.jpg

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 #F04E26. 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.

.sqs-block-button .sqs-block-button-element--small {
color: #FFF !important;
background: #F04E26 !important;
border: solid 2px #F04E26 !important;
border-radius: 3px !important;
transition: all ease-in-out 700ms !important;
}
.sqs-block-button .sqs-block-button-element--small:hover {
padding: 13px 26px !important;
border: solid 2px #C6401E !important;
background: #C6401E !important;
color: #FFF !important;
}
Boutique Product Block

Boutique Product Block

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!

Build the Block

Insert a Product Block, on your Squarespace website.

Select an item for your product block.
Then select the following settings.

1429665840925.jpg

Settings:

Show Image: Yes
Show Title: Optional (Yes recommended)
Show Price: Optional
Show Description: Optional
Show Add to Cart button: Optional (Yes recommended)

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.

.sqs-block-product {
  background: #fcfcfc;
  padding: 20px;
    transition: all ease-in-out 400ms !important;
-webkit-transition: all ease-in-out 400ms !important;
-moz-transition: all ease-in-out 400ms !important;
-webkit-box-shadow: 0px 0px 5px 0px rgba(166,166,166,0.1);
-moz-box-shadow: 0px 0px 5px 0px rgba(166,166,166,0.1);
box-shadow: 0px 0px 5px 0px rgba(166,166,166,0.1);
.image-container {
  img {
    transition: all ease-in-out 400ms !important;
  }
}
.product-title {
  text-align: center;
  margin: 30px auto 0px auto;
  width: 100%;
}
.productDetails {
  a {
    font-size: 18px;
    letter-spacing: 1px;
    font-weight: 600;
    text-align: center;
  }
}
.product-price {
  margin-top: 10px !important;
  text-align: center;
  font-size: 16px;
}
.sqs-add-to-cart-button-wrapper {
  margin-bottom: 14px !important;
  text-align: center;
}
}
.sqs-block-product:hover {
  -webkit-box-shadow: 0px 0px 8px 0px rgba(166,166,166,0.2);
-moz-box-shadow: 0px 0px 8px 0px rgba(166,166,166,0.2);
box-shadow: 0px 0px 8px 0px rgba(166,166,166,0.2);
.image-container {
  img {
    opacity: 0.7;
  }
}
}
PreFooter Social Icons

PreFooter Social Icon - Color

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!

Build the Block

Insert a Code Block, on your Squarespace website.

Copy and paste the following code snippet into the Code Block area.

 

Screen Shot 2017-09-21 at 4.12.51 PM.png 
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Social Media Icons With Font Awesome</title>

   
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  </head>
  <body>
    <div id="socialicons">
<a class="icon" href="#" title="Follow with Facebook" target="_blank"><i class="fa fa-facebook"></i></a>
<a class="icon" href="#" title="Follow with Instagram" target="_blank"><i class="fa fa-instagram"></i></a>
<a class="icon" href="#" title="Follow with Twitter" target="_blank"><i class="fa fa-twitter"></i></a>
<a class="icon" href="mailto:#" title="Email Me" target="_blank"><i class="fa fa-envelope"></i></a>
<a class="icon" href="#" title="Search GPC" target="_blank"><i class="fa fa-search"></i></a>
</div>

You will need to use Font Awesome icons to achieve this look. Copy and paste the following code into "code injection" in the header section to enable Font Awesome icons on your site.

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
1479389586351.gif

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.

#socialicons {
    text-align: center;
}
#socialicons .icon{
    background: MAIN_COLOR;
    display: inline-block;
    color: white;
    font-size: 30px;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    vertical-align: center;
    margin: 0 1px 8px;
    -webkit-border-radius: 17px; 
    -moz-border-radius: 17px; 
    border-radius: 50px;
    border: solid 2px white !important;
}
#socialicons .icon:hover{
    background: #F04E26;
    border: solid 2px #F04E26 !important;
}

In order to change the size of the icons, all you need to do is make reduce or increase the font size, width, and height. These values must all be the same number. You may also need to adjust the light height to center the icons in their respective enclosures.

Gallery Block Grid Overlay Title

PreFooter Link Color

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!

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.

/*
* GALLERY BlOCK GRID OVERLAY TITLE PLUGIN START
*/
// SETTINGS
// title font-size
@gridOverlayFontSize: 19px;
// Title distance from images top border. e.g "10px" or "25%"
@gridOverlaySpaceFromTop: 36%;
// padding (space) around the title. Prevent text from clashing to the borders of image
@gridOverlayTitlePadding: 34px;
// Title Letter case. Use 'none' for lowercse and 'uppercase' to uppercase
@gridOverlayTitleLettercase: uppercase;
// Title text color. Use http://www.colorpicker.com/
@gridOverlayTitleColor: #FFF;
// Add some space to your title to make it fancy. Try something around 0.0em – 0.5em
@gridOverlayTitleLetterSpacing: 0.4em;
// Title background color. Use http://www.colorpicker.com/
@gridOverlayTitleBackgroundColor: transparent;
// Background color that appears when hovering image. Use http://www.colorpicker.com/
@gridOverlayBackgroundColor: black;
// Image opacity when hovered. Use value between 0.0 – 1.0
@gridOverlayHoveredImageOpacity: 0.4;
// Speed of hover effect
@gridOverlayTransitionSpeed: 0.5s;
// You can add a small animation to the text so it slides up while being faded in. Choose how many pixels to move. You can also use negative values (e.g. -12px) or 0
@gridOverlayTitleTranslatePixels: 5px;
// If you have padding between images set AND you see a small border below images set this true instead of false
.paddingAroundImages(true);
// site background color
@gridOverlaySiteBackgroundColor: #FFF;
// Font to be used (you'll need to find out the CSS code name of the font family )
@gridOverlayFontFamily: "futura-bold";
// That's it! Don't modify any code below unless you know what you're doing.
// fix small slice of background showing on some aspect ratios
.paddingAroundImages(@debug) when (@debug = true) {
    img.thumb-image{
      border-bottom: 1px solid @gridOverlaySiteBackgroundColor;
    }
}
@media(min-width:600px){
// transition to the image itself
img.thumb-image{
  transition: @gridOverlayTransitionSpeed opacity ease;
  -webkit-transition: @gridOverlayTransitionSpeed opacity ease;
}
.sqs-gallery-block-grid .slide a {
  background-color: @gridOverlayBackgroundColor;
}
// relative positioning so absolute positioning of title works
.sqs-gallery-block-grid .margin-wrapper{
     position:relative;
}
//title: make parent link clickable, absolute position over image and add transition
.sqs-gallery-block-grid .margin-wrapper .image-slide-title{
  line-height:1.4;
  text-transform: @gridOverlayTitleLettercase !important;
  background:@gridOverlayTitleBackgroundColor;
  font-size: @gridOverlayFontSize !important;
  color: @gridOverlayTitleColor;
    pointer-events: none;
    position:absolute;
    top:@gridOverlaySpaceFromTop;
    opacity:0;
    transition: @gridOverlayTransitionSpeed all ease;
    -webkit-transition: @gridOverlayTransitionSpeed all ease;
    box-sizing:border-box !important;
    padding-left:@gridOverlayTitlePadding;
  padding-right:@gridOverlayTitlePadding;
    white-space: normal !important;
  font-family: @gridOverlayFontFamily;
  letter-spacing: @gridOverlayTitleLetterSpacing;
  -webkit-transform: translate(0px, @gridOverlayTitleTranslatePixels); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
    -ms-transform:  translate(0, @gridOverlayTitleTranslatePixels); /* IE 9 */
    transform:  translate(0, @gridOverlayTitleTranslatePixels); /* IE 10, Fx 16+, Op 12.1+ */
}
// when hoverin a slide set the opacities of image and title
.sqs-gallery-block-grid  .slide:hover {
  .image-slide-title {
    opacity:1;
      -webkit-transform: translate(0); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
      -ms-transform:  translate(0); /* IE 9 */
          transform:  translate(0); /* IE 10, Fx 16+, Op 12.1+ */
  }
   img.thumb-image{
      opacity: @gridOverlayHoveredImageOpacity !important;
    }
    }
/*VIDEO GALLERY BLOCK FIXED*/
.sqs-gallery-design-grid .slide .margin-wrapper {
  background: @gridOverlayBackgroundColor;
  img{
    transition: @gridOverlayTransitionSpeed opacity ease;
    -webkit-transition: @gridOverlayTransitionSpeed opacity ease;
  }
  &:hover{
    img{
          opacity: @gridOverlayHoveredImageOpacity !important;
    }
  }
}      
} // end media
/*
* GALLERY BlOCK GRID OVERLAY TITLE PLUGIN END
*/

.social-icons-style-knockout.social-icons-color-white .sqs-use--mask {
  fill: #FFFFFF;
}
.social-icons-style-knockout.social-icons-color-white:hover .sqs-svg-icon--wrapper:hover .sqs-use--mask {
  fill: #FFFFFF;
}

.element {
    position: relative;
}
 
/*replace the content value with the
corresponding value from the list below*/
Page/Section Targeting

Page/Section Targeting

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

Targeting Specific Pages

In order to target a specific page, you need to be able to 'inspect' the page you are wanting to modify. On Mac, this is accomplished by right clicking and selecting inspect element.

 

Upon selecting inspect element, a window should appear on the botton of your screen displaying code. Within this code, you need to navigate and find  the body class. This class has an ID called a collection which you will need to copy.

Screen Shot 2017-09-21 at 4.49.11 PM.png
Inspect Element.png
 

After copying the ID for the page you are wanting to target, you will want to position it before the CSS code beginning with a '#.'

Your code should reflect this sample: #collection-043bfeqwr3143215 {your code here}

Screen Shot 2017-09-21 at 5.00.03 PM.png

Targeting Specific Sections Within Indexes

Much like previously stated, you will need to "inspect" the page you are wanting to target; however, in this case were are not wanting to find the ID for the entire page, only for the section. Most of these sections will be easy to find because they are labeled by the name you gave them instead of a collection ID.

Asset 2.png

Above, you can see the 5 sections that I have highlighted within a page. These IDs are copied and applied in the same way as mentioned in the previous section.

Targeting Multiple Pages

This one is really simple. In order to target multiple pages or sections in your website, simply copy and paste the ID's separated by a comma.

A sample of doing this would be:
#collection-90ffe48234542hhfdj48, #header-4-section {your code here}.

This can be done to as many pages or sections as you want.

Screen Shot 2017-09-21 at 5.16.35 PM.png
Pushy Nav

Pushy Nav

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

How to Install

  1. Watch the installation video
  2. Style the navigation by using the generator below
  3. Once you're done, copy the generated code and paste it into the areas shown in the video.
  4. Enjoy

Copy & Paste

Copy and paste the code to the right into the header section of the code injection menu located in settings.

Settings > Code Injection > Header

Download this file for easier support.

<!-- TheCustomSquare Pushy Nav -->
<link rel="stylesheet" type="text/css" href="//platform.thecustomsquare.com/css/pushy-nav.css" />
<style type="text/css">
.menu-btn {
  background: rgba(237,237,237,0.80);
  top: 10px;
  left: 10px;
  position: fixed;
  border-radius: 3px;
}
.menu-btn span {
  background: #333333;
  height: 3px;
}
.cs-menu {
  background: #666666;
  width: 350px;
}
.site-overlay {
  background-color: rgba(0,0,0, 0.5);
}
.cs-menu a {
  color: #FFFFFF!important;
}
.cs-menu a:after {
  color: #5AC1E2;
}
.cs-menu a:hover {
  color: #5AC1E2!important;
}
.cs-menu .cs-menu-secondary a {
  color: #FFFFFF!important;
}
.cs-menu-submenu.cs-menu-secondary > a i {
  color: #5AC1E2!important;
}
.cs-menu .cs-menu-secondary a:hover {
  color: #5AC1E2!important;
}
.cs-menu-left {
  -webkit-transform: translate3d(-350px, 0, 0);
  -ms-transform: translate3d(-350px, 0, 0);
  transform: translate3d(-350px, 0, 0);
}

.cs-menu-open-left #cs-site-wrapper,
.cs-menu-open-left .push {
  -webkit-transform: translate3d(350px, 0, 0);
  -ms-transform: translate3d(350px, 0, 0);
  transform: translate3d(350px, 0, 0);
}

.cs-menu-right {
  -webkit-transform: translate3d(350px, 0, 0);
  -ms-transform: translate3d(350px, 0, 0);
  transform: translate3d(350px, 0, 0);
}

.cs-menu-open-right #cs-site-wrapper,
.cs-menu-open-right .push {
  -webkit-transform: translate3d(-350px, 0, 0);
  -ms-transform: translate3d(-350px, 0, 0);
  transform: translate3d(-350px, 0, 0);
}
</style>
<script>
(function() {
  var b = document.getElementsByTagName("html")[0];
  b.className += " cs-nav-secondary-false";
})()

window.customSquare = window.customSquare || {};
window.customSquare.pushyNav = {
  direction: "left",
  ignoreSecondaryNav: false,
  closeOnClick: false,
};
</script>
<script async defer src="//platform.thecustomsquare.com/js/pushy-nav.min.js"></script>
Slide Up Summary Cards

Slide Up Summary Cards

The Slide Up Summary Cards are a highly visual/highly optional plugin that helps you to bring a sleek and smooth interactive element to your website. 

How to Install

  1. Watch the installation video
  2. Create your code by using the generator below
  3. Once you're done, copy the generated code and paste it into the areas shown in the video.
  4. Enjoy
  <!-- begin TheCustomSquare Slide Up Summary Cards -->

  <style type="text/css">
  /* targets summary feeds set to GRID only */
  /* container for block */
  /*:nth-of-type(4) numbering goes on the evens. so the first summary grid block is (2), second is (4), etc... */
  .cs-animated-cards-target .sqs-gallery-design-autogrid-slide {
    border: none;
    z-index: 50;
    background-repeat: no-repeat;

  /* card shadow with bounce */
    -webkit-transform: none;
    transform: none;
    -webkit-transition: box-shadow .5s ease-in-out,width .2s ease-in-out,margin .2s ease-in-out,-webkit-transform .75s ease;
    transition: box-shadow .5s ease-in-out,width .2s ease-in-out,margin .2s ease-in-out,-webkit-transform .75s ease;
    transition: box-shadow .5s ease-in-out,width .2s ease-in-out,margin .2s ease-in-out,transform .75s ease;
    transition: box-shadow .5s ease-in-out,width .2s ease-in-out,margin .2s ease-in-out,transform .75s ease,-webkit-transform .75s ease;
    background-position: 40%;
    position: relative;
    box-shadow: 0 30px 40px 0 rgba(0,0,0,.25);

  /* card corner radius */
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -khtml-border-radius: 3px;
    }

  .cs-animated-cards-target .sqs-gallery-design-autogrid-slide:before {display: block; content: ""; width: 100%; padding: 0; height: 0; }

  /* container for contents --
  this link will get overridden by SQS when a text link
  is applied in the excerpt section aka CTA  */
  .cs-animated-cards-target .sqs-gallery-design-autogrid-slide  a {
    overflow: hidden;
    text-decoration: none;

  /*sets text color*/
    color: #FFFFFF;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    text-align: left;
    border: none;
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    z-index: 60;
    margin-bottom: 0;
    padding: 0!important;
    cursor: pointer;
    }

  .cs-animated-cards-target .sqs-gallery-design-autogrid-slide a:after {content: ""; position: absolute; padding: 0; z-index: 61; display: block; width: 100%; height: 120%; top: 0; left: 0; right: 0; bottom: 0; background-position: 0 ; -webkit-transition: background .5s ease-out; transition: background .5s ease-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0);}

  .cs-animated-cards-target .sqs-gallery-design-autogrid-slide:hover {
    -webkit-transform: translateY(-20px); transform: translateY(-20px);
    box-shadow: 0 50px 60px 0 rgba(0,0,0,.25);
  }

  .cs-animated-cards-target .sqs-gallery-design-autogrid-slide:hover a {-webkit-transition: .5s ease-in-out; transition: .5s ease-in-out;}

  /* image wrapper -- controls the height of the card */
  .cs-animated-cards-target .summary-thumbnail-outer-container {height: 400px!important; padding: 0; object-fit: cover;}

  /*image - actual image - size here must === the size of the card */
  .cs-animated-cards-target .summary-thumbnail {z-index: 63; background-size: cover; background-repeat: no-repeat; height: 400px!important;}

  .cs-animated-cards-target .summary-thumbnail .img-wrapper {z-index: 62; }

  .cs-animated-cards-target .sqs-block-summary-v2 .summary-thumbnail-container:hover {opacity: 0.5;-webkit-transition: .25s ease-in-out;transition: .25s ease-in-out;}

   /* summary title/except/meta container -- container for text hover effects */
  .cs-animated-cards-target .sqs-gallery-design-autogrid-slide .sqs-gallery-meta-container {position: absolute; top: 0; left: 0; -webkit-transition: .75s ease-in-out; transition: .75s ease-in-out; height: 125%; width: 100%; padding: 0 20px 0px 20px; color: #fff; z-index: 99!important; display: flex; flex-flow: column nowrap; justify-content: flex-end; }

  /*controls how much the meta container slides up*/
  .cs-animated-cards-target .sqs-gallery-design-autogrid-slide .sqs-gallery-meta-container:hover {
    -webkit-transform: translateY(-18%);
    transform: translateY(-18%);

  /* OPTION - Solid backround on hover */
    /*background-color: teal;*/

  /* OPTION - solid background with opacity on hover*/
  background-color:rgba(240,78,38,0.4);

    -webkit-transition: .75s ease-in-out;
    transition: .75s ease-in-out;

  /* POTENTIAL OPTION - adding padding here will add a left movement to the text hover effect --
    padding: 0 35px;  */
    }

  .cs-animated-cards-target .sqs-gallery-design-autogrid-slide .sqs-gallery-meta-container:hover a {padding: 0;}

  /* sqs title field input - byline (appears as line 1 in cards */
  .cs-animated-cards-target .sqs-gallery-design-autogrid-slide .summary-title a {
    color: #fff!important;
    font-size: 0.8em;
    font-weight: normal;
    text-transform: none;
    line-height: 1.25em;
    order: 2!important;
    }

  /* sqs caption / excerpt field */
  .cs-animated-cards-target .sqs-gallery-design-autogrid-slide .summary-excerpt {
    opacity: 1;
    -webkit-transition: .75s ease-in-out;
    transition: .75s ease-in-out;
    padding-right: 20px;
    order: 1!important;
    }

  /* sqs caption / excerpt field — all text in the box below title section  */
  .cs-animated-cards-target .sqs-gallery-design-autogrid-slide .summary-excerpt p {
    color: #FFFFFF;
    /* padding bottom controls the amount of space btw title and CTA */
    padding-bottom: 35px;
    letter-spacing: 1px;
    }

   /* sqs caption / excerpt field - text in box that is bolded displays as "h1" aka title of card */
  .cs-animated-cards-target .sqs-gallery-design-autogrid-slide .summary-excerpt strong {
    z-index: 999999999;
    color: #FFFFFF!important;
    font-size: 2.125em!important;
    line-height: 1.025em;
    text-transform: none;
    font-weight: bold;
    }

  /* sqs caption / excerpt field - text in box that is liked displays as "button" aka CTA of card */
  /*max char count for this is 11 + 1 for icon or 12 with no icon*/
  .cs-animated-cards-target .sqs-gallery-design-autogrid-slide .summary-excerpt a {
    z-index: 999999999;
    color: #000000;
    font-size: 1.125em;
    font-weight: normal;
    text-transform: uppercase;
    line-height: 1.35em;

    /* inline pops the icon up on the same line as the CTA */
    display: inline;

    /* start version styles w/ CTA in box  */

    background-color: #FFFFFF;
    border-radius: 3px;
    border: none;
    padding: 8px!important;
    }

  /* OPTION - icon or char that appears after the CTA text */
  /* FOR ICON TO APPEAR, one space must be marked as Ital in field input editor */
  /* To create this: type a space right after text you want in the cta. Slect entire line.
  The text for the cta and the space will be underlined to show that it is a link.
  Then carefully slect only the space at the end of the line and click the "i" button to make itlaic.
  This creates an "em" tag and inserts the icon.  */
  .cs-animated-cards-target .sqs-gallery-design-autogrid-slide .summary-excerpt em {
    padding:0 ;
    margin-right: -10px!important;
    }

  /* OPTION - put glyph number in the content "" to swap. Could be set up as fontawesome in future release.  */
  .cs-animated-cards-target .sqs-gallery-design-autogrid-slide .summary-excerpt em:before {
    content:"\232A";
    font-style: normal;
    /* make slightly smaller than CTA text to make it match baseline & height */
    font-size: 0.9em;
    /* padding here controls space beteen end of cta link and arrow icon */
    padding-left: 8px;
  }

  .cs-animated-cards-target .sqs-gallery-design-autogrid-slide .summary-excerpt a:hover {
    /*overrides sqs native a:hover blink - changing any other variable triggers when card is hovered not link */
    opacity: 1;
    visibility: visible;
  }

  .cs-animated-cards-target a.summary-read-more-link {display: none!important;}

  /*************************/
  /*  ADJUSTMENTS SECTION  */
  /*************************/

  /*force cta to be visible  and static on moble  */
  html.touch .cs-animated-cards-target .sqs-gallery-design-autogrid-slide .sqs-gallery-meta-container {top: -20%;}
  html.touch .cs-animated-cards-target .sqs-gallery-design-autogrid-slide .sqs-gallery-meta-container:hover {transform: none;}
  html.touch .cs-animated-cards-target .sqs-gallery-design-autogrid-slide .summary-excerpt a  {font-size: 1.25em!important; padding-top: 50px; padding-bottom: 25px;}
  html.touch .cs-animated-cards-target .sqs-gallery-design-autogrid-slide .summary-excerpt em:before {font-size: 1em;}

  /* global text adjustments for smaller desktop screens */
  @media (min-width: 888px) and (max-width: 1024px){
    html.notouch .cs-animated-cards-target .sqs-gallery-design-autogrid-slide .summary-excerpt a  {font-size: .95em!important; padding-top: 50px; padding-bottom: 25px;}
    html.notouch .cs-animated-cards-target .sqs-gallery-design-autogrid-slide .summary-excerpt em:before {font-size: 0.8em;}
    html.notouch .cs-animated-cards-target .sqs-gallery-design-autogrid-slide .summary-excerpt strong { font-size: 1.8em!important; padding-bottom: 20px;}
    html.notouch .cs-animated-cards-target .sqs-gallery-design-autogrid-slide .summary-excerpt p {padding-bottom: 1.8em;}
  }
  </style>
  <script>
  document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll("[data-block-type='55']").forEach(function(el) {
      el.className = el.className + " cs-animated-cards-target";
    });
  })
  </script>
  <!-- end TheCustomSquare Slide Up Summary Cards -->

Copy & Paste

Copy and paste the code to the right into the individual page header section of the code injection menu located in the page's settings.

Settings > Code Injection > Header

Download this file for easier support.

Facebook Comments Plugin
Facebook+Comments.gif

Facebook Comments Plugin

Wondering how to add Facebook comments to your Squarespace blog?

This plugin makes it really simple.

Not only does it automatically integrate with your blog, you can also hide  comments from the blog list page so they only show up on blog posts.

Download this file and follow the instructions in the instruction.html file.

Sync Product Image with Variant Plugin
Thumb.gif

Sync Product Image with Variant

Finally, a way to get the image on your product page to change and match the variant selected. That is, you pick blue variant it shows the blue product image, etc.

This also works in reverse. If you change the image the variant changes as well.

For use with Brine, Aria, Basil, Burke, Cacao, Clay, Ethan, 
Fairfield, Feed, Foster, Greenwich, Hayden, Hatch, Heights, 
Hunter, Hyde, Jaunt, Jones, Juke, Keene, Maple, Margot, 
Marta, Mentor, Mercer, Miller, Moksha, Motto, 
Mojave, Nueva, Polaris, Rally, Rover, Sofia, Sonny, 
Sonora, Thorne, Flores, Wav, Wells, and West.

Does not work with Galapagos or Supply.

Download this file and follow the instructions in the instruction.html file.