You've successfully subscribed to Dandy Cat Design.
Great! Next, complete checkout for full access to Dandy Cat Design.
Welcome back! You've successfully signed in.
Success! Your account is fully activated. You now have access to all content.
Success! Your billing info is updated.
Billing info update failed.

Quick Tip: Adding a Background Color to Squarespace Gallery Blocks

For gallery blocks, I want to steal a line from a David Bowie song: Oh! you pretty things

Sean Anderson
Sean Anderson

For gallery blocks, I want to steal a line from a David Bowie song:

Oh! you pretty things

It's undeniable, the Squarespace Gallery Blocks are probably the nicest way to display your prized images on your website. They're so easy to use, too!

Just upload a collection of images you want to show off to your adoring audience, tweak some of the options in the Design tab of the Gallery Block editor window, and POW! You've now got something special going on.

Doing just those few steps will get you pretty far. In fact, you could stop there and do just fine.

But what if we want to jazz them up a little bit more?

We're going to take an approach here that'll apply a background color to all of our Gallery Blocks. If this is an effect that you'd prefer to apply to a single block, then you'll need to find the block's id number, by using the Inspect Element function in your browser.

Before we get to the code, make sure you know what color you're going to add to the background of your Gallery Blocks. I always love going to the W3 Schools' HTML Color Picker. There you can not just find your preferred color, it'll also give you whatever color code format you want to use. I'll be using hex codes in this example.

The code we'll be using is about as dead simple as it can get. First, navigate to Design->Custom CSS. We're targeting Gallery Blocks so we'll be using:

.sqs-block-gallery {

}

That's about it, actually. All that's left is adding in our color code:

.sqs-block-gallery {
  background-color: #e6e8ff;
}

See what I mean when I say it's dead simple? In fact, I'm going to upgrade it to "drop dead simple."

After adding in that code, you'll immediately notice that your Gallery Blocks have new color bordering the images. You may also notice that the color expands to include the thumbnails in the Slideshow Block and any captions that may be included with your images.

A screenshot of a Squarespace Image Gallery with four separate images of the Earth

I did notice a bit of weirdness happening in the Grid Gallery layout after trying out this code. Even with the "Show Title" option switched off, there was still some extra color on the bottom of the block that I didn't want. This is happening because of the spacing that’s used between the images to make the grid appearance. It kind of ruined the symmetrical look I was going for.

You could always decrease the padding around the images in the Design tab of those Gallery Blocks. However, if you wanted to keep that padding then you'll need to find the id number for any grid galleries you may have and toss in this extra CSS code. It'll look something like this:

#block-yui-4_19_2_1_1234567891234_9876 {
  padding-bottom: 0;
}
A screenshot of a Squarespace Image Gallery with a background color applied

All you'll need to do is swap in your block's id number and that extra color on the bottom will be no more.


Sometimes the most interesting effects are the most simple to implement. Those tend to be my favorite. I do enjoy puzzling out a more complex CSS problem now and again, but these simple ones are real time-savers.

Even better, they're accessible by just about everyone. You don't need to know anything crazy complicated to add a nice background color to your website's Gallery Blocks. In fact, now all you've got to do is copy and paste three simple lines into you CSS editor.

How easy is that?

Add some color, cats.

On Pinterest? Be sure to pin these images.

Website

Sean Anderson

Lover of productivity tips, Apple devices, and vegan ice cream. Mostly, I'm busy petting cats 🐱 and dogs 🐶


Dandy Cast

Subscribe to my weekly podcast in your favorite podcast player.

Apple Podcasts icon

Apple Podcasts

Castro icon

Castro

Overcast icon

Overcast

Pocket Casts icon

Pocket Casts

Spotify icon

Spotify

Google Podcasts icon

Google Podcasts


Listen to the latest episode...