SquareSpace Tips and Tricks

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

Using the Browser Inspector and Developer Tools

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.

Example right-click browser dialog — This menu is similar in other browsers, except Safari — you’ll need to dig into the options to unlock the feature by going to Preferences > Advanced > Show Develop menu in menu bar.

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:

Developer tools code window — The h3 tag can have multiple definitions. Seen here the color is defined separately from the meat of the h3. These are all SquareSpace defaults — we haven’t done anything yet.

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.

Adding more utility to the text Code block

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:

Text block choices — One could use the knowledge below to rewrite the Code option into something else, or add additional styles to it that aren’t found in the SquareSpace style editor.

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.

Color conversions — The border colors and background colors are translated by SquareSpace into their hex equivalents automatically. You can use any color syntax you’d like — hsl, rgba, hex, etc.

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.

Custom Code block versatility

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:

SquareSpace code block — Adding a new code block to the page.

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:

SquareSpace code block dialog — This panel is your direct connection to adding your own custom CSS and markup.

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:

Hello, Heading 4

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.

The :not and :before Pseudo Classes

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:

Example footer navigation — I didn’t intend for the bottom blog navigation links to pick up the custom h4 styles — but alas, they are also h4 tags.

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.

The :Hover Pseudo Class

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

Styling specific images

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.

Uploading Images for Code Blocks +

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.

New hidden page — All the images you want to use elsewhere in custom code blocks will be uploaded to this page.

Notecard graphic — this has been added to the hidden images page as a simple image block.

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.

Collage block — these offer a nice opportunity to style the text overlay portion.

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:

Recipe Card

— 4 Pears
— 9 Apples
— 2 Bunches Parsley
— 1 Handful Arugula
— 2 Broccoli Florets

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.

Simple Box Shadows +

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:

Example box shadow — Even if the description text in this image block is hidden, this shadow method will still work.

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.

Sexier Shadows with CSS Filter +

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

Example filter shadow — Multiple drop shadows can be stacked to give transparent png graphics a nice sense of depth, without having to make the shadow in Photoshop.

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

Simple Text Shadows

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

Bacon ipsum dolor amet flank pastrami picanha short loin, beef ribs boudin ribeye shankle drumstick pork loin chicken. Tenderloin leberkas pastrami.

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>

Long Faded Text Shadows

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

Bacon Ipsum Dolor Flank Steak

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.

Mobile-specific styles

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!