How to change the color of gallery arrows in Squarespace 7

CUSTOM CSSVERSION 7
Written By insidethesquare

This tutorial is for the BRINE/BEDFORD theme of Squarespace, built with an older version. For more information, visit https://insidethesquare.co/themes

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

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:

Change the arrow color

.sqs-gallery-controls .previous, .sqs-gallery-controls .next{color:red!important}

Change the background color

.sqs-gallery-controls .previous:before, .sqs-gallery-controls .next:before{background-color:blue!important}

Change just the left arrow

.sqs-gallery-controls .previous{color:red!important}

Change just the right arrow

.sqs-gallery-controls .next{color:red!important}

Change just the left arrow background

.sqs-gallery-controls .previous:before{ background-color:blue!important}

Change just the right arrow background

.sqs-gallery-controls .next:before{ background-color:blue!important}

insidethesquare


Grab my collection of custom codes for Squarespace: 
→ insidethesquare.co/css

Learn CSS for Squarespace in my free class:
→ insidethesquare.co/learn

https://insidethesquare.co
Previous

How to create filter hover effects for image galleries in Squarespace 7
Next

How to change the color of gallery arrows in Squarespace 7.1