Change Arrow of Slideshow Simple with custom code

Hello everyone,

I just launched my website which included several galleries, for which I picked the Slideshow: Simple Gallery Type.

Everything works fine, except the arrows for navigating through my slideshow are not very visible. People experience trouble finding the navigation arrows since they are very small and this Gallery Type does not offer any other arrow style options.

My site's background is black, so I would preferably create arrows that are either more bold or are surrounded by a white/black small block so it stands out against my black background.

I would very much appreciate any suggestions!

7 minutes ago, HINAWES said:

Hello everyone,

I just launched my website which included several galleries, for which I picked the Slideshow: Simple Gallery Type.

Everything works fine, except the arrows for navigating through my slideshow are not very visible. People experience trouble finding the navigation arrows since they are very small and this Gallery Type does not offer any other arrow style options.

My site's background is black, so I would preferably create arrows that are either more bold or are surrounded by a white/black small block so it stands out against my black background.

I would very much appreciate any suggestions!

Can you share your site with the protected password so I can take a look?

My website is already public! It's link is www.hinabaay.com

I can not see the gallery slideshow. Can you share the direct link to that page?

Definitely! https://www.hinabaay.com/portfolio

Here you can see I have different projects through which you can navigate! All are gallery slideshows.

7 minutes ago, HINAWES said:

Definitely! https://www.hinabaay.com/portfolio

Here you can see I have different projects through which you can navigate! All are gallery slideshows.

Is it fine with you?

Try adding to Home > Design > Custom css

.gallery-slideshow-control-btn {
  background: #999;
}

.gallery-slideshow-control-btn svg {
  stroke-width: 4px;
}

Support me by pressing 👍  or marking as solution if this useful for you

That already looks a lot better! Would it also be an option to make the arrows either bigger/bold?

I already have a piece of code in my Custom css, would it be a problem to insert this other piece of code in there as well?

Perfect, thank you so much!

Can I just insert it above or beneath my other code or do I need to be careful?

You can add my code at the bottom in Home > Desgin > Custom Css (i mean beneath your code)

Thanks once again! I will go try it out now. 

Hi there, I tried using this same code for a slideshow on my website and nothing is changing. I've used similar code on  other sites before and worked fine. Would anyone be able to help?

Thanks!

site:  https://bobcat-purple-8ttl.squarespace.com/

password: eventful2023

On 4/3/2023 at 4:07 PM, ruralstudio said:

Hi there, I tried using this same code for a slideshow on my website and nothing is changing. I've used similar code on  other sites before and worked fine. Would anyone be able to help?

Thanks!

site:  https://bobcat-purple-8ttl.squarespace.com/

password: eventful2023

Which page are you referring to? I Don't see slideshow on homepage

Sorry, the pages below:

https://bobcat-purple-8ttl.squarespace.com/civic-house

https://bobcat-purple-8ttl.squarespace.com/civic-house-2

On 4/6/2023 at 8:42 PM, ruralstudio said:

Sorry, the pages below:

 

https://bobcat-purple-8ttl.squarespace.com/civic-house

https://bobcat-purple-8ttl.squarespace.com/civic-house-2

Above code for Gallery Section. But you are using Gallery Block, so need this code

/* Gallery Block arrows */
.sqs-gallery-controls .next:before, .sqs-gallery-controls .previous:before {
    font-size: 50px;
    width: 50px;
    height: 50px;
    line-height: 50px;
}

On 4/8/2023 at 10:04 AM, tuanphan said:

Above code for Gallery Section. But you are using Gallery Block, so need this code

/* Gallery Block arrows */
.sqs-gallery-controls .next:before, .sqs-gallery-controls .previous:before {
    font-size: 50px;
    width: 50px;
    height: 50px;
    line-height: 50px;
}

 

Thank you @tuanphan! This worked, but I wondered how I can make the line/stroke width thicker/bolder too?

Thanks

On 4/6/2023 at 8:42 PM, ruralstudio said:

Sorry, the pages below:

 

https://bobcat-purple-8ttl.squarespace.com/civic-house

https://bobcat-purple-8ttl.squarespace.com/civic-house-2

Can you enable Arrows? I don't see any gallery block arrows now

Hi Tuanphan,

I've actually just had a request from client to change the arrows to images of sideways facing hearts instead...

And ideally display these on either side of the gallery block, instead of on top of the images.

Do you have any advice for this please? Appreciate all your help so far!

Images attached incase useful, but I know I'll need to upload these to the site custom files.

Add to Design > Custom CSS

/* Summary block custom arrows */
div#block-bbd3a0f973f22d6103a8 {
.sqs-gallery-controls .next, .sqs-gallery-controls .previous {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2023_04/heart-arrow-left.png.dc3b32b710c169a07350cba2c41abf04.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent !important;
}
.sqs-gallery-controls .previous {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2023_04/heart-icon-right.png.b1403153d4b4a22c29b1cc99f821210a.png) !important;
}
.sqs-gallery-controls .next:before, .sqs-gallery-controls .previous:before {
    visibility: hidden;
}
}

8 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Summary block custom arrows */
div#block-bbd3a0f973f22d6103a8 {
.sqs-gallery-controls .next, .sqs-gallery-controls .previous {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2023_04/heart-arrow-left.png.dc3b32b710c169a07350cba2c41abf04.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent !important;
}
.sqs-gallery-controls .previous {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2023_04/heart-icon-right.png.b1403153d4b4a22c29b1cc99f821210a.png) !important;
}
.sqs-gallery-controls .next:before, .sqs-gallery-controls .previous:before {
    visibility: hidden;
}
}

Hi, thank you but sadly this hasn't seemed to work. I removed the previous piece of code - but maybe I'm missing something?

On 5/1/2023 at 9:51 AM, ruralstudio said:

Hi, thank you but sadly this hasn't seemed to work. I removed the previous piece of code - but maybe I'm missing something?

On 5/1/2023 at 1:30 AM, tuanphan said:

Add to Design > Custom CSS

/* Summary block custom arrows */
div#block-bbd3a0f973f22d6103a8 {
.sqs-gallery-controls .next, .sqs-gallery-controls .previous {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2023_04/heart-arrow-left.png.dc3b32b710c169a07350cba2c41abf04.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent !important;
}
.sqs-gallery-controls .previous {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2023_04/heart-icon-right.png.b1403153d4b4a22c29b1cc99f821210a.png) !important;
}
.sqs-gallery-controls .next:before, .sqs-gallery-controls .previous:before {
    visibility: hidden;
}
}

Hey Tuanphan, if you have any advice it'd be so appreciated 🙏 thanks

I see ID changed, you use this new code

/* Summary block custom arrows */
div#block-yui_3_17_2_1_1676639092386_54358 {
.sqs-gallery-controls .next, .sqs-gallery-controls .previous {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2023_04/heart-arrow-left.png.dc3b32b710c169a07350cba2c41abf04.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent !important;
}
.sqs-gallery-controls .previous {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2023_04/heart-icon-right.png.b1403153d4b4a22c29b1cc99f821210a.png) !important;
}
.sqs-gallery-controls .next:before, .sqs-gallery-controls .previous:before {
    visibility: hidden;
}
}

On 1/19/2023 at 7:10 PM, Beyondspace said:

Is it fine with you?

Try adding to Home > Design > Custom css

.gallery-slideshow-control-btn {
  background: #999;
}

.gallery-slideshow-control-btn svg {
  stroke-width: 4px;
}

 

Hey first off beautiful website. Secondly, I need help with adding these slider arrows that are custom. I have my section ready I just need to add arrows FROM OUTSIDE. need help with adding code to existing section. Please help

On 7/17/2023 at 6:42 PM, apraaaa said:

Hey first off beautiful website. Secondly, I need help with adding these slider arrows that are custom. I have my section ready I just need to add arrows FROM OUTSIDE. need help with adding code to existing section. Please help

What is page url? We can check easier

On 2/5/2024 at 10:55 PM, help_simon said:

Hey,

 

hope everyone is well. Would anyone be able to help me with custom code that would change the position of the arrows for the slideshow simple, so they no longer site either side of the image, but instead are position on the left of the page. Is it also possible to change the position of the image name to sit underneath the arrows also.

 

I have attached a screenshot of my page in question and an example or one that I would like to use as a reference.

 

Thanks

What is page url? We can check easier