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

7.1 > GALLERY > CUSTOM RIGHT AND LEFT ARROWS (CONTROLS)


HOHWIP

Question

Hi @tuanphan,

I have a question for you regarding creating custom “gallery right+left arrows/controls in Squarespace 7.1.

1. I would like to change/create custom gallery “controls”, for the right and left arrow in  Gallery: Slideshow Reel. Do you know how I can do that?

2. I would like to replace the current arrows and use a custom .svg for right and left, example: right.svg and left.svg

3. I would like to set the size of each to 50px x 50px

4. How do I remove the transparent box around the current arrows so only the new svgs for right and left are visible (ie. Floating)?

Preview details below:


Thanks so much for your help!
-Nicholas

 

 

 

Edited by HOHWIP
Link to comment

7 answers to this question

Recommended Posts

  • 0
On 8/13/2020 at 10:47 AM, HOHWIP said:

Hi @tuanphan,

I have a question for you regarding creating custom “gallery right+left arrows/controls in Squarespace 7.1.

1. I would like to change/create custom gallery “controls”, for the right and left arrow in  Gallery: Slideshow Reel. Do you know how I can do that?

2. I would like to replace the current arrows and use a custom .svg for right and left, example: right.svg and left.svg

3. I would like to set the size of each to 50px x 50px

4. How do I remove the transparent box around the current arrows so only the new svgs for right and left are visible (ie. Floating)?

 

I second this... trying to figure it out ... anyone know? Trying to hack it....

 

Link to comment
  • 0
On 8/15/2020 at 1:10 PM, derricksrandomviews said:

This should help with part of what you want, goes into custom css. 

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

Hey has anyone figured out how to make this work? Since it won't let me upload a svg to Manage Custom Files in Custom CSS, I uploaded a .png file and changed svg to name.png. That didn't work.

Link to comment
  • 0

How about I give you the complete snippet I use on my site for gallery block slideshows to customize the arrows. The color, size, and background radius can all be changed it won't change the shape of the arrow but will allow other tweaks, who knows you might like it.  

.sqs-gallery-block-slideshow .sqs-gallery-controls .next,
.sqs-gallery-block-slideshow .sqs-gallery-controls .previous {
  background: none; /*removes the original background behind the arrows*/
}
.sqs-gallery-block-slideshow .sqs-gallery-controls .next::before,
.sqs-gallery-block-slideshow .sqs-gallery-controls .previous::before {
  background: ;
  color: black;
  font-size: 2.5em; /*this changes the size of the arrows*/
  padding: 10px;
  border-radius: 30%; /*remove this is you don't want the background rounded*/
}

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