Squarespace list sections are a great way to showcase content, but the default arrows might not always match your website's unique vibe. You can change the color using the design settings in Squarespace, and you can do even more with custom CSS!
This tutorial will teach you how to use custom CSS to change the arrow background shape, and arrow icon thickness and how to replace them with your own image.
You'll find timestamps to jump ahead and the custom codes below.
01:19 How to changing the background shape to a square by removing the border radius on desktop and mobile
/* carousel square */
.user-items-list-carousel__arrow-button{
border-radius:0!important
}
.user-items-list-carousel .mobile-arrow-icon-background-area{
border-radius:0!important
}
.user-items-list-carousel .mobile-arrow-button{
overflow:visible!important
}
/* banner square */
.user-items-list-banner-slideshow__arrow-button{
border-radius:0!important
}
.user-items-list-banner-slideshow .mobile-arrow-icon-background-area{
border-radius:0!important
}
.user-items-list-banner-slideshow .mobile-arrow-button{
overflow:visible!important
}
02:45 how to make a list section arrow icon thicker on desktop and mobile
/* arrow width & edge - banner*/
.user-items-list-banner-slideshow__arrow-icon-path{
stroke-width:5px;
stroke-linecap:square;
}
/* arrow width & edge - carousel*/
.user-items-list-carousel__arrow-icon-path{
stroke-width:5px;
stroke-linecap:square;
}
03:11 How to replace the arrow icons with your own image
/* custom arrow - one image flipped - carousel */
.user-items-list-carousel__arrow-icon-foreground, .user-items-list-carousel .mobile-arrow-icon-background-area{
opacity:0;
}
.user-items-list-carousel__arrow-icon-background, .user-items-list-carousel .mobile-arrow-button{
background-image:url(image-url-here)!important;
background-size: cover;
background-color:transparent!important
}
.user-items-list-carousel__arrow-button--right .user-items-list-carousel__arrow-icon-background, .user-items-list-carousel .mobile-arrow-button--right{
transform:scaleX(-1)!important
}
/* custom arrow - one image flipped - banner */
.user-items-list-banner-slideshow__arrow-icon-foreground, .user-items-list-banner-slideshow .mobile-arrow-icon-background-area{
opacity:0;
}
.user-items-list-banner-slideshow__arrow-icon-background, .user-items-list-banner-slideshow .mobile-arrow-button{
background-image:url(image-url-here);
background-size: cover;
background-color:transparent!important
}
.user-items-list-banner-slideshow__arrow-button--right .user-items-list-banner-slideshow__arrow-icon-background, .user-items-list-banner-slideshow .mobile-arrow-button--right{
transform:scaleX(-1)!important
}
Additional code: how to use a custom image for the left AND the right arrow:
/* custom arrow - both sides - carousel */
.user-items-list-carousel__arrow-icon-foreground, .user-items-list-carousel .mobile-arrow-icon-background-area{
opacity:0;
}
.user-items-list-carousel__arrow-button--left .user-items-list-carousel__arrow-icon-background, .user-items-list-carousel .mobile-arrow-button--left{
background-image:url(image-url-here)!important;
background-size: cover;
}
.user-items-list-carousel__arrow-button--right .user-items-list-carousel__arrow-icon-background, .user-items-list-carousel .mobile-arrow-button--right{
background-image:url(image-url-here)!important;
background-size: cover;
}
/* custom arrow - both sides -banner */
.user-items-list-banner-slideshow__arrow-icon-foreground, .user-items-list-banner-slideshow .mobile-arrow-icon-background-area{
opacity:0;
}
.user-items-list-banner-slideshow__arrow-button--left .user-items-list-banner-slideshow__arrow-icon-background, .user-items-list-banner-slideshow .mobile-arrow-button--left{
background-image:url(image-url-here);
background-size: cover;
}
.user-items-list-banner-slideshow__arrow-button--right .user-items-list-banner-slideshow__arrow-icon-background, .user-items-list-banner-slideshow .mobile-arrow-button--right{
background-image:url(image-url-here)!important;
background-size: cover;
}
- - -
Related Content:
🖼️ What is a list section: • Squarespace List Secti...
🆓 Learn CSS for FREE: insidethesquare.co/learn
☕️ If you found this free tutorial helpful, buy me a coffee to say thanks: buymeacoffee.com/insidethesquare
- - -
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥ #customization #arrowicons #listsection #design #tutorial #howto #graphics #webdesign #UI #UX #userinterface #userexperience #squarespacelistsection #squarespacecss #squarespacedesign #creative #customize #icondesign #customizesquarespace #webdevelopment #CSS
29 апр 2024
