My 4 favorite CSS tweaks I use on my Squarespace sites

 
My 4 favorite CSS tweaks I use on my Squarespace sites.jpg

As a Squarespace web designer I spend my life in the back end of Squarespace sites.

All that time and experience adds up, and I'm able to hack Squarespace to do just about anything I want using the built-in Squarespace blocks, templates and Site Styles panel.

There's a few things however that I'm extra picky about and use CSS to force Squarespace to do what I want it to.

Today I'm going to share the common CSS tweaks that I use on my own and my clients sites these days.

I always use the Brine template (see why here) for the sites I build, so these CSS tweaks will definitely work on any template in the Brine family, and maybe will also work on other templates too, I just haven’t tested it yet.

Okay, let's get into it shall we?!

You can sign up for a free trial of Squarespace here and I also got ya a little off the price, use code PAIGE10 for 10% off your first year. (Yes, that's an affiliate link!) 

How to hide the header, navigation & footer on specific Squarespace pages

When you have a page with a very specific goal, such as getting a visitor to opt-in to your email list or purchase something on a sales page, it's best to give only one option on that page (taking the action you want the visitors to take)! 

How do we encourage that to happen? Strip out all the distractions and other options to be clicked.

I use the following CSS to hide both the header and footer of a page, so only the content of the page is showing. This way the only way to get off that page is to take the 1 action available on that page or hit the back button.

This CSS isn't completely a copy & paste job, there's a teeny tiny bit of work you have to do here.

I'll lay out the steps as simply as I can, and explain why we're doing what we're doing.

First things first, we need to target a specific page. If we just popped in this code without specifying a page, then our header and footer would be missing from our whole site, and that's not what we're going for here. (Talk about building the worlds most impossible site to navigate ever... 😂)

Here's how to do that.

Step 1. Build the page.

Step 2. Open the page you just built in Google Chrome.

Step 3. On a Mac, hit control & click on the page. Click 'view page source'.

Step 4. Click command + F to search.

Step 5. Search for "title"

Step 6. Beside "title" will be the name of your page followed by "id": and a long string of numbers. Copy those numbers.

How to hide the footer and header navigation on one specific Squarespace page.png

Step 7. Paste the following code into your Custom CSS in Squarespace (Design > Custom CSS).

 #collection-numbergoeshere {
      header, footer {
             display: none !important;
     }
 }

Step 8. Replace the 'numbergoeshere' bit with the long number your copied earlier. 

You're all done!

 

 

How to hide the underline below links in your Squarespace footer

Even if the template I'm using has a footer navigation, I end up just creating text links for my footer, because I like the flexibility of design better with text links than the footer navigations.

However, a lot of the templates have underlines for links, and that makes things look rather squished and messy.

If you're also not a fan of the underline look, then use the following CSS to get rid of it.

.sqs-block-content a, .sqs-block-content a:visited {border: none !important;}

Viola! Cleaner, right?!

 

How to split your Squarespace footer into two color blocks

This one is hands down my fav, because I always love putting opt-in gifts in footers, cause you know, they show up on every page of a site so they tend to convert really well!

Normally however Squarespace footers are just one color, and I like for my opt-in gift to be really noticeable and pop! So, making the footer a different color really helps with this.

Here's how to do it. (Note, this works on desktop and will revert to the normal color on a mobile screen).

@media all and (min-width:640px) {
  .Footer-inner {
     max-width: 100%!important;
     padding: 0 0;
    .Footer-blocks--top {
  background: #d0dfe2 !important;
}
 }
}

One other thing you might want to know about this bit of code is that it makes editing your footer a little tricky sometimes, so if you're having issues editing your footer after using this, just copy and paste it into a note, delete it out of your custom CSS, edit your footer and paste it back in.

 

How to change the background color of a gallery block to transparent or a color

Find the background color of the gallery block annyoing? Me too.

Use this one below that says ‘transparent’ in it to make the background transparent.

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


Or use the one below that with the string of numbers to change it to a certain color. You’ll just want to tweak the numbers (the 255’s) to change the color, and change the 0 to 1

.sqs-gallery-block-slideshow { background-color: rgba(255,255,255,1); }

 

There's a few other bits of code I use often, such as making a clickable, drop down FAQ, custom Pin-It buttons, animated counters, and more!

That however I can't share with you as I bought the code from Square Studio, my go-to for all things Squarespace CSS code! 😉 (Yep, that’s an affiliate link!)

If you also want to add a little somethin'-somethin' to your Squarespace site with custom code, def take a browse over at Square Studio. Oh, and use the code 'squaresecrets' for 10% off anything in the shop.