Slideshow Banner - How to customize arrows?

Im using the headlines new slideshow banner and I would like to change the arrows.

1. Remove gray background

2. Make the arrow black.

2.

https://omriharmelin.squarespace.com/new-page

password: OMRI

Thanks!

I think you can change this in Site Styles? If not, add this to Design > Custom CSS

/* Slideshow banner arrows */
.user-items-list-banner-slideshow .user-items-list-banner-slideshow__arrow-icon-background {
    background-color: transparent;
}
svg.user-items-list-banner-slideshow__arrow-icon path {
    stroke: black !important;
}

Thank you! @tuanphanI have 2 more questions if you have time I would appreciate guidance

1. When viewing mobile, the slidewshow gets cropped and arrows are hard to see, how can I fix this?

2. is it possible to add a video to the slideshow?

Thanks!

On 7/23/2021 at 8:28 PM, dchavez said:

Thank you! @tuanphanI have 2 more questions if you have time I would appreciate guidance

1. When viewing mobile, the slidewshow gets cropped and arrows are hard to see, how can I fix this?

2. is it possible to add a video to the slideshow?

 

Thanks!

Hi. The url doesn't exist. Can you check it again?

sorry here it it

https://omriharmelin.squarespace.com/tango-2

password: OMRI

@tuanphan

On 7/25/2021 at 8:06 PM, dchavez said:

sorry here it it

https://omriharmelin.squarespace.com/tango-2

password: OMRI

@tuanphan

Add this to Design > Custom CSS to increase slideshow arrows size on mobile

/* slideshow arrows mobile */
@media screen and (max-width:767px) {
.user-items-list-banner-slideshow .mobile-arrow-icon {
    width: 50px;
    height: 50px;
}
}

5 hours ago, tuanphan said:

/* slideshow arrows mobile */
@media screen and (max-width:767px) {
.user-items-list-banner-slideshow .mobile-arrow-icon {
    width: 50px;
    height: 50px;
}
}

@tuanphanHi, I was asking to resize the images for the slideshow, the arrow are fine.

The slideshow images on mobile look really long and cropped, I want them to not be cropped and show the entire image. Thanks!

I see it looks fine here

13 hours ago, tuanphan said:

I see it looks fine here

@tuanphan yeah I found a way to do it thanks, do you know how to add video to this slideshow (not as a background) but as a slide like the images. thanks

19 hours ago, dchavez said:

@tuanphan yeah I found a way to do it thanks, do you know how to add video to this slideshow (not as a background) but as a slide like the images. thanks

HI. I have no way to add video. You can post on some FB groups

Squarespace Community

Squarespace Customization Resource Group

@tuanphan

Are you able to please advise how I would remove the background and tail line from the arrows on list sections?

I was trying to do something along the lines of the below...

.user-items-list-banner-slideshow__arrow-icon-path path{d:path ('M9,90649 16,96L2.1221 9,17556L9,9065 1,39116');
    color: black !important;
      stroke: black !important;
}

The page I'm referring to is: https://themplgroup.co.uk/projects

Many thanks in advance.

On 9/6/2021 at 8:57 PM, rocketbase said:

@tuanphan

Are you able to please advise how I would remove the background and tail line from the arrows on list sections?

I was trying to do something along the lines of the below...

.user-items-list-banner-slideshow__arrow-icon-path path{d:path ('M9,90649 16,96L2.1221 9,17556L9,9065 1,39116');
    color: black !important;
      stroke: black !important;
}

The page I'm referring to is: https://themplgroup.co.uk/projects

 

Many thanks in advance.

Add to Design > Custom CSS

body#collection-610958b8e368c34075a048e5 .user-items-list-banner-slideshow__arrow-icon-background.user-items-list-banner-slideshow__arrow-icon-background-area {
    background-color: transparent !important;
}