In this tutorial, I will show you how to change the color of your image gallery navigation arrows in Squarespace 7.1

We are going to change the color of the arrows, the background, and there are also codes below that you can use to edit just the left or just the right side individually.

The codes we are using are below, but be sure to watch the whole tutorial so you understand how to use them!

Here are the codes

Slideshow: Simple

Change the color of both:

.gallery-slideshow-control-btn svg {stroke:red}

Change the background color behind both arrows:

.gallery-slideshow-control-btn::before {background-color:yellow}

Change just the left/back arrow, add this text before your code:

.gallery-slideshow-control-prev

Change just the right/forward arrow, add this text before your code:

.gallery-slideshow-control-next

Slideshow: Full

Change the color of both:

.gallery-fullscreen-slideshow-control-btn svg {stroke:red}

Change the background color behind both arrows:

.gallery-fullscreen-slideshow-control-btn::before {background-color:yellow}

Change the color of just the left side:

Svg.caret-left-icon--small{stroke:red}

Change the color of just the right side:

Svg.caret-right-icon--small{stroke:red}

Slideshow: Reel

Change the color of both:

.gallery-reel-control-btn {color:red}

Change the background color behind the arrow:

.gallery-reel-control-btn::before{background-color:yellow}

Change just the left/back arrow, add this text before your code:

[aria-label="Previous Slide"]

Change just the right/forward arrow, add this text before your code:

[aria-label="Next Slide"]