How to customize the colors of a Squarespace image lightbox

Apr 25

This tutorial was recorded in Squarespace 7.1 and will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes

In this tutorial, you’ll learn how to customize the colors for the image lightbox in Squarespace. We're going to use custom code to change the colors of the background and the close button so you can make it uniquely yours. ✨

To be super duper clear - this is for the lightbox that opens when you enable this option on a gallery section in Squarespace version 7.1 or an image block. The codes in this tutorial won’t work for a product lightbox, a lightbox form, or any lightbox in version 7

The codes for this tutorial are below, but make sure you watch the tutorial to understand how to use them and what parts of them you’ll want to change to make them uniquely yours.

/* Change the close button - image block */
.yui3-lightbox2 .sqs-lightbox-close{
color: #333
}
/* Change the background color - image block */
.yui3-lightbox2 .sqs-lightbox-slideshow{
background-color: blue
}
/* Change the background color - gallery*/
.gallery-lightbox-background{
    background: #50bdb8;
  opacity:1
}
/* Change the close button color - gallery */
.gallery-lightbox-close-btn-icon *
{color: yellow!important
}
/* Change the prev/next controls - gallery */
.gallery-lightbox-control-btn-icon *{
    color: orange;
}

Using the codes above to make your Squarespace image lightbox uniquely yours is just one of the many ways code can be a special sprinkle of magic to your website.

It's a fun and creative way to make your images truly shine and show off your unique style. With just a few simple steps, you can create a lightbox that's tailor-made just for you.

I hope you loved this tutorial and, most importantly, have fun with your Squarespace website!