How to Style Hack Your Squarespace Site (for Non-Coders)

If you don't know how to write frontend code but still get nitpicky when it comes to how your website looks, this is the post for you. In order to change the way your site looks beyond what's offered in the Style Editor, you have to use CSS. This an acronym for Cascading Style Sheets, in case you were wondering. CSS controls things like fonts, colors, dimensions, even what happens when you hover over something with your mouse.

There are two ways of modifying styles with code on your Squarespace site - the Custom CSS section in your main settings and Code Injection available in your individual page settings.

  • Custom CSS will affect the styling site-wide. It should be your go-to area for adding CSS. I love this tool because you can see your changes in realtime as you type.
  • Styles you add via Code Injection affect only that page. This is useful for when you want to make a change to an element used throughout the site (e.g. an image block), but only want the change to occur on that specific page. Here you can also use JavaScript to manipulate your page beyond what CSS can do (don't worry, it's not supposed to make sense yet).

This site uses the Montauk template. Each template comes with a particular set of predefined styles and changes permitted by the Style Editor. Therefore, a change that requires CSS for me, may for you just be a simple adjustment in the Style Editor, and vice versa. So while the below examples may not specifically apply to you, the idea is to get comfortable with adding custom code to your site, and know where to look for help.

Let's start with some simple changes. Navigate to:  DESIGN  >  CUSTOM CSS

Your Custom CSS section allows you to add styling that will be incorporated into the CSS that currently lives on your site. Your changes will almost always overwrite styles that already exist (e.g. if you set the header font color to blue, the site will use your instruction over its original). I say almost always because I did run into some exceptions, and you might too.

 

Gallery Padding

A change I wanted to make that immediately stood out was to add space between the images in my carousel Gallery Blocks

I do actually like the strange effect of having no padding between the images, but for my purposes I wanted to keep spacing around all the images consistent.

The first line of code selects any images contained within any element on the page with the class "sqs-gallery". The second line adds 20 pixels of empty space to the right of each image.

You can do the same thing with any Gallery Block design, but the code will have to change slightly. A simple google search of "Squarespace gallery padding" will give you a ton of resources. Make answers.squarespace.com your new best friend.

 
.sqs-gallery img {
  padding-right: 20px;
}
 

Put a Border Around a Thing

On my About page you may have noticed quite a lovely portrait drawn by the baddest bitch of them all Taylor Ashbrook. When I first popped this image onto the page it looked lost. Lost like a finance bro on leg day with no creatine. A border, I thought, would ground the image and give the user's eye something onto which it could grasp.

However, because I didn't want to add a border to every image on the site, I put the custom styling in the PAGE HEADER CODE INJECTION of my About page.

<style>
  .image-block-outer-wrapper {
    border: 1px solid #cdc4ac;
  }
</style>

This code will select any image on that specific page only and add a one pixel thick solid cream border.

You can increase the border thickness by increasing the number preceding "px" (pixels). The color is determined by that last bit following the # and is called a hex value. Google the word "hex" with literally any color to find one. Most likely you want to use black, in which case the hex value is #000000.

 

Open Instagrams in a New Window

If you've added an Instagram block, the default behavior when you click on an image is to route the current page to Instagram, taking the user away from the site. Why this is the default behavior I really don't know, but I don't like it.

In order for Instagrams to open in a new window, the images' link elements need to have a specific property. This is outside of the realm of CSS, so we are going to use JavaScript and jQuery to infuse the Instagram images on your page with this property.

First, include jQuery in your site's header by navigating to SETTINGS > ADVANCED (under WEBSITE) > CODE INJECTION, and adding the following code to the HEADER text box:

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

Next is where PAGE HEADER CODE INJECTION comes in. Navigate to:  PAGES  >  [YOUR PAGE NAME]  >  SETTINGS (click the gear)  >  ADVANCED

Copy and paste this code:

<script>
  
function galleryOpenNewWindow() {
  $('.instagram-block a').each(function() {
    $(this).click(function(event) {
      event.preventDefault();
      event.stopPropagation();
      window.open(this.href, '_blank');
    });
  });
}

$(document).ready(function() {
  galleryOpenNewWindow();
});

</script>

Lines 1 & 17:  Wrap the code in a script tag, telling the browser to execute the code inside.

Line 3:  Gives a name to the specific piece of code doing the work so we can refer to it later and execute it only when the page is ready.

Line 4:  Selects every link in any element with the class "instagram-block".

Line 5:  Captures the user's click.

Line 8:  Tells the link to open in a new window.

Lines 13-15:  Execute the code we named above when the page has loaded.

 

Remove Images from an Instagram Block

So that selfie was great for briefly sating an insurmountable need for attention, however this is your portfolio site or artisanal soap store or super serious blog, and you don't necessarily want your grandma or boss to see your bum yoga pants.

Kidding aside, there are many aesthetic, functional and business reasons why you would want to curate your Instagram gallery. Allow me to assist.

Step 1:  Include jQuery in your site's header, if you haven't already.

Step 2:  Get the unique URL identifier of the image you want to hide:

  • Go to your Instagram account in a browser, not the mobile app
  • Right click to open the image in a new tab or window
  • Copy the part of the URL after "/p/"   —   https://www.instagram.com/p/BCiNQemTJG0/

Step 3:  Navigate to PAGES  >  [PAGE CONTAINING YOUR INSTA BLOCK]  >  SETTINGS (click the gear)  >  ADVANCED

Step 4:  Add the following code to PAGE HEADER CODE INJECTION:

<script>
  
$(document).ready(function() {
  var imgToHide = 'BCiNQemTJG0/'; // Use your image's id

  $('.instagram-block .slide').each(function() {
    var url = $('a', this).attr('href');
    var regExp = /p\/(.*)/;
    var currentId = regExp.exec(url)[1];
    
    if (imgToHide === currentId) {
      $(this).remove();
    }
  });
});

</script>

The script tags tell the browser to execute the commands inside of them.

The variable imgToHide needs to point to your image's ID, so paste it between the single quotes.

The first and last lines of code ($(document).ready...) represent a jQuery wrapper of sorts, telling whatever is between them to execute only after the page is loaded. We don't want to try to hide things that aren't even there yet, amirite?

If you'd like to hide multiple images, you will have to update the imgToHide variable to point to a list of IDs, and make a few other changes. You can add as many IDs to the imgsToHide list as you want, just make sure they are in quotes.

<script>
  
$(document).ready(function() {
  var imgsToHide = [
    'image id 1',
    'image id 2',
    'image id 3'
  ];

  var imageSet = new Set(imgsToHide)
  
  $('.instagram-block .slide').each(function() {
    var url = $('a', this).attr('href');
    var regExp = /p\/(.*)/;
    var id = regExp.exec(url)[1];

    if (imageSet.has(id)) {
      $(this).hide();
    }
  });
});

</script>

What the bulk of this and the previous code is doing involves asking the browser to find all of the Instagram images on the page and check each one to see if their ID matches one in your list of images to hide. If it finds a match, it uses jQuery to hide the entire element, making it invisible on the page.

 

Transitions

When hovering over my navigation menu items, I noticed the color change was very quick and abrupt. In order to smooth this out, you can instruct your CSS to handle transitions more slowly. In the case of my template, the transition that occurs when hovering over a nav item is a change in color and the addition of a bottom border (scroll up to see for yourself).

.main-nav a {
  transition: all 0.1s ease;
}

I wanted these to take just a bit long to occur, so I added a 0.1 second ease. It's a really subtle change that contributes to the overall feeling of "damn, this internet page is all kinds of elegant".

 

DO NOT FUX WITH

If you are not a frontend developer, here is a list things not to touch:

  1.  Height
  2.  Width
  3.  Display
  4.  Position
  5.  Anything with a % after it
  6.  Anything you don't understand
 

Squarespace has a complex and gorgeous responsive grid system that no one besides a few people I see at lunch every day deeply understands, so please abide by the above. If you have your heart set on something weird and complicated, search for or post it here to get help from other users.

Happy styling!

Resources to make you smarter:

Tags ,