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
—
In this tutorial you’ll learn how to customize the arrows for carousel and banner list sections. To be super duper crystal clear – if all you want to change is the color, use your site style menu! You don’t need code for that; simply navigate to design → site styles → color → pick the color theme you are using for that list section and change the arrow color and background color.
But if you want to change the shape, size of the arrow, or give it a fancy gradient background, this is the tutorial for you!
The codes from this tutorial are listed below BUT there are some important things you’ll want to change so be sure to watch the training so you know exactly which ones you want to use to make your Squarespace site look awesome!
//– square shape for a carousel list section
.user-items-list-carousel__arrow-button {border-radius: 0px}
//– rounded edges for a carousel list section
.user-items-list-carousel__arrow-button {border-radius: 5%}
//–gradient background for a carousel list section
.user-items-list-carousel__arrow-icon-background-area {background: linear-gradient(45deg, #000, pink); opacity:1!important}
//–thicker arrow for a carousel list section
.user-items-list-carousel__arrow-icon-path {stroke-width: 5px}
Using a banner slideshow instead? Swap out the word “carousel” with the words “banner-slideshow”!
//– square shape for banner slideshow
.user-items-list-banner-slideshow__arrow-button {border-radius: 0px}
//– rounded edges for banner slideshow
.user-items-list-banner-slideshow__arrow-button {border-radius: 5%}
//–gradient background for banner slideshow
.user-items-list-banner-slideshow__arrow-icon-background-area {background: linear-gradient(45deg, #000, pink); opacity:1!important}
//–thicker arrow for banner slideshow
.user-items-list-banner-slideshow__arrow-icon-path {stroke-width: 5px}
🔗 To learn more about this new type of page section, check out my free training at https://insidethesquare.co/list
—
🥳 Ready to give Squarespace a try? Use the code PARTNER10 for 10% off your first year (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 #squarespacehacks #designsquarespace #squarespacetip #howtousesquarespace #squarespacetutorial
