How to customize gallery captions in Squarespace 7.1

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes

In this tutorial, you’ll learn how to customize the captions displayed for an image gallery in Squarespace 7.1

What we are going to do is use custom code to give it a solid color background, create multiple lines of text, and then use a little more code to change the text styles and alignment.

Before you watch the tutorial and use the code below, here are a few important things to know:

✨This is specifically for version 7.1 and wont work for older sites built on version 7.

🔎 You can isolate an individual gallery section using its data section ID. Here is a link to a tutorial on how to target specific things in Squarespace with unique ids.

You can apply this to a single page using page header code injection or an on page code block. Check out the tutorial on this page to learn how: insidethesquare.co/singlepage

Below is the code from the tutorial. To install it site wide, navigate to Design and then select Custom CSS at the bottom.

Paste this code inside the white box there on the right hand side. If you already have code there, just hit enter to add a new line and paste it there.

Here are the codes:

This code will add a background color to the gallery caption:

.gallery-caption {background:#fff}

This code will create separate lines of text when you use a soft return (shift/enter):

.gallery-caption p {white-space:pre}

This code will center the text:

.gallery-caption p {text-align:center}

This code will change the font style of the first line of text in the description; I would recommend only using this code if you have multiple lines separated by the soft return (shift/enter). Change up the color, font size, font weight, and any other typography code change you want to make!

.gallery-caption p:first-line {color: blue; font-size: 1rem; font-weight:bold}

You can combine all the codes above into three lines to create the look from the tutorial:

.gallery-caption {background:#fff}
.gallery-caption p {white-space:pre; text-align:center}
.gallery-caption p:first-line {color: blue; font-size: 1rem; font-weight:bold}