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

Increasing the size of gallery arrows


Amelia__
Go to solution Solved by tuanphan,

Question

Site URL: https://clementine-sunflower-4f33.squarespace.com/

Hello Squarespace Forum!

I would really appreciate if someone could please help me make the arrows on my slideshow gallery bigger. At the moment they are quite small and not very obvious.

I've tried the CSS from a couple of blogs that I have read but it doesn't seem to make any difference.

I'm not sure if this CSS that I have used for the descriptions on the gallery are interfering with the code? I used the CSS from this article and put the Javascript into a Markdown block in the footer: 

The site is using version 7.1.

Thanks!

Amelia
 

 

Screen Shot 2020-05-20 at 4.17.01 PM.png

Link to post
  • Answers 23
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Add to Home > Design > Custom CSS .gallery-fullscreen-slideshow-control-btn-icon svg { width: 20px !important; height: 20px !important; }  

https://oleander-pomegranate-ka8f.squarespace.com/?p password: temporarystag Does that do the trick? M  

Add the following to Page Settings > Advanced > Page Header Code Injection for the page. <style> @media only screen and ( min-width: 641px ) { #block-yui_3_17_2_1_16048954776

Posted Images

23 answers to this question

Recommended Posts

  • 0

Hi there. I'm trying solve this same problem for a SS 7.0 site, and it doesn't look like the above code will work. And honestly, I'd love to move the arrows off of the images at the ends, so they sit on the side.

Any suggestions for me?

Much appreciated,
Michael

 

Link to post
  • 0
6 hours ago, MichaelG_2001 said:

Hi there. I'm trying solve this same problem for a SS 7.0 site, and it doesn't look like the above code will work. And honestly, I'd love to move the arrows off of the images at the ends, so they sit on the side.

Any suggestions for me?

Much appreciated,
Michael

 

Can you share link to gallery? We can check easier

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0

It's not live at the moment, but I'm hoping this image should give you an idea of what I'm dealing with. I tweaked the arrow styles but otherwise it's just a basic 7.0 gallery carousel using transparent PNGs on banner background image.


 

productCarousel.png

Edited by MichaelG_2001
Link to post
  • 0
5 hours ago, MichaelG_2001 said:

It's not live at the moment

Please set up a site-wide password. Post the password here.

We can then take a look at your issue.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0
On 11/9/2020 at 3:00 PM, MichaelG_2001 said:

Moving the arrows off of the images is more important to me

Add the following to Page Settings > Advanced > Page Header Code Injection for the page.

<style>

  @media only screen and ( min-width: 641px ) {
  
    #block-yui_3_17_2_1_1604895477696_23075 .sqs-gallery-controls .next {
    
      right: -60px;
      
      }
      
    #block-yui_3_17_2_1_1604895477696_23075 .sqs-gallery-controls .previous {
    
      left: -60px;
      
      }
    }
    
  </style>

After you put the code in you will notice that there is a little more padding between the left arrow and the first image than the last image and the right arrow. The issue is with the last image not being the same size as the other images.

Also the effect turns off when you get down to mobile screen sizes.

Let us know how it goes.

Edited by creedon

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0

Aha! That worked very well.

Currently, the blocks are the default state with the the thin arrows the over state.  Gonna have to figure out how to integrate the two custom codes. I'll see if I can sort it out.

Thanks!
M
 

Edited by MichaelG_2001
Link to post
  • 0

Hi again.

So, the code creedon supplied above really did the trick for moving the arrows off of the images at the right and left of the carousel. I'd like to figure out how make the bolder, but they basically work.

1421726984_ScreenShot2020-11-20at12_37_10AM.thumb.png.98fd67dd1aca89fbaac71e9967dd9bf5.png

However... I'm hoping to have the specific drink products in the carousel link through to their dedicated product pages, but as soon as I add in the click-thru URL in an Image Edit it causes havoc in the arrangement of the products in the carousel. Pleas see below.

30712541_ScreenShot2020-11-20at12_36_23AM.thumb.png.3bad8ab2c3a953ffb332068f79593cd7.png


I've spent over a week trying to solve this little puzzle. I've searched the forum, I've tried taking out targeted bits of code (creedon's code above and the code that creates the fisheye effect on rolloever, etc.) to make sure there's no conflict. I may have missed something, but no luck. I've also tried to find carousel plug-ins suitable for PNG products floating over a background and was kind of surprised to come up empty.

I'm honestly at the end of my rope on this and would be very grateful for any insight anybody might have on what may be causing the problem.

Thanks, as always,
Michael

 

Link to post
  • 0
On 11/20/2020 at 1:53 PM, MichaelG_2001 said:

Hi again.

So, the code creedon supplied above really did the trick for moving the arrows off of the images at the right and left of the carousel. I'd like to figure out how make the bolder, but they basically work.

1421726984_ScreenShot2020-11-20at12_37_10AM.thumb.png.98fd67dd1aca89fbaac71e9967dd9bf5.png

However... I'm hoping to have the specific drink products in the carousel link through to their dedicated product pages, but as soon as I add in the click-thru URL in an Image Edit it causes havoc in the arrangement of the products in the carousel. Pleas see below.

30712541_ScreenShot2020-11-20at12_36_23AM.thumb.png.3bad8ab2c3a953ffb332068f79593cd7.png


I've spent over a week trying to solve this little puzzle. I've searched the forum, I've tried taking out targeted bits of code (creedon's code above and the code that creates the fisheye effect on rolloever, etc.) to make sure there's no conflict. I may have missed something, but no luck. I've also tried to find carousel plug-ins suitable for PNG products floating over a background and was kind of surprised to come up empty.

I'm honestly at the end of my rope on this and would be very grateful for any insight anybody might have on what may be causing the problem.

Thanks, as always,
Michael

 

Do you still need help on this?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0

I tried to use the password you provided previously but it didn't work.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0

Yes, I still need help if you have a couple of minutes. And yes, I had to change the password. Apologies.
Password: temporaryrebel

Tuanphan has pointed out that the carousel looks fine in their browser. For me, it's broken in Firefox but does seem to look fine in Safari. I have absolutely no idea what could be creating that problem or how to solve it.

The second issue is that even when it works visually, I've noticed that it takes a few clicks to get the carousel moving in both browsers. Is this a common thing, or a result of the code we added moving the arrows to the sides of the carousel images?

I cannot thank you all enough for the help you've offered in the past.

M

 

Link to post
  • 0
On 11/19/2020 at 10:53 PM, MichaelG_2001 said:

I'd like to figure out how make the bolder, but they basically work.

Add the following to Page Settings > Advanced > Code Header Injection for the page.

<style>

  /* begin change size of gallery control arrows */
  
    .sqs-gallery-block-slider .sqs-gallery-controls .next:before,
    .sqs-gallery-block-slider .sqs-gallery-controls .previous:before
    
      {
      
        --controls-size: 32px;
        
        font-size: var( --controls-size );
        font-weight: 700;
        height: var( --controls-size );
        line-height: var( --controls-size );
        width: var( --controls-size );
        
        }
        
    /* end change size of gallery control arrows */
    
  </style>

Let us know how it goes.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0
22 hours ago, MichaelG_2001 said:

I've noticed that it takes a few clicks to get the carousel moving in both browsers. Is this a common thing, or a result of the code we added moving the arrows to the sides of the carousel images?

I'm pretty sure it's not the CSS I provided. I loaded your site, commented out all the custom code locally and it still exhibited the same sluggish behaviour. At the beginning it takes several clicks to get going and when it cycles around, again it takes multiple clicks. It's flawless once it gets going.

Did you add any custom Javascript to your site?

Edited by creedon

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0

No Javascript. I've added little bits of stuff, some stuff I don't understand honestly, but  definitely not added any Javascript in some obscure place. I'll try the code above and see where that gets me.

Link to post
  • 0
4 minutes ago, MichaelG_2001 said:

I'll try the code above and see where that gets me.

Well my code won't take care of the gallery visual problems or sluggisness.

But to make sure its not some bit of code added you could copy out the Custom CSS and Page Header Code Injection. Keep it someplace safe! Then empty out those fields and save so you are pretty sure there is nothing interfering and then try the gallery again. Be sure to reload the page before testing.

I think you'll find what I did in that it didn't change the gallery performance.

Folks please pitch in! Give the gallery controls a test! What happens?

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0

I'm realizing now that I did add a featherlight popup script I've used on a previous site. It's on the in-progress RECIPES page. I've used this code previously without apparent incident.

Here's the code:
<link href="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.css" type="text/css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.4.0/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

Edited by MichaelG_2001
Link to post
  • 0

To your question about the gallery controls, I thought the larger sized arrows seems to have alleviated the problem but I'm trying again and finding that it's not really working until the third click.

Link to post
  • 0

I'm trying to alter the recent bit of code you provided for the gallery arrow size, and I managed to resize them and change the color, but I'm struggling to get the width to change.

I tried things like:
width: var( 5px );
--and--
width: var( 150% );
--and--
width: 5px;
--and--
width: 150%;

but none of it seemed to change the stroke. What am I doing wrong?


I'm going to try and strip the site down and troubleshoot tomorrow.

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...