How to change the color of gallery arrows in Squarespace 7.1

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!

A quick heads up: Squarespace changes their program navigation all the time. Use the forward slash key to open the program search so you can find your CSS pannel, becuse it's probably different than the video. 😅 While step one might be outdated, the codes will work in any version: 7.0 and 7.1

Custom Codes for Slideshow: Simple Arrows

Change the color of both:

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

Change the background color behind both arrows:

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

Change the colors on just the left / previous arrow:

.gallery-slideshow-control-prev {
stroke: red!important;
background-color: yellow!important
}

.gallery-slideshow-control-next {
stroke: red!important;
background-color: yellow!important
}

Change the colors on just the right/forward arrow:

Custom Codes for Slideshow: Full Arrows

Change the color of both:

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

Change the background color behind both arrows:

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

Change the color of just the left side:

.gallery-fullscreen-slideshow-control-btn svg.caret-left-icon--small{
stroke:red!important
}

Change the color of just the right side:

.gallery-fullscreen-slideshow-control-btn svg.caret-right-icon--small{
stroke:red!important
}

Custom Codes for Slideshow: Reel Arrows

Change the color of both:

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

Change the background color behind the arrow:

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

Change the colors on just the left/previous arrow:

.gallery-reel-control-btn [aria-label="Previous Slide"] {
color: red!important;
backround-color: yellow!important
}

Change the colors on just the right/forward arrow:

.gallery-reel-control-btn [aria-label="Next Slide"] {
color: red!important;
backround-color: yellow!important
}