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

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


AtelierDeux

Question

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?

Link to post
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

1 answer to this question

Recommended Posts

  • 1

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

 

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