Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Slideshow Banner - How to customize arrows?


dchavez

Question

  • Answers 11
  • Created
  • Last Reply

Top Posters For This Question

11 answers to this question

Recommended Posts

  • 0

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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!

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
On 7/25/2021 at 8:06 PM, dchavez said:

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
Posted (edited)
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!

Edited by dchavez
Link to comment
  • 0

I see it looks fine here

image.thumb.png.f379006fb2fcd2fa4c2d8ead19594e05.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

@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.

Edited by rocketbase
Link to comment
  • 0
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...