Squarespace HTML & CSS Tips & Tricks

Below are HTML & CSS code snippets for achieving certain things for your Squarespace website.  The code may not work on every Squarespace family template, so further editing may be needed for your website.  Some of the code snippets have worked for me in the past but some parts may no longer work due to code changes with Squarespace.

If you need help or assistance, please contact me.


Hide Header

#header {display:none}

Hide Following:  Header, Footer, Pre-Footer

#header {display:none}
#footer {display:none}
#preFooter {display:none}

Fixed Header

#header {position:fixed !important;}

Remove HR Line padding

.sqs-block-content hr {margin-top: 0px !important; margin-bottom: 0px !important;}

Contact Form Font Size Adjustments

.form-wrapper .field-list .field .caption {font-size: 16px;}
.form-wrapper .field-list .field .description {font-size: 16px;}

Slideshow Gallery Arrows - Make Darker

.sqs-gallery-controls .previous, .sqs-gallery-controls .next { background: rgba(0, 0, 0, .7) !important;}

Transparent Slideshow Background

.sqs-gallery-block-slideshow { background-color: transparent }

Remove Image Padding

.sqs-block.image-block { padding: 0 !important }

Make the Scroll Down arrow & text bigger and white

.parallax-item .scroll-arrow:before {font-weight:900; color:#ffffff; font-size:55px; margin-bottom:5px;}
.parallax-item .scroll-arrow, .parallax-item .scroll-arrow span { color: #ffffff !important }

Button Width - Make same size

.sqs-block-button-element {width:50% !important;}

Anchor Link Smooth Scrolling

Detailed Info - http://www.muno.space/code-snippets/anchor-links

Header Injection:  
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

Footer Injection:  
  <script type="text/javascript">
      $(function() {
        $('a[href*=#]:not([href=#])').click(function() {
          if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
              $('html,body').animate({
                scrollTop: target.offset().top
              }, 1000);
              return false;
            }
          }
        });
      });   </script>

Javascript Drop-Down Menu

<select onChange="window.location.href=this.value">
  <option value="#"> - Select Option -</option>
    <option value="http://www.google.com">Option 1</option>
    <option value="http://www.yahoo.com">Option 2</option>
  <option value="http://www.cnn.com">Option 3</option>
</select>

Resize Header Image - Bigger or Smaller

.transparent-header.view-list .banner-thumbnail-wrapper,
.transparent-header.collection-type-page .banner-thumbnail-wrapper {padding: 400px 0px 325px;}

Slideshow header - Decrease spacing of text in body of page

#block-yui_xxxxxxx  {margin-top:-50px;}

Center Align Photo Caption

.sqs-block.image-block .image-caption-wrapper p {text-align: center !important;}