Favorite CSS tricks for your Squarespace Website

Favorite CSS tricks for your Squarespace Website by EG Media Co | squarespace tips, css tricks, squarespace web designer, web designer, squarespace css tricks

Sometimes you want things you just don’t have. Squarespace has great style editor options depending on the template you’re using, but sometimes there’s a small tweak you wish you could do but the style editor doesn’t allow. Well thank goodness for CSS right?! I want to share some of my favorite quick CSS tricks you can use on your Squarespace website.

It’s ok if you’re a newbie to coding all you have to do is follow the steps below and voilà! CSS couldn’t get any easier than this!

1. Changing the color on your footer

I’ve changed my own website a lot, but I can say I used to have my footer a different color than it is now. I have also used this CSS trick for clients who have asked if I could change the color of their footer to go on brand.

Below you will see the code that you will be pasting to your website.
Go to Design > Custom CSS and paste the custom CSS below:

#page-footer-wrapper {
background-color: paste hex code;
}

2. Removing the banner from certain pages.

I know some templates have banners where you can insert an image or a video but sometimes you don’t want either! You just want a blank page where you could add all of your content without a problem. Some templates allow you to style the banner and you have the option to remove the page thumbnail as banner if you wish. I know that for the Five template as well as for the Montauk family the page banners are shown on each page. In order to remove the page banner from certain pages you will have to use the code below.

Go to Pages > Click on the page settings icon > Go to Advanced > Paste code:

<style>
#banner-area-wrapper {display: none}
</style>

BANNER IMAGE NOT REMOVED:

eg media co. 1.png

BANNER IMAGE REMOVED:

eg media co..png

3. Removing hyphens from mobile

So you’ve designed your website and you’re loving everything about it until you see how it looks on mobile. You realize that those annoying hyphens won’t go away! Agh. There isn’t a quick fix on Squarespace’s style editor that will allow you to check “remove hyphens.” Don’t worry, you guessed it, there’s code for that. 😉

With this quick CSS code you will be able to remove hyphens on mobile within seconds. Simply go to Design > Custom CSS > paste the code above and let the magic unfold! Very simple.

p, h1, h2, h3 {
    -webkit-hyphens: manual !important;
      -moz-hyphens: manual !important;
        -ms-hyphens: manual !important;
            hyphens: manual !important;
  }

4. How to remove the header and navigation from a single page

You know, sometimes you just need to get rid of the navigation bar. I tend to create many Coming Soon landing pages and I like to customize them. I don’t like using the Lock Screen page that Squarespace has in the Design panel. So instead I tend to use a blank page and customize it depending on what my client is looking for. Many times, my clients want to start growing their email list before they launch their website so it will look something like this:

Custom css tricks.png

You see the button that says “get notified”?

Once they click on that it will take them to the sign-up form. When I embedded the sign-up form the navigation bar was still showing at the top. What’s the point of a Coming Soon landing page if whoever visits your website will still be able to take a peek at what’s coming?! This is where this CSS trick comes into play in order to get your page to look like this:

custom css tricks eg media co.png

First you have to find the page's id. You have two options:

1. You can install a perfect Google Chrome Extension that tells you the exact block code you’re looking for. It’s called Squarespace Collection/Block Identifier

2. Or when viewing the page, right click and choose "View Page Source". Then do a "find" (command-find on Mac) and search for your page's name (literally what you named your page). Next to the name of your page you'll find the id. Something like:

“5b05e4c7f950b73493d56866”

Now copy that id because you’ll need it for the code below in order to remove your header and navigation from a single page:

Go to Design > Custom CSS > Paste the code below *Make sure you replace the id number with yours*

  #collection-5b05e4c7f950b73493d56866 div.Header-inner {
    display: none;
  }

5. How to remove the footer from a single page

For the same reasons as above, sometimes the footer is not needed. So in order to remove it you will be following the same steps as above except the code will slightly be changing:

Again you want to use your page id in order to paste it in the code.

Go to Design > Custom CSS > paste the code below:

  #collection-5b05e4c7f950b73493d56866 div.Footer-inner {
    display: none;
  }

There you have it! I hope these CSS tricks helped you in any way. I know I’ve used the same code over and over again for different occasions. Do you have a quick CSS trick you want to show everyone?! Comment below!


OTHER POSTS YOU MIGHT LIKE: