Changing Testimonial Carousel Arrows to Custom Image

Site URL: https://triceratops-snail-f7rs.squarespace.com/

Hi!

I'm trying to change the arrows on my testimonial carousel to a png image. I'll attach images of the arrows I want to use! Currently using Fluid Engine editor. Help! 🙂

Password for my website is letmein

For Our Collaborators section?

Yes!  The Our Collaborators section, exactly.

21 hours ago, zoearseneau said:

Yes!  The Our Collaborators section, exactly.

Add to Design > Custom CSS

[data-section-id="6319f7397da90e75b6aef53c"] {
svg.user-items-list-carousel__arrow-icon {
    display: none !important;
}
.user-items-list-carousel__arrow-icon-background.user-items-list-carousel__arrow-icon-background-area {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/1773097810_Group12@2x.png.fd2d6dc749f79343ae687e29649cea4f.png);
    background-size: contain;
    background-repeat:no-repeat;
    background-position: center center;
}
button[class*="--right"] .user-items-list-carousel__arrow-icon-background.user-items-list-carousel__arrow-icon-background-area {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/1753379866_Group13@2x.png.54c2b0e59adbe1a1f31f46b8b628398d.png);
}}

On 9/10/2022 at 9:00 AM, tuanphan said:

Add to Design > Custom CSS

[data-section-id="6319f7397da90e75b6aef53c"] {
svg.user-items-list-carousel__arrow-icon {
    display: none !important;
}
.user-items-list-carousel__arrow-icon-background.user-items-list-carousel__arrow-icon-background-area {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/1773097810_Group12@2x.png.fd2d6dc749f79343ae687e29649cea4f.png);
    background-size: contain;
    background-repeat:no-repeat;
    background-position: center center;
}
button[class*="--right"] .user-items-list-carousel__arrow-icon-background.user-items-list-carousel__arrow-icon-background-area {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/1753379866_Group13@2x.png.54c2b0e59adbe1a1f31f46b8b628398d.png);
}}

Awesome, thanks so much! Is there a way to remove the white circle behind it?

On 9/16/2022 at 12:04 AM, zoearseneau said:

Awesome, thanks so much! Is there a way to remove the white circle behind it?

Add this CSS

.user-items-list-carousel__arrow-icon-background.user-items-list-carousel__arrow-icon-background-area {
    background-color: transparent !important;
}

Don't suppose there is a way to make this code work on all carousel lists across my site is there (rather than using section IDs)? Is there also a way for it to work on mobile too?! @tuanphan

I currently have it working on the home page > portfolio section (using the section ID code from above)

https://olio-create.squarespace.com/?password=olio123!

Thanks in advance 🙂

On 9/10/2022 at 7:00 PM, tuanphan said:

Add to Design > Custom CSS

[data-section-id="6319f7397da90e75b6aef53c"] {
svg.user-items-list-carousel__arrow-icon {
    display: none !important;
}
.user-items-list-carousel__arrow-icon-background.user-items-list-carousel__arrow-icon-background-area {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/1773097810_Group12@2x.png.fd2d6dc749f79343ae687e29649cea4f.png);
    background-size: contain;
    background-repeat:no-repeat;
    background-position: center center;
}
button[class*="--right"] .user-items-list-carousel__arrow-icon-background.user-items-list-carousel__arrow-icon-background-area {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/1753379866_Group13@2x.png.54c2b0e59adbe1a1f31f46b8b628398d.png);
}}

@oliocreative you can remove ID, and use this code to apply all

svg.user-items-list-carousel__arrow-icon {
    display: none !important;
}
.user-items-list-carousel__arrow-icon-background.user-items-list-carousel__arrow-icon-background-area {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/1773097810_Group12@2x.png.fd2d6dc749f79343ae687e29649cea4f.png);
    background-size: contain;
    background-repeat:no-repeat;
    background-position: center center;
}
button[class*="--right"] .user-items-list-carousel__arrow-icon-background.user-items-list-carousel__arrow-icon-background-area {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/1753379866_Group13@2x.png.54c2b0e59adbe1a1f31f46b8b628398d.png);
}
@media screen and (max-width:767px) {
button[class*="arrow-button"] svg {
    display: none !important;
}
button[class*="arrow-button--left"] .user-items-list-carousel__arrow-icon-background {
 background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/1773097810_Group12@2x.png.fd2d6dc749f79343ae687e29649cea4f.png);
    background-size: contain;
    background-repeat:no-repeat;
    background-position: center center;
}
button[class*="arrow-button--right"] .user-items-list-carousel__arrow-icon-background {
     background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/1753379866_Group13@2x.png.54c2b0e59adbe1a1f31f46b8b628398d.png);
     background-size: contain;
    background-repeat:no-repeat;
    background-position: center center;
}
}

On 12/11/2023 at 12:46 AM, tuanphan said:

@oliocreative you can remove ID, and use this code to apply all

svg.user-items-list-carousel__arrow-icon {
    display: none !important;
}
.user-items-list-carousel__arrow-icon-background.user-items-list-carousel__arrow-icon-background-area {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/1773097810_Group12@2x.png.fd2d6dc749f79343ae687e29649cea4f.png);
    background-size: contain;
    background-repeat:no-repeat;
    background-position: center center;
}
button[class*="--right"] .user-items-list-carousel__arrow-icon-background.user-items-list-carousel__arrow-icon-background-area {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/1753379866_Group13@2x.png.54c2b0e59adbe1a1f31f46b8b628398d.png);
}
@media screen and (max-width:767px) {
button[class*="arrow-button"] svg {
    display: none !important;
}
button[class*="arrow-button--left"] .user-items-list-carousel__arrow-icon-background {
 background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/1773097810_Group12@2x.png.fd2d6dc749f79343ae687e29649cea4f.png);
    background-size: contain;
    background-repeat:no-repeat;
    background-position: center center;
}
button[class*="arrow-button--right"] .user-items-list-carousel__arrow-icon-background {
     background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/1753379866_Group13@2x.png.54c2b0e59adbe1a1f31f46b8b628398d.png);
     background-size: contain;
    background-repeat:no-repeat;
    background-position: center center;
}
}

 

Thank you SO MUCH @tuanphan! Once again you've saved the day 🙂 Honestly thank you so much! Can't tell you how many times I've used CSS from your posts!