Customizing the cursor arrow when hovering over a gallery page image in Wells template

Hi there, 

Can anyone help me with a code injection for wells gallery pages that can alter the appearance of the cursor when hovering over the left, right and top of the image in the gallery?

Currently when hovering over those areas the cursor changes to either left or right arrows to advance to the next image or up to go to thumbnails but I'd like to alter the appearance of those arrows to a custom version for a clients portfolio.

Is there a way of doing this in the custom css please?

Hi @AtelierDeux

If you want to replace the default cursors with your own left/right arrows
and eg four-square thumbnail symbol,  you can achive this using CSS.

1) Find the 16px/32px png images at  https://www.flaticon.com/ or elsewhere.

2) Paste this into Design > CSS:

.collection-type-gallery.enable-gallery-thumbnails .overlay-controls.center-control {
                               cursor: url(), ns-resize;
}
.collection-type-gallery .overlay-controls.left-control {
                               cursor: url(), e-resize;
}
.collection-type-gallery .overlay-controls.right-control {
                               cursor: url(), w-resize;
}

3) Open Manage Custom Files, upload and insert your png cursors following this guide:
https://support.squarespace.com/hc/en-us/articles/206545567

4) Save and reload.

That should be it 🙂

Magne