Custom CSS Tricks for Squarespace

For website owners and designers using Squarespace, it can sometimes be hard to come up with a unique design that suits your needs, brand and personality. Because Squarespace is a template based website platform the only customization you can make is to drag and drop features onto your pages. 

But did you know that you can use custom CSS within Squarespace?

Today I thought I would talk a little bit about what CSS is and how you can use CSS within Squarespace. And to make things even more interesting I will share some of my favorite (and basic) CSS tricks that I use to customize Studio Krystal and that I believe will positively impact the appearance of your website!

Let's get started:

What is CSS?

CSS stands for Cascading Style Sheet and refers to a style sheet language used for describing the presentation of a document written in a markup language {Wikipedia}. This is a really technical term and I know many of you are looking at it confused.

To put CSS simply, this is the language used by designers and developers to alter the appearance of a website. This language directly relates to changing colors, fonts, margins and many other aspects of website design.

Each Squarespace Template is Different

Squarespace currently offers a large variety of templates to those looking to build a website with their platform. And that means that all of these templates cannot be comprised of the same makeup and same back-end codes. This means that CSS codes aren't going to work for each template.

When looking for CSS codes for your particular template I recommend heading right to Google and typing in something similar to this:

FIVE: CSS to change the background footer color

Of course, the other option is that you could hire a website designer that specializes in Squarespace to make the CSS adjustments that you need.

Customizing CSS on a Single Page versus your Entire Website

On Squarespace, there are two main areas where you can customize you CSS. The first area you can find by going to Design >> Custom CSS. This is going to be the area where you paste in codes that will alter your ENTIRE website design.

For example, if I'm looking to change the line colors on all my pages I would want to paste the custom CSS in this area so that all lines change. However, what if I want to change them on just ONE page?

That's simple. All you have to do is go into your page Settings and then select 'Advanced' from the upper right-hand corner. Now all you have to do is paste your CSS code inside the Page 'Header Code Injection' area and surround it with the following:

<style> CODE GOES HERE </style>


MY FAVORITE CUSTOM CSS TRICKS FOR THE FIVE TEMPLATE

CSS is really something fun to play around with in Squarespace because you don't have to worry about messing up important HTML codes that really create the structure of your website. All you have to do is copy and paste the codes, hit the save button and see if you like the changes. If not, you simply remove the code. 

Here are some of my favorite CSS tricks that I use to custom the FIVE template and my website:

Adding Additional Headers:

One of the main areas that you can see this change is right on my home page in my big quote that says " It's time to turn your side hustle into a flourishing full-time success story!" For this code, I've decided to put it separately on each page so that I can change the font sizing and color as I wish.  

To do this open your page 'Settings' and click the 'Advanced' button in the upper right-hand corner and inside the 'Page Header Code Injection' area paste the following code:

<style type = "text/css">
   
   h4{
     
     font-size: 50px !important;
     line-height: 45px !important;
     color: #000000;
     
   }
   
   
 </style>

To further edit this code change the 50px to a higher or lower number based on how big you want your font to be. And to change the color replace the hex code (#000000) with a different variation of numbers and letters or use the hex code to match your branding. These changes are the basic elements of creating an additional header space. You can go even further into this code by adding elements like:

  • background color
  • uppercase or lowercase transition
  • font weight
  • underline styles
  • font alignment (ie: left, center or right)

And many more fun elements that will give each of your headers there own unique twist!

Removing Page Titles & Descriptions on a Particular Page:

If you have ever viewed the FIVE template before you would know that it comes with text inside of the large header image you see at the top of my blog. This was distracting and unneeded within my design so I used a little CSS coding per page to remove it. 

To do this open your page 'Settings' and click the 'Advanced' button in the upper right-hand corner and inside the 'Page Header Code Injection' area paste the following code:

<style>
 #page-title-wrapper {
 visibility: hidden; }
 </style>

Changing the Background Color of the Footer:

When I began designing my website I quickly found out that the FIVE template didn't allow you to customize the footer of your website. It allowed some text customization but didn't allow anything else. I knew that I wanted a background color and with some simple CSS I was able to do just that.

To use this code you want to apply it to your entire website so head to Design >> Custom CSS and within the empty box paste this code:

#page-footer-wrapper { background-color: #EFEFEF !important; }

Feel free to change the hex code (#EFEFEF) to match with your website colors so that it fits within your branding! And just like the header codes above you can actually add more elements to this code to really customize your footer space. These elements can include:

  • border styles
  • border thicknesses
  • background image
  • font color
  • font size
  • text alignment

And of course, just like the header codes above there are tons more opinions to edit this footer area and make it fully unique to you and your website.


So now that you know my tricks it's time to head back to your website and try some of them out. 

And if CSS completely confuses you and you don't even know where to begin how about hiring someone who can help you make CSS changes to help your website! Studio Krystal has remaining openings to take on YOUR website design project!

So what are you waiting for? Let's get designing your custom website RIGHT NOW!