My 3 fav CSS tweaks I use on all the Squarespace sites I build

My 3 fav CSS tweaks I use on all the Squarespace sites I build.png
 

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

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 just about every one of my own and my clients sites these days. 

A note before we get started however, I use a template within the Brine family for pretty much every single one of my clients these days (as of writing in Oct. 2017) so this CSS will definitely work in any of the Brine family templates.

If you're using another Squarespace template, it'll be hit and miss if this exact code works.

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

 

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.

 

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 code! 😉

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.