Overview

November 2019 update: Squarespace has fixed or added some features below (notably uploading images for use on other pages). Your mileage may vary with the tricks below, and at the very least you’ll learn a little HTML+CSS.

This tutorial is a collection of tips and tricks I’ve used while noodling with SquareSpace sites. You’ll find ways to get more out of custom code blocks, hook into element styling beyond the vanilla appearance, and other goodies. A lot of these tips might feel like common knowledge if one was familiar with CSS and crafting a site from scratch — but perhaps seeing how these can be applied to a SquareSpace site will inspire some out-of-the-box creativity.

This article won’t go into the finer points of browser compatibility (such as prefixing class rules like -webkit, and others). Everything here is pretty well supported by modern standards. However, I’d be remiss to not recommend doing a quick Google search to read more on the various techniques.

Note: One can certainly do a ton of stuff from the advanced developer mode. This article is not for you — you already know what you’re doing. These are simply hacks and workarounds I’ve found useful for vanilla SquareSpace sites right out-of-the-box.

1. Modifying Default Classes

Let’s get the basics out of the way — everyone needs to know right-clicking anywhere on a web page will bring up a small menu of options. Here in Chrome I’ve highlighted a portion of this section’s title: “MODIFYING DEFAULT CLASSES“, right-clicked, and selected Inspect.

You’ll be treated to the Developer Tools window. It’s a magical place where most of your coding will happen. I’ve highlighted the specific tag in question below; the h3 tag. Also highlighted are the styles being applied to that class. In this case it’s the color #513227, and a bunch of other stuff. You can have multiple definitions for any class. We’re just looking for now:

Using this knowledge, one is able to add additional styling from the Design > Advanced > Custom CSS panel on their SquareSpace site by writing additional styles and rules for the various classes and tags. Here I’ve added a fancy little shadow to all h3 tags, which is not possible from the Design > Site Styles panel.

<style>
  h3 {
    text-shadow: 0px 2px 6px rgba(150, 150, 150, 0.4);
  }
</style>

Note: Don’t bother trying to target anything that has a large string of digits in its class name i.e. class=“yui_3_17_2_1_1540402046071_229457“ — as unique as they might seem, they are always changing, not verbose enough to quickly identify when revisiting CSS rules in the future, and highly unreliable for targeted class styles. We’ll go over some work-arounds in the sections below.

2. Custom Class Basics

There are always a few classes that can’t be styled with SquareSpace’s style manager. Standard CSS classes like <pre>, <article>, <section> and others help define areas on the page and are good candidates for custom styling. More often than not, those tags have minimal or no options in the basic style editor, so you’ll need to roll up your sleeves and do a little custom CSS.

Consider the Code text option when adding new text to your SquareSpace site. The default style of its <pre> tag leaves a lot to be desired, and there is no way to customize it from the site’s style options. I like my code blocks to have more background separation and a well-defined beginning and end.

Let’s add a new text block and set it as Code text:

The following is the default appearance of Code text with no custom styling. The block of Code text is nothing more than a mono-spaced font and some word-wrap & overflow adjustments:

Here it is again after a few custom style modifications in the Custom CSS panel. You’ll see how I’ve added a background color and left border.

Note: It’s helpful to have a second browser open with the live site to double-check your work. Sometimes classes, even when inspected, might not be what you think they are. After making a change, refresh the live site or reload your page to make sure everything looks fine (visitors might catch work-in-progress). I’ll also mention here that SquareSpace won’t offer support with these types of style hacks.

3. Custom Code Basics

To take your page styling beyond the simple Custom CSS tag styles and start adding truly custom elements, you’ll want to become familiar with the Code block. It will allow you to add all the usual text and images, but in a way where you can control the classes surrounding them.

For example, I’d like to further separate this article with subtitles inside each section. However, I’ve already used up my Heading 1 (h1), Heading 2 (h2), Heading 3 (h3) and Code blocks. Let’s make a new style called h4 using the Code block:

This will open a mini code window that will allow lots of flexibility. I’m going to add a new h4 tag and give it the following style:

If you’ll be using the h4 on other pages, might as well put this class style in the Design > Advanced > Custom CSS area instead of only on this page like the example above. Either way, the style results in the following heading:

Note: The h4 tag is actually used for the navigation links below this news article, I found that out while writing this. But rather than change my example, I’ll show you how to not style things that should be left default.

4. Pseudo Classes

There are several ways to modify a class and extend how useful it is. You might be familiar with the lovely :hover pseudo class already, but there are many, many more pseudos that can alter content, target elements based on position, change text, and detect relationships with other markup.

I’ll just touch on :not, :before (and :after), and of course :hover.

Let’s continue from the previous section by using the :not and :before pseudo classes to further style the h4 tag.

Notice my h4 tag above has a long line stretching to the left of the site — I think this might help separate these sub sections a bit more. The line (could be anything really like an image, text, bullet, whatever) is created is using the :before class to attach additional visuals to the h4 tag. Think of it like a bonus element that sticks to its parent. The full h4 code so far looks like this:

<style>
  h4 {
    font-family: Raleway;
    font-weight: 700;
    font-style: italic;
    font-size: 18px;
    letter-spacing: 0.02em;
    line-height: 1.6em;
    text-transform: uppercase;
    position: relative;
  }
  h4:before {
    display: block;
    position: absolute;
    content: "";
    width: 800px;
    background: #f7e6d6;
    height: 4px;
    left: -810px;
    top: 14px;
  }
</style>

Additionally the :after class could be added for even more layout options. It’s like three styles for the price of one. Keep in mind the main class will need position:relative if the pseudo :before or :after classes will be positioned based relative to the main tag.

Anyway, by styling the h4 as such, we inadvertently applied the style to the bottom blog navigation titles:

After a little inspecting I found the class to exclude from this style: .BlogItem-pagination-link-title. By adding a :not() pseudo class to my custom h4, I can exclude the blog navigation from being affected:

<style>
  h4:not(.BlogItem-pagination-link-title) {
    font-family: Raleway;
    font-weight: 700;
    font-style: italic;
    font-size: 18px;
    letter-spacing: 0.02em;
    line-height: 1.6em;
    text-transform: uppercase;
    position: relative;
  }
</style>

Scrolling down to the bottom of this blog you’ll see the article navigation titles now look fine and don’t have the h4 lines.

Note: Pseudo classes can also be chained and do all sorts of other wonderful things. Here’s a lot of useful info on :not over at CSS Tricks — my favorite place for CSS knowledge as a development/designer.

Here’s something more familiar to most — the :hover pseudo class. Using a combination of specifically named images and a custom class or two, it’s easy enough to make something like this gallery. Hover over the images for the effect:

Add the following custom style code block anywhere on the page, and it will apply the styles to the gallery images whose name starts with “Dog-Portraits.“ I’ll go over file name-based styling next.

<style>
  img[src*="Dog-Portraits"] {
    position: relative;
    transition: filter .25s ease-out;
    border-radius: 600px;
    filter: sepia(10%) hue-rotate(315deg);
  }
  img[src*="Dog-Portraits-1"]:hover {
    filter: sepia(60%) hue-rotate(315deg) saturate(400%);
  }
  img[src*="Dog-Portraits-2"]:hover {
    filter: sepia(60%) hue-rotate(30deg) saturate(400%);
  }
  img[src*="Dog-Portraits-3"]:hover {
    filter: sepia(60%) hue-rotate(210deg) saturate(400%);
  }
</style>

Each image has its own hue and saturation hover effect, and they all share the transition. Filter will additionally require a -webkit prefix to be compatible with all modern browsers. Check out this filter article on CSS Tricks for a great primer on everything that filter can do.

5. File name-Based Styling

It’s fairly easy enough to style images based solely on their file name, such as limiting its height or width, without having to wrap them in a custom class or code block. Simply upload an image in the standard fashion (as an image block) and add the following custom code to the page. The src should be part or all of the image’s name:

<style>
  img[src*="Logotype-Tip-Header"] {
    width: 180px !important;
    height: 53px !important;
    left: 35% !important;
  }
</style>

Note: For the sake of quality on high density displays, I used a large logo, about twice the intended size, and scaled it down to fit with the CSS. The logo shown here is normally 640 wide, but the code above limits it to a much smaller 180px wide. It will look clean and sharp even on the on the highest resolution displays. Responsive images and display resolutions are a whole can of worms — enjoy this responsive image article on CSS Tricks which goes into the finer points of everything.

6. Custom Code Blocks and Images

In order to use an image inside a custom code block or in CSS, or say as a background, the common practice on SquareSpace is to simply upload the image to a hidden page, inspect the image’s source path, and use that path inside your custom code block.

Let’s use this trick to tweak the Image > Collage block into something a bit more tailored.

Create a new blank page with no links to it. This is where you’ll be adding images for use elsewhere on your website. Here I’ve created the page and uploaded a notecard graphic to it.

Once the graphic has been added to the hidden page as a plain old regular image block, you’ll right-click on the image and determine the path and file name SquareSpace has assigned. In this example the full path is: https://static1.squarespace.com/static/56ba85d9cf80a17a6f304b72/t/5bfee6498a922dbb2d7ca9e0/1543431761819/Notecard-Backdrop-Horizontal.jpg?format=1000w

Note: Don’t worry too much about the ‘format=’ string at the end of the image; it’s used by SquareSpace to deliver a size-appropriate image depending on the device. That won’t matter for us since our images will be hand placed CSS in code blocks.

Now that we know our image’s full path, let’s create a new image on this blog post using the collage image format.

Typically the text overlay portion of the collage block is a solid color. Let’s replace it with our custom image and make it look more like a recipe card. A lot of this can be modified in the site styles area; we are only swapping the background solid color with our notecard graphic:

If I was going to make a recipe collection, it would be best to add the following CSS to the Advanced > Custom CSS panel for use site-wide:

<style>
  .sqs-block-image .design-layout-collage .image-card {
    background-color: rgba(46,28,5,.9);
    padding: 30px;
    box-sizing: border-box;
    background-image: url("https://static1.squarespace.com/static/56ba85d9cf80a17a6f304b72/t/5bfee6498a922dbb2d7ca9e0/1543431761819/Notecard-Backdrop-Horizontal.jpg?format=1000w");
    background-size: 100% 100%;
    box-shadow: 0 2px 2px -2px rgba(81,50,39,0.2), 0 4px 4px -4px rgba(81,50,39,0.2), 0 8px 8px -6px rgba(81,50,39,0.2), 0 16px 16px -8px rgba(81,50,39,0.1), 0 32px 32px -10px rgba(81,50,39,0.1), 0 64px 64px -12px rgba(81,50,39,0.1), 0 96px 96px -14px rgba(81,50,39,0.1);
  }
</style>

Note: There are 6 types of image block, all with their own opportunities for custom styling. Additional ideas would be to use your hidden graphic as a footer background, which is also not possible in the vanilla SquareSpace templates.

7. Shadows

Shadows often help separate your text and images from busy or low contrast backgrounds. Here are a few samples I like to use as a starting point. You’ll also find plenty of help with CSS shadows by using the Google machine to search for css shadow generator.

Box shadows work well for CSS-defined simple shapes; circles, squares, and jpg images. Because one does not simply upload an image and give it a class on SquareSpace 😂

This method will find an image block based on its description and name, apply the shadow, and set the overflow as visible in order to see the shadow. It’s important to be as specific as needed to avoid wrecking other elements on the page. Upload an image named Shadows-Oposse-Background.jpg using the image block and give it the description Example Box Shadow:

The following custom code block will apply a sexy drop shadow to the image named Shadows-Oposse-Background.jpg and modify the image container’s overflow (which has the description Example Box Shadow) to make the shadow appear:

<style>
  [data-description*="Example Box Shadow"] { 
    overflow: visible !important; 
  } 
  img[src*="Shadows-Oposse-Background.jpg"] { 
    box-shadow: 0px 20px 70px -10px hsla(350, 75%, 78%, .8);   
  } 
</style>

The above shadows are VERY specific. The main reason the description overflow:visible is important is because image blocks always have hidden overflows so a shadow on the image won’t be visible unless the overflow is changed. I find the specificity of this method easiest to control without messing up galleries and other image gallery components.

Note: Shadows will additionally not be visible in edit mode as a result of SquareSpace’s tools and markup. The shadow will only appear once the page is saved/deployed, and not in the edit mode. After saving your page, hit reload and it should show up. The image block description can also be set to hidden after you’ve added text and this will still work — once the description is added it will remain, even when hidden.

CSS filter shadows work best on any png or irregularly shaped graphic, so you don’t have to Photoshop a drop shadow onto your object. This is similar to the previous example, except the image name doesn’t matter. The CSS will now be looking for any image description that contains “Example Filter Shadow”:

<style>
  [data-description*="Example Filter Shadow"] {
    filter: drop-shadow( 0 2px 1px rgba(81,50,39,0.1)) 
    drop-shadow( 0 4px 2px rgba(81,50,39,0.1)) 
    drop-shadow( 0 8px 4px rgba(81,50,39,0.1)) 
    drop-shadow( 0 16px 8px rgba(81,50,39,0.1)) 
    drop-shadow( 0 32px 12px rgba(81,50,39,0.1)) 
    drop-shadow( 0 64px 16px rgba(81,50,39,0.08)) 
    drop-shadow( 0 96px 24px rgba(81,50,39,0.04));   
  } 
</style>

It isn’t necessary to unhide the container overflow because this filter works a bit differently than box-shadow. Notice how multiple filter shadows can be stacked to create a sense of dimension.

Note: This method is not very performant so use it sparingly — too many images could make your page janky.

Sometimes all text needs is a little separation from the background.

When writing text blocks with shadows or other effects, it’s easiest to make them code blocks and assign a custom class like the following example:

<p class="text-shadow-simple">Bacon ipsum…</p>

<style>
  .text-shadow-simple {
    text-shadow: 0px 2px 6px rgba(150, 150, 150, 0.4);
    font-size: 2rem;
  }
</style>

When simple shadows aren’t enough, try using some long soft shadows on larger text.

Stacking shadows behind text gives large titles much more dimension and separation from the background. Same as the previous example, make your text as a code block and give it the following custom class:

<h4 class="text-shadow-deep">Bacon Ipsum...</h4>

<style>
  .text-shadow-deep {
    color: white;
    font-size: 3rem;
    line-height: 3.4rem;
    text-shadow: 0 2px 6px rgba(81,50,39,.1), 
    0 6px 10px rgba(81,50,39,.1),
    0 10px 18px rgba(81,50,39,.1), 
    0 18px 26px rgba(81,50,39,.1), 
    0 28px 38px rgba(81,50,39,.1);
  }
</style>

8. Styling Responsive Design Elements

Mobile layouts often leave a lot to be desired. Some text is too small, some images are too big, and things might have a strange unintended flow on a mobile device. Without getting too far into the why’s and WTF’s, it’s not uncommon to want to modify or even hide things on a mobile display.

When a site is reduced to fit on mobile devices, nearly all grid layouts become a single column, and the images in each column take up the entire screen width (this is normal). In the case of tiny logos or images (like those often found in a site’s footer), those graphics become unintentionally gigantic. Sometimes hiding non-critical or non-informational elements is the way to go.

For example, my profile image in the footer doesn’t add anything to the mobile website experience, and is rather gigantic. I’m going to hide it instead — just on mobile.

The following @media query will hide my profile image on screens smaller than 640px — that’s the typical breakpoint where SquareSpace sites switch to mobile.

<style>
  /* SquareSpace sites generally collapse to mobile at 640px */
  @media screen and (max-width:640px) {
    [data-description*="Footer Logo"] { 
      display: none;
    }
  }
</style>

Note: Remember from earlier that we can target blocks using their name as well as their description text. I chose to use the description text method here because there is a likely scenario where I will change the graphic itself to a different file, but not change the description text.

Wrapping Up

So… that about does it for this brain dump of a post. Learn anything useful? There’s enough material here that hopefully everyone found something new to tinker with on their own SquareSpace site.

Cheers!