3 CSS Tweaks to Customize Your Squarespace Website

Brine is a popular Squarespace template. There’s a lot of functionality there and a lot you can do with it.

But with CSS, you can do even more!

Here are 3 of my favorite “simple” Squarespace CSS code snippets. These were tested on Brine, but may very well work on other templates too.

Have fun and make your Squarespace website more “on brand.”

 3 CSS Tweaks to Customize Your Squarespace Website

Fixed Header

A header that moves off the screen as you scroll down the page is all well and good, but sometimes you want a fixed header that stays on the page as you scroll down.

In Squarespace, there are 2 different headers: one for tablet/desktop, and another for mobile. In this CSS snippet, we’re only making the desktop header fixed because the mobile can be changed in Design > Site Styles.

To fix your header to the top of the page, drop this code in Design > Advanced > Custom CSS.

@media screen and (min-width: 640px) {
    body {
        padding-top: 102px;
    }

    .Header--top {
        position: fixed;
        width: 100%;
        border-bottom: 1px solid #ddd;
        z-index: 10;
        top: 0;
    }
}

DIY Cover Pages

The cover pages offered through Squarespace are amazing, but require that you follow their strict design formula. Sometimes you need more flexibility.

One way to design a page exactly the way you want is to use a regular page and then hide the distracting header, footer, announcement bar and cookie banner on just that page.

For an example of what this might look like, check out my newsletter sign-up page.

To make your DIY cover pages less distracting, drop this code in that particular page’s Settings (the cogwheel) > Advanced > Page Header Code Injection.

<style>
.Header, .Footer, .Mobile-bar,.sqs-announcement-bar-dropzone,.sqs-cookie-banner-v2 {
    display:none !important;
}
</style>

Style Your Blockquote

The blockquote block provided by Squarespace is a great way of making your blockquotes stand out from the rest of the content on your page.

However, it’s a little plain. If you want it to stand out, here’s some code to make it your own.

Just drop this code in Design > Advanced > Custom CSS.

.sqs-block-quote .sqs-block-content {
    border-left: 5px solid blue;
    background: #fbfbfb; 
}

.sqs-block-quote figure {
    padding: 20px;
}

.sqs-block-quote blockquote {
    padding: 0 20px 0 45px;
    position: relative;
}

.sqs-block-quote blockquote span {
    font-size: 100px;
    color: blue;
    position: absolute;
    top: 24px;
    left: 0;
}

.sqs-block-quote blockquote span:last-child {
    display: none;
}

.sqs-block-quote figcaption {
    padding-left: 45px;
}

What are your favorite CSS tricks? Leave a comment and let me know.


Comments (6)

Leave a Comment

Your email address will not be published. Required fields are marked *

  1. Thanks for the tips. I’ve added a thin, colored line to the left of my quote blocks using your code as a start. I’m curious if it’s possible to have the thin line end at the bottom of the quote content, but above the person’s name. Basically, I’d like it to terminate up higher (as it is originally on the Avenue template ). Thanks again!

  2. Hello,
    Thank you so much for these tips.
    When I upload a GIF as a logo image I cannot fix the header, do you have a tip so that I can fix the header with a gif as a logo ?

  3. Love these! I’ve loved and used the DIY cover page for a long time. For a while I was using it as a stand alone website, by directing another URL to that page. But I ran into some issues with indexing and search results, so I stopped doing that. I’ve noticed that Google search results has gotten worse than it used to be with Squarespace. Have you had any issues? It has to do with canonical URLs…the sitemap available on Squarespace does not put a / at the end of the URL, while Google does. (SS blog posts are exempt from this and seem to index just fine.) I realized that most of my primary content had not been indexed because Google saw what I submitted as "duplicate" content all because of the / at the end of my URLs while the sitemap on Squarespace does not have that. I hope this makes sense…I don’t know how to explain it well. Have you encountered this, or found a solution?

    Also, would love to know if you’ve done a code tutorial about how to make 2 or 3 text columns in a text content block without using two content blocks side by side. Using them side by side spaces them out in a less-desirable way and in mobile, there is a wider gap between the text.

    Thanks for your blog! What a great resource.

    1. While you’ll see both pages with the / at the end and with the / not at the end, Squarespace has meta information set up in each page to tell Google which page is the correct one. Google takes this information into account so it shouldn’t affect your SEO much (I’m not an SEO expert though).

      I haven’t created a tutorial with text block columns. I’ve created a similar effect in a code block though. Good suggestion for a tutorial!

      Thanks so much for your comment! (Definitely going to read up more about what Squarespace is doing for SEO).