Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics – grab my free Getting Started Guide here 👉 https://insidethesquare.co/learn
—
🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10
—
💕 Love this free Square space tutorial? You can donate via Paypal to help support my YouTube Channel https://www.paypal.com/paypalme/insidethesquare
—
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. All of these changes are done with a little custom CSS magic and I will walk you through it step by super simple step in this video. The codes we are using are below, but be sure to watch the whole tutorial so you understand how to use them!
//–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”]
—
🤩 Ready for more codes? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you’re ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy 👉 https://InsideTheSquare.co/css
—
🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10
—
🙋 Need some help? Visit https://insidethesquare.co/code-help to see my current support options.
—
The term “Squarespace” is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform ♥
—
#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips
