My Favourite Squarespace CSS Hacks — Part 3

Sep 19

It's that time again.

As I gain more experience building websites on Squarespace, I continue to notice small nuances that are sometimes neat, sometimes annoying. Regardless of what it is, I often just want to change some small thing that isn’t possible without custom coding.

There are some byzantine ways to position blocks and images to emulate certain looks within Squarespace, but I always find that it's easier to use CSS to make styling tweaks.

Welcome to part 3 of my custom CSS series. Don't forget to check out part 1 and part 2 of My Favourite Squarespace CSS Hacks.

In this edition, I'll show you how to:

Add gradients to buttons;
Prevent index gallery slide-shows from pausing on hover;
Change your logo colour on different pages. Good for when banner images don't provide enough contrast for your logo to be visible.

Add Gradients to Buttons

As someone who is accustomed to the Squarespace’s design language, I can usually tell when I land on a Squarespace website based on a number of design elements that are tediously similar.

For that reason, I like to customize the standard elements so the sites I build don’t look like everyone else’s.

In my previous CSS hack post: My Favourite Squarespace CSS Hacks — Part 2 I cover sticky headers, back-to-top buttons and horizontal rule styling. This time we’re customizing buttons. Adding a gradient to buttons is a great way to add visual interest and another level of differentiation.

Here’s how to do it:

Add a button block, with the ‘solid’ or ‘raised’ style;
Use UI Gradients, or Colorzilla to generate the custom css. Both of these sites make it super easy to automatically generate gradient CSS;
Add the code you get from UI gradients or Colorzilla to your Custom CSS panel. The following code modifies the medium button block. If you want to modify the small or large button block, replace .sqs-block-button-element--medium with .sqs-block-button-element--small or .sqs-block-button-element--large.

.sqs-block-button .sqs-block-button-element--medium {
  background: #0A1C1C;
  background: -webkit-linear-gradient(to top, #07efef, #0A1C1C);
  background: linear-gradient(to top, #07efef, #0A1C1C);
}

Prevent Index Galleries From Pausing on Hover

By default, Squarespace’s index slideshow galleries pause when you hover over them. The problem with this is that if you have a gallery that is 50–100% vertical height, you cursor is always hovering over the gallery which means it never advances the the next slide. Paste the following code into your Custom CSS panel to cancel pointer events except for gallery controls and links:

.Index-gallery {
   pointer-events:none;
 }
.Index-gallery a, .Index-gallery-control, .Index-gallery-indicators {
   pointer-events:auto;
 }

Invert Your Logo on Different Pages

Sometimes you need to have a black logo, sometimes you need a white logo.

When you have a banner image that doesn’t provide sufficient contrast to make your logo visible, you can use the following code in a page’s header code injection area to invert the colour of the logo you’ve uploaded:

<style>
.Header-branding-logo {
    filter: invert(100%);
}
</style>

NOTE: .Header-branding-logo” may differ based on the template you use. This code works in the Brine family of temples. Leave a comment below if you need help with customizing your logo.

If you're looking to customize your Squarespace website even more, check out the code shop for unique modifications that are sure to set you apart from your competition!

Browse the Code Shop ➔