Increasing the size of gallery arrows

Add to Home > Design > Custom CSS

.gallery-fullscreen-slideshow-control-btn-icon svg {
    width: 20px !important;
    height: 20px !important;
}

1 hour ago, Amelia__ said:

Legend! Thank you so much ☺️

Is there any way to make the thickness of the arrows thicker too?

.gallery-fullscreen-slideshow-control-btn-icon polyline {
    stroke-width: 4px;
}

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.

17 hours ago, joeystephensmusic said:

@tuanphan  Hi Tuan!  I used your awesome CSS for creating Carousel Arrows on my Mobile View.  This is the code is used...

/* Product slide arrows control */
@media screen and (max-width:767px) {
.ProductItem-gallery-carousel-controls {
    display: flex !important;
}
/* arrows background */
.ProductItem-gallery-carousel-controls * {
    background: white;
}
.ProductItem-gallery-carousel-controls>div {
    justify-content: center !important;
}
}

1.  I'd like to make those arrows slightly bigger and thicker.  Ideas?

2. I'd like to have the same arrows on my desktop view as well.  Is there a CSS for that too?

 

joeystephensmusic.com

 

Thanks!

Joey

Add to Design > Custom CSS

/* Product carousel arrows thicker */
@media screen and (max-width:767px) {
.ProductItem-gallery-carousel-controls .product-item-gallery-carousel-control:after {
    width: 4vw;
    height: 4vw;
    border-width: 2px 2px 0 0;
}}

With q2, try adding to Design > Custom CSS

.ProductItem-gallery-carousel-controls {
    display: flex !important;
}

21 hours ago, joeystephensmusic said:

Is it possible to move the arrows immediately below the product image on Desktop AND Mobile view?  

If so, can the arrows be positioned closer together?

And, lastly, is it possible to add a background color to the arrows? Gray?

Thanks @tuanphan. 

Try this CSS

button.product-item-gallery-carousel-control {
    background: red !important;
}

On 2/10/2021 at 8:34 AM, joeystephensmusic said:

Thanks @tuanphan!

Do you still need help on these?

Legend! Thank you so much ☺️

Is there any way to make the thickness of the arrows thicker too?

Wonderful thank you! 😊😊😊

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

 

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

Moving the arrows off of the images is more important to me than the thickness of the arrows.

Thanks for jumping in here, by the way!

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.

https://oleander-pomegranate-ka8f.squarespace.com/?p
password: temporarystag

Does that do the trick?

M

 

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.

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
 

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.



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.




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

 

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.



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.




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?

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

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

 

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; /* this value controls the side of the arrows */
        
        /* do not change anything below, there be the borg here */
        
        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.

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?

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.

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?

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 from the RECIPES page header injection:
<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>


Here's the corresponding code from a sample image on that page:

<a href="#" data-featherlight="#test-image"><img alt="test image 1 alt" src="https://static1.squarespace.com/static/5f91e45ce9c9a7197e80ca05/t/5fa8eedbd40a8a1cf784765b/1604906715584/cocktail_temp.jpg" onmouseover="this.src='https://static1.squarespace.com/static/5f91e45ce9c9a7197e80ca05/t/5fa8eee2116faf366cf0d010/1604906722024/cocktail_temp_over.jpg'" onmouseout="this.src='https://static1.squarespace.com/static/5f91e45ce9c9a7197e80ca05/t/5fa8eedbd40a8a1cf784765b/1604906715584/cocktail_temp.jpg'">
</a>

<div style="display:none;">
<div id="test-image">
<p><h10 class="recipe-title"> pumpkin spice frappe <br>
  </h10>
<b>INGREDIENTS</b><br>
» 1 can REBEL Hard Pumpkin Spice Latte<br>
» ½ cup pumpkin puree<br>
» ½ cup chilled black coffee<br>
» ½ cup vanilla soy milk (or any other milk you prefer)<br>
» 2 cups ice<br>
» ½ tsp pumpkin pie spice<br>
» 2 tsp cocoa powder<br>
» Whipped cream (for layering)<br>
<br>
<b>PREPARATION</b><br>
1) Blend all ingredients (except for whipped cream).<br />
2) Layer blended mixture with whipped cream.<br />
3) Top with cocoa powder or, for the ‘gram, colorful sliced figs.<br />
Makes 2+ servings.
</p>
</div>
</div>

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.