Customize Your Squarespace Site with Simple CSS Tricks: Part 2

 
Customize your Squarespace website with simple CSS (Part 2). Click through to read →

Today I'm sharing Part 2 in my series on using CSS to help you customize your Squarespace website! Last week we covered customizing the horizontal line, social media icons and adding a custom image to the pre-footer area. This week I'll be covering three more CSS tricks, and believe it or not they're even cooler than last week's tips :P

Let's dive in!


01 | Customize the dropdown menu colors


One of the (many) things that I love about Squarespace is how you can create folders in your main navigation, which ultimately helps you declutter and organize your website.

When you create a navigation folder the result is a dropdown menu on your site. This snippet of code lets you customize the dropdown background color and hover colors for the background and text! Check out my example below:

 

#topNav nav .folder-collection ul {
  background-color: #ff0745;
}

#topNav nav .folder-collection ul a:hover {
   background-color: #392655;
   color: #ffffff;
}

For your customization, make sure you change out the hex codes (in bold) above!


02 | Customize your blog's "read more" link


I've seen a lot of people use the "read more" feature for their blog so I thought I'd share the CSS to customize the link. See below for an example:

Customizing this feature is just one more way to add a small touch of your branding to your website, which is what really starts to add a big impact and separate your site from the other Squarespace websites out there using your same theme! Here's the code:

.collection-type-blog article span.inline-action a {
  color: #ffffff;
  background-color: #70aaaf;
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.collection-type-blog article span.inline-action a:hover {
  color: #333333;
  background-color: #aed2c9;
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 15px;
  padding-bottom: 15px;
}

The first bit of code is what your "read more" link will look like at a normal view, and the second part customizes the hover view. Just like all of the other color customizations I've advised about, make sure to use your brand colors to create cohesion and consistency! I'd recommend playing around with the padding values until you get a look that feels right for you.


03 | Create an accordion menu


This is my favorite customization yet, and I was so happy when I found this tutorial by Meagan of Forth and Create!! It actually requires a bit more coding than your basic CSS, but Meagan does such a good job with her instructions and even includes video to walk you through it.

I used to use this feature on my old FAQ and service pages!


Do you use the custom CSS feature on Squarespace, or are there any CSS customizations you've already tried and love? I'd love to hear about them in the comments below :) 

Don't forget to check out my post on CSS basics and Part 1 to this series!