Changing Arrows in "Wells" Theme

Site URL: https://wells-demo.squarespace.com/pgh5rpj7l7jqgh0spt6ahxgx8ntzsf

Hi Guys,

I want to change the arrows (left, rght, grid) in the wells theme, I've read somewhere that I can replace them with custom arrows.

I just can't find how to do it.

Any help would be highly appreciated.

Cheers,

Mark

3 hours ago, Markinsaw said:

Site URL: https://wells-demo.squarespace.com/pgh5rpj7l7jqgh0spt6ahxgx8ntzsf

Hi Guys,

I want to change the arrows (left, rght, grid) in the wells theme, I've read somewhere that I can replace them with custom arrows.

I just can't find how to do it.

 

Any help would be highly appreciated.

Cheers,

Mark

You can use this

/* Left  */
.collection-type-gallery .overlay-controls.left-control {
    cursor: w-resize;
}
/* Right  */
.collection-type-gallery .overlay-controls.right-control {
    cursor: e-resize;
}
/* Grid  */
.collection-type-gallery.enable-gallery-thumbnails .overlay-controls.center-control {
    cursor: n-resize;
}

You can check this page for cursor css reference

CSS cursor property (w3schools.com)

6 hours ago, bangank36 said:

You can use this

/* Left  */
.collection-type-gallery .overlay-controls.left-control {
    cursor: w-resize;
}
/* Right  */
.collection-type-gallery .overlay-controls.right-control {
    cursor: e-resize;
}
/* Grid  */
.collection-type-gallery.enable-gallery-thumbnails .overlay-controls.center-control {
    cursor: n-resize;
}

You can check this page for cursor css reference

CSS cursor property (w3schools.com)

Thank you! I will check this out.

I assume I have to put this into custom css?  I am a true noob when it comes to this. That is why I chose for squarespace, to keep things simple 😬

Cheers,

Mark

6 minutes ago, Markinsaw said:

Thank you! I will check this out.

I assume I have to put this into custom css?  I am a true noob when it comes to this. That is why I chose for squarespace, to keep things simple 😬

Cheers,

Mark

 

 

Yes, custom css it is

1 hour ago, bangank36 said:

Yes, custom css it is

I now have this, andhave uploaded the arrows. How do I get them to show. What do I change or add in your text?

Thanks a million for helping me! 

1 minute ago, Markinsaw said:

I now have this, andhave uploaded the arrows. How do I get them to show. What do I change or add in your text?

Thanks a million for helping me! 

You should move the cursor to the top of the panel and click to the image, it will display the url of the image then replace it with the string inside ()

Oh, I'm so close to getting this. Thank you. 

But, I'm still not sure where you paste in the custom info - I'm not understanding this: 

You should move the cursor to the top of the panel and click to the image, it will display the url of the image then replace it with the string inside ()

9 hours ago, JKDwebsite said:

Oh, I'm so close to getting this. Thank you. 

But, I'm still not sure where you paste in the custom info - I'm not understanding this: 

 

You should move the cursor to the top of the panel and click to the image, it will display the url of the image then replace it with the string inside ()

It is just my demo, this action of clicking the image to get URL is the same as the one of getting url for font on the following tutorial:

https://recordit.co/xLAoVsFHqC

Hope it can help